( चित्रण )

एक बार कुछ साल पहले, जब मैं जावा में वेब के साथ काम करना शुरू कर रहा था, हमने JSP के साथ काम किया। पूरे पेज को सर्वर पर जनरेट किया गया और क्लाइंट को भेजा गया। लेकिन फिर सवाल यह आया कि जवाब बहुत लंबा आया ...

हमने एक दृष्टिकोण का उपयोग करना शुरू किया जिसमें एक खाली पृष्ठ टेम्पलेट दिया गया है, और सभी डेटा पहले से ही अजाक्स द्वारा धीरे-धीरे लोड किए गए हैं। सभी लोग खुश थे, पन्नों ने दिखाया। हमें महसूस नहीं हुआ कि हमने अपने लिए क्या किया है, क्योंकि CSR मोबाइल उपकरणों पर खोज इंजन अनुकूलन और प्रदर्शन को नकारात्मक रूप से प्रभावित करता है। लेकिन फिर मैंने जेएस फ्रेमवर्क के साथ एसएसआर समर्थन के बारे में फिर से सुना।

और क्या होता है, इतिहास खुद को दोहराता है?

SSR के ऑपरेटिंग सिद्धांत क्या हैं?

1. पूर्वेक्षण। सबसे सरल मामले में, एन एचटीएमएल फाइलें उत्पन्न होती हैं, जो सर्वर पर डाल दी जाती हैं और जैसा कि लौटाया जाता है - अर्थात, स्टेटिक लौटा दी जाती है, हम अनुरोध के दौरान कुछ भी उत्पन्न नहीं करते हैं।



2. जेएसपी के मामले में, सर्वर सभी सामग्री के साथ पूर्ण एचटीएमएल जेनरेट करता है और इसे क्लाइंट को लौटाता है। लेकिन, प्रत्येक अनुरोध के लिए एक पेज उत्पन्न नहीं करने के लिए (उनमें से एक लाख हो सकता है और हमारा सर्वर झुक जाएगा), चलो एक प्रॉक्सी कैश जोड़ें। उदाहरण के लिए, वार्निश।



इनमें से प्रत्येक विधि कब लागू हो सकती है:

1. HTML फ़ाइलों का एक समूह बनाने के लिए कब समझ में आता है? जाहिर है, जब साइट पर डेटा कभी नहीं से थोड़ा कम बदलता है। उदाहरण के लिए, एक जूता मरम्मत स्टाल की कॉर्पोरेट वेबसाइट, जो कोने के आसपास है (हाँ, वह चाचा जो 2x2 मीटर के स्टाल में हील बदलता है, वह भी कंपनी की वेबसाइट चाहता था - और निश्चित रूप से, कंपनी के मिशन पेज के साथ)। ऐसी साइट के लिए, आपको फ्रेमवर्क, SSR और अन्य सीटी से भी परेशान नहीं होना पड़ेगा, लेकिन यह एक गोलाकार उदाहरण है। अगर हमारे पास 1k पोस्ट वाला ब्लॉग है तो क्या होगा? कभी-कभी हम उन्हें अपडेट करते हैं, कभी-कभी हम नए जोड़ते हैं। 1k + स्टैटिक फाइल्स जेनरेट करें ... कुछ गड़बड़ है। और अगर हम पोस्ट बदलते हैं, तो हमें एक निश्चित फ़ाइल को पुन: उत्पन्न करने की आवश्यकता है। हम्म ...

2. और यहाँ दूसरी विधि हमें सूट करती है। जहां हम पहली बार फ्लाई पर उत्पन्न होते हैं, और फिर प्रॉक्सी सेवा में प्रतिक्रिया को कैश करते हैं। कैशिंग समय एक घंटा / दो / दिन हो सकता है - जो भी हो। यदि हमारे पास प्रति पोस्ट प्रति घंटे (अविश्वसनीय, सही?) 10,000 कॉल हैं, तो केवल पहला अनुरोध सर्वर तक पहुंच जाएगा। बाकी लोगों को जवाब में एक कैश्ड प्रति प्राप्त होगी, और हमारे सर्वर में रहने की अधिक संभावना है। किसी पोस्ट को अपडेट करने के मामले में, हमें केवल कैश्ड रिकॉर्ड को रीसेट करने की आवश्यकता है ताकि अगले पृष्ठ पर एक वास्तविक पेज उत्पन्न हो।

शब्दों से कार्रवाई तक:

नमस्ते विश्व रेपो।

0) हेल्लो वर्ल्ड जनरेट करें

एक त्वरित शुरुआत के लिए, Nuxt समुदाय ने बुनियादी टेम्पलेट तैयार किए हैं , आप उनमें से किसी को भी कमांड के साथ स्थापित कर सकते हैं:

$ vue init <template-name> <project-name> 

डिफ़ॉल्ट रूप से, शुरू-टेम्पलेट प्रस्तावित है, और हम इसे अपने उदाहरण के लिए लेंगे। हालांकि एक वास्तविक एप्लिकेशन में हमने एक्सप्रेस-टेम्प्लेट चुना। आइए परियोजना को सीधा कहें:

 $ vue init nuxt-community/starter-template habr-nuxt-example $ cd habr-nuxt-example $ yarn #  npm install,    $ yarn dev 

ठीक है , हमने हैलो वर्ल्ड बनाया। यूआरएल के माध्यम से जा रहे हैं, आप उत्पन्न पृष्ठ देख सकते हैं:
1) वेबपैक और लाइनिंग

बॉक्स के बाहर Nxt ने ES6 (babel-loader), Vue सिंगल-फाइल कंपोनेंट्स (वाउ-लोडर), साथ ही SCSS, JSX और अधिक के समर्थन के साथ वेबपैक कॉन्फ़िगर किए हैं।

यदि ये क्षमताएं पर्याप्त नहीं हैं, तो वेबपैक कॉन्फिगर का विस्तार किया जा सकता है। हम nuxt.config.js पर जाते हैं, और build.extend में हम कॉन्फिगर को संशोधित करने की क्षमता रखते हैं।

उदाहरण के लिए, हम कोड अस्तर के साथ सादृश्य द्वारा शैली अस्तर जोड़ देंगे - एक महत्वपूर्ण, हमारी राय में, एक समान कोड आधार बनाए रखने के लिए इंगित करें। यह एक अच्छी आदत है जो कई नुकसानों से बचने में मदद करेगी।

एक कॉन्फ़िगरेशन एक्सटेंशन का उदाहरण (पर्यावरण चर के आधार पर एक नौकरानी के लिए एक कॉन्फ़िगर फ़ाइल कनेक्ट करना):

 config.plugins.push( new StylelintPlugin({ files: [ '**/*.vue', 'assets/scss/**/*.scss' ], configFile: './.stylelintrc.dev.js' }) ) 

रेपो में अन्य परिवर्तनों को टैग द्वारा देखा जा सकता है, ये परिवर्तन हमें शैलियों को क्रम में रखने में मदद करेंगे।

और एक लिंटर कॉन्फिग फ़ाइल का एक उदाहरण: हम मानक जेएस का उपयोग करते हैं, एक समाधान के रूप में आमतौर पर Vue / Nuxt में स्वीकार किया जाता है:

 ... extends: [ - 'plugin:vue/essential' + 'standard', + 'plugin:vue/recommended' ], … 

2) डेटा के साथ काम करने के एक उदाहरण के लिए, हम इस एपीआई का उपयोग करेंगे:

Axios को एक प्लगइन के रूप में कनेक्ट करें, प्लगइन्स निर्देशिका में एक नई फ़ाइल बनाएं:

 import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` } export default axios.create(options) 

और उपयोग का एक उदाहरण:

 import axios from '~/plugins/axios' export default { async asyncData ({ params }) { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') return { data } } } 

टैग द्वारा शलजम में एल्स।

डाउनलोड नंबर:

1) एसएसआर + वार्निश

पहला अनुरोध:



दूसरा:



2) नहीं-एसएसआर



फास्टले से दूसरा अनुरोध



एक रिक्त पृष्ठ तेज़ी से आया, लेकिन इस पर सामग्री उत्पन्न करने में 2 सेकंड का समय लगा।

निष्कर्ष

परिणाम क्या है? हमें पता चला कि न्यूनतम कॉन्फ़िगर किया गया स्टार्टअप SSR एप्लिकेशन कैसे प्राप्त करें। उन्होंने प्रोजेक्ट जीवन की शुरुआत से ही कोड शैली को संरक्षित करने के लिए लाइनिंग को जोड़ा, और सामान्य वास्तुकला को भी रेखांकित किया। आप अपना गोगोल लिख सकते हैं।