🧓🏻 🏧 🤕 नेक्स्ट.जेएस पर स्विच करना और मैनिफोल्ड.फो होमपेज के लोडिंग को 7.5 गुना तेज करना ✊🏿 🧕🏿 👦🏾

आज हम इस बारे में एक कहानी का अनुवाद प्रकाशित कर रहे हैं कि कैसे रिएक्ट बॉयलरप्लेट से नेक्स्ट.जेएस में संक्रमण, रिएक्ट पर आधारित प्रगतिशील वेब अनुप्रयोगों को विकसित करने के लिए एक फ्रेमवर्क, ने कई गुना कई गुना बढ़ गया है। परियोजना में कोई अन्य परिवर्तन नहीं किया गया था, और यह संक्रमण, सामान्य रूप से, सिस्टम के अन्य भागों के लिए पूरी तरह से अदृश्य हो गया। अंत में जो निकला वह उम्मीद से भी बेहतर निकला।

परिणाम अवलोकन

वास्तव में, हम यह कह सकते हैं कि Next.js के लिए संक्रमण ने हमें कुछ इस तरह दिया "परियोजना उत्पादकता में वृद्धि जो कि कहीं से भी आई"। यहां विभिन्न हार्डवेयर संसाधनों और नेटवर्क कनेक्शन का उपयोग करते समय प्रोजेक्ट लोड समय कैसा दिखता है।

यौगिक	प्रोसेसर	सेकंड के लिए	सेकंड के बाद	% सुधार
फास्ट (200 एमबीपीएस)	उपवास	1.5	0.2	750
मध्यम (3 जी)	उपवास	5.6	1.1	500
मध्यम (3 जी)	औसत	7.5	1.3	570
धीमा (धीमा 3G कनेक्शन)	औसत	22	4	550

त्वरित कनेक्शन और तेज़ प्रोसेसर वाले डिवाइस का उपयोग करते समय, साइट लोड समय 1.5 s से गिर गया। 0.2 सेकेंड तक, यानी इस सूचक में 7.5 गुना सुधार हुआ। मध्यम-गुणवत्ता वाले कनेक्शन पर और औसत प्रदर्शन वाले डिवाइस पर, साइट लोड समय 7.5 एस से गिर गया। 1.3 एस तक

उपयोगकर्ता द्वारा URL पर क्लिक करने के बाद क्या होता है?

प्रगतिशील वेब एप्लिकेशन (प्रोग्रेसिव वेब ऐप, PWA) के काम की विशेषताओं को समझने के लिए, आपको सबसे पहले यह समझने की आवश्यकता है कि जब उपयोगकर्ता URL (हमारी वेबसाइट के पते पर) पर क्लिक करता है और उस पल के बीच होता है जब वह कुछ देखता है एक ब्राउज़र विंडो में (इस मामले में, हमारा रिएक्ट एप्लिकेशन)।

आवेदन चरणों

आवेदन के साथ काम करने के 5 चरणों पर विचार करें, जिसका आरेख ऊपर दिया गया है।

उपयोगकर्ता URL पर जाता है, सिस्टम DNS का उपयोग करके सर्वर पते का पता लगाता है और सर्वर तक पहुंचता है। यह सब बहुत जल्दी से किया जाता है, आमतौर पर 100 मिलीसेकंड से कम होता है, लेकिन इस कदम में कुछ समय लगता है, यही कारण है कि इसका उल्लेख यहां किया गया है।
अब सर्वर पृष्ठ का HTML-कोड लौटाता है, लेकिन ब्राउज़र में पृष्ठ तब तक खाली रहता है जब तक कि उसके प्रदर्शन के लिए आवश्यक संसाधन लोड नहीं किए जाते हैं (जब तक कि संसाधन अतुल्यकालिक रूप से लोड नहीं किए जाते हैं)। दरअसल, इस चरण में आरेख में दिखाए जाने की तुलना में अधिक क्रियाएं हो रही हैं, लेकिन इन सभी प्रक्रियाओं की एक संयुक्त समीक्षा भी हमारे अनुरूप होगी।
एचटीएमएल कोड और सबसे महत्वपूर्ण संसाधनों को लोड करने के बाद, ब्राउज़र यह प्रदर्शित करना शुरू कर देता है कि वह क्या प्रदर्शित कर सकता है, पृष्ठभूमि में बाकी सब (चित्र, उदाहरण के लिए) लोड करना जारी रखता है। क्या आपने कभी सोचा है कि कभी-कभी किसी पृष्ठ पर अचानक "पॉप अप" करने वाले चित्र स्पष्ट रूप से आवश्यक से अधिक तेज होते हैं, और कभी-कभी बहुत लंबे समय तक लोड होते हैं? यह ठीक है कि ऐसा क्यों होता है। यह दृष्टिकोण आपको एक तैयार पृष्ठ जल्दी से बनाने की अनुमति देता है।
जावास्क्रिप्ट कोड को लोड किए जाने के बाद ही पार्स और निष्पादित किया जा सकता है। पृष्ठ पर उपयोग किए गए जेएस कोड के आकार के आधार पर (और यह एक विशिष्ट रिएक्ट एप्लिकेशन के लिए हो सकता है, यदि कोड एक ही फाइल में पैक किया गया है तो काफी बड़ा है) इसमें कई सेकंड या उससे भी अधिक समय लग सकता है (ध्यान दें कि जेएस कोड की जरूरत नहीं है, क्रियान्वयन शुरू करने के लिए, अन्य सभी संसाधनों के लोड होने की प्रतीक्षा करें, इस तथ्य के बावजूद कि आरेख में यह बिल्कुल ऐसा दिखता है)।
रिएक्ट एप्लिकेशन के मामले में, अब वह क्षण आता है जब कोड डोम को संशोधित करता है, जो इस तथ्य की ओर जाता है कि ब्राउज़र पहले से प्रदर्शित पृष्ठ को फिर से दिखाता है। फिर एक और संसाधन लोडिंग चक्र शुरू होता है। यह कदम इस समय पृष्ठ की जटिलता पर निर्भर करेगा।

तेजी से, बेहतर है।

चूंकि एक प्रगतिशील वेब एप्लिकेशन रिएक्ट कोड लेता है और स्थिर HTML और सीएसएस कोड का उत्पादन करता है, इसका मतलब है कि उपयोगकर्ता उपरोक्त योजना के चरण 3 पर पहले से ही रिएक्ट एप्लिकेशन को देखता है, और चरण 5 पर नहीं। हमारे परीक्षणों में, यह 0.2-4 सेकंड लेता है , जो इंटरनेट और उसके डिवाइस पर उपयोगकर्ता के कनेक्शन की गति पर निर्भर करता है। यह पिछले 1.5-22 सेकंड से काफी बेहतर है। प्रगतिशील वेब अनुप्रयोग उपयोगकर्ता के लिए तेजी से प्रतिक्रिया देने के लिए एक विश्वसनीय तरीका है।

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

पी.डब्ल्यू.ए। फ्रेमवर्क जैसे नेक्स्ट.जेएस और गैट्सबी का हालिया उद्भव (दोनों 2016 के अंत में दिखाई दिए - 2017 की शुरुआत में) कम प्रवेश बाधाओं के कारण पीडब्ल्यूए को व्यापक रूप से अपनाने की दिशा में एक गंभीर कदम था और इस तरह के ढांचे के कारण यह एक सरल और सुखद कार्य बन गया था।

यद्यपि हर एप्लिकेशन को Next.js में स्थानांतरित नहीं किया जा सकता है, लेकिन कई रिएक्ट अनुप्रयोगों के लिए इस संक्रमण का मतलब समान "प्रदर्शन से कहीं बाहर" है जो हम यहां बात कर रहे हैं, नेटवर्क संसाधनों के और भी अधिक कुशल उपयोग के पूरक हैं।

Next.js पर पलायन करना कितना मुश्किल है?

सामान्य तौर पर, यह ध्यान दिया जा सकता है कि हमारे होमपेज को Next.js में अनुवाद करना बहुत मुश्किल नहीं था। हालांकि, हमें कुछ कठिनाइयों का सामना करना पड़ा जो हमारे आवेदन की वास्तुकला सुविधाओं के कारण थे।

R एक प्रतिक्रिया रूटर को खारिज करना

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

Next.js राउटर एक हाई-स्पीड रिएक्ट राउटर का एक सा है, लेकिन यह अभी भी एक रिएक्टर राउटर नहीं है।

व्यवहार में, चूंकि हमने विशेष रूप से उन्नत सुविधाओं का लाभ नहीं लिया है जो कि रिएक्ट राउटर प्रदान करता है, हमारे लिए नेक्स्ट.जेएस राउटर के लिए संक्रमण केवल अगले रिएज घटक के साथ मानक रिएक्टर राउटर घटक को बदलना था:

/*   ( React) */ <Link to="/my/page">  A link </Link> /*   ( Next.js) */ <Link href="/my/page" passHref>  <a>    A link  </a> </Link>

सामान्य तौर पर, सब कुछ इतना बुरा नहीं निकला। हमें संपत्ति का नाम बदलना पड़ा और सर्वर रेंडरिंग उद्देश्यों के लिए एक टैग जोड़ना पड़ा। चूँकि हमने styled-components लाइब्रेरी का भी उपयोग किया, इसलिए यह निकला कि अधिकांश उदाहरणों में हमें passHref प्रॉपर्टी को जोड़ने की passHref है ताकि यह सुनिश्चित हो सके कि सिस्टम इस तरह से व्यवहार करता है कि href हमेशा जनरेट किए गए टैग की ओर passHref करता है।

कई गुना के लिए नेटवर्क अनुरोध

अपनी खुद की आँखों से देखने के लिए, कार्रवाई में Next.js राउटर के अनुकूलन को कई गुना करने के लिए ब्राउज़र डेवलपर टूल का नेटवर्क टैब खोलें और कई लिंक पर क्लिक करें। पिछला आंकड़ा /services लिंक पर क्लिक करने का परिणाम दिखाता है। जैसा कि आप देख सकते हैं, यह नियमित अनुरोध करने के बजाय services.js को लोड करने के अनुरोध के निष्पादन की ओर जाता है।

मैं केवल क्लाइंट-साइड रूटिंग के बारे में बात नहीं कर रहा हूं, इस समस्या को हल करने के लिए रिएक्ट राउटर भी उपयुक्त है। मैं जावास्क्रिप्ट कोड के एक वास्तविक टुकड़े के बारे में बात कर रहा हूं जिसे बाकी कोड से निकाला गया है और अनुरोध पर लोड किया गया है। यह मानक Next.js. का उपयोग करके किया जाता है और यह पहले की तुलना में बहुत बेहतर है। अर्थात्, हम 1.7 एमबी के आकार के साथ जेएस-कोड के एक बड़े पैकेज के बारे में बात कर रहे हैं, जिसे क्लाइंट, कुछ देखने से पहले, डाउनलोड और प्रोसेस करना पड़ता था।

यद्यपि यहां प्रस्तुत समाधान सही नहीं है, यह पिछले एक की तुलना में बहुत करीब है कि उपयोगकर्ता केवल उन पृष्ठों के लिए कोड डाउनलोड करते हैं जिन्हें वे देखते हैं।

। Redux का उपयोग करने की विशेषताएं

Next.js के लिए संक्रमण से जुड़ी कठिनाइयों के विषय को जारी रखते हुए, यह ध्यान दिया जा सकता है कि Next.js आवेदन को उजागर करने वाले सभी दिलचस्प अनुकूलन इस आवेदन पर एक निश्चित प्रभाव डालते हैं। अर्थात्, Next.js पृष्ठ-स्तरीय कोड पृथक्करण करता है, यह डेवलपर को React रूट लाइब्रेरी के React रूट घटक या render() पद्धति तक पहुँचने से रोकता है। यदि आप पहले से ही Redux को कॉन्फ़िगर करने में शामिल हैं, तो आप ध्यान दें कि यह सब हमें बताता है कि Redux के साथ सामान्य ऑपरेशन के लिए हमें समस्या को हल करने की आवश्यकता है, जो कि यह स्पष्ट नहीं है कि Redux को कहाँ देखना है।

Next.js एक विशेष उच्च-क्रम घटक प्रदान करता है, withRedux , जो प्रत्येक के लिए सभी शीर्ष-स्तरीय घटकों के लिए एक आवरण के रूप में withRedux :

 export default withRedux(HomePage);

हालाँकि यह सब इतना बुरा नहीं है, लेकिन अगर आपको createStore() विधियों की आवश्यकता है, जैसे कि redux-reducer-injectors का उपयोग करते समय, उम्मीद करें कि आपको आवरण को डिबग करने के लिए अतिरिक्त समय की आवश्यकता होगी (और, वैसे, कभी भी प्रयास न करें redux-reducer-injectors ) की तरह कुछ का उपयोग करें।

इसके अलावा, इस तथ्य के कारण कि Redux अब एक "ब्लैक बॉक्स" है, इसके साथ अचल पुस्तकालय का उपयोग करना समस्याग्रस्त हो जाता है। हालांकि यह तथ्य कि इम्युटेबल Redux के साथ काम करेगा, काफी स्पष्ट लगता है, मैं एक समस्या में भाग गया। तो, या तो शीर्ष स्तर की स्थिति अपरिवर्तनीय नहीं थी (गेट get is not a function त्रुटि get is not a function ), या आवरण घटक ने .get() विधि के बजाय जेएस ऑब्जेक्ट्स के साथ काम करने के लिए डॉट नोटेशन का उपयोग करने की कोशिश की ( Can't get catalog of undefined त्रुटि Can't get catalog of undefined )। इस समस्या को दूर करने के लिए, मुझे स्रोत कोड का संदर्भ देना होगा। आखिरकार, Next.js डेवलपर को एक कारण से अपने स्वयं के तंत्र का उपयोग करने के लिए मजबूर करता है।

सामान्य तौर पर, यह ध्यान दिया जा सकता है कि Next.js से जुड़ी मुख्य समस्या यह है कि इस ढांचे में बहुत कम ही अच्छी तरह से प्रलेखित है। दस्तावेज़ीकरण में कई उदाहरण हैं जिनके आधार पर आप अपना खुद का कुछ बना सकते हैं, लेकिन अगर उनमें से कोई भी ऐसा नहीं है जो आपकी परियोजना की विशेषताओं को दर्शाता है, तो आप केवल शुभकामनाएं दे सकते हैं।

▍फेक रिजेक्शन

हमने रिएक्ट-इनलाइव्स लाइब्रेरी का उपयोग किया, जो एम्बेडेड एसवीजी छवियों और क्वेरी कैशिंग के लिए स्टाइलिंग विकल्प प्रदान करता है। लेकिन यहां हमें एक समस्या थी: सर्वर रेंडरिंग करते समय, एक्सएचआर अनुरोध (वेबपैक द्वारा उत्पन्न यूआरएल के अर्थ में कम से कम नहीं, जैसा कि आप उम्मीद कर सकते हैं) जैसी कोई चीज नहीं है। ऐसे अनुरोधों को निष्पादित करने का प्रयास सर्वर रेंडरिंग में हस्तक्षेप करता है।

यद्यपि एम्बेडेड एसवीजी डेटा के साथ काम करने के लिए अन्य पुस्तकालय हैं जो एसएसआर का समर्थन करते हैं, मैंने इस सुविधा को छोड़ने का फैसला किया, क्योंकि एसवीजी फाइलें भी शायद ही कभी उपयोग की जाती थीं। मैंने या तो उन्हें साधारण छवियों के साथ प्रतिस्थापित किया, <img> टैग, अगर मुझे संबंधित छवियों को प्रदर्शित करते समय स्टाइल की आवश्यकता नहीं थी, या मैंने उन्हें रिएक्ट JSX के रूप में कोड में एम्बेड किया। शायद, सब कुछ ठीक हो गया, क्योंकि जेएसएक्स के चित्र अब ब्राउज़र से टकराते हैं जब पेज पहले लोड किया गया था, और क्लाइंट को भेजे गए जेएस बंडल में 1 कम लाइब्रेरी थी।

यदि आपको डेटा लोडिंग मैकेनिज्म (मुझे किसी अन्य लाइब्रेरी के लिए इस सुविधा की आवश्यकता है) का उपयोग करने की आवश्यकता है, तो आप इसे whatwg-fetch और node-fetch का उपयोग करके next.config.js कॉन्फ़िगर कर सकते हैं।

 module.exports = { webpack: (config, options) =>   Object.assign(config, {     plugins: config.plugins.concat([       new webpack.ProvidePlugin(         config.isServer           ? {}           : { fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch' }       ),     ]),   resolve: Object.assign(config.resolve, {     alias: Object.assign(       config.resolve.alias,       config.isServer ? {} : { fetch: 'node-fetch' }     ),   }), }), };

▍ क्लाइंट और सर्वर जेएस

Next.js की अंतिम विशेषता, जिसका मैं यहां उल्लेख करना चाहूंगा, यह है कि इस ढांचे को दो बार लॉन्च किया जाता है - एक बार सर्वर के लिए, और फिर क्लाइंट के लिए। यह एक ही कोड बेस में क्लाइंट-साइड जावास्क्रिप्ट और Node.js कोड के बीच की रेखा को धुंधला करता है, जिससे क्लाइंट पर Node.js सुविधाओं का लाभ लेने की कोशिश करते समय fs is undefined जैसी असामान्य त्रुटियां fs is undefined होती हैं।

नतीजतन, हमें next.js.config निर्माण में इस तरह के निर्माण करने next.js.config । next.js.config :

 module.exports = { webpack: (config, options) =>   Object.assign(config, {     node: config.isServer ? undefined : { fs: 'empty' },   }), };

अगर आपको विभिन्न वातावरणों में समान कोड चलाने की आवश्यकता है, तो Webpack में config.isServer ध्वज आपका सबसे अच्छा दोस्त होगा।

इसके अलावा, Next.js का समर्थन करता है, प्रतिक्रिया घटकों के जीवन चक्र के मानक तरीकों के अलावा, getInitialProps() विधि, जिसे सर्वर मोड में कोड getInitialProps() ही कहा जाता है:

 class HomePage extends React.Component { static getInitialProps() {   //         } componentDidMount() {   //     ,    } … }

हां, और यह न भूलें कि हमारा अच्छा दोस्त, window ऑब्जेक्ट, घटनाओं को सुनने के लिए व्यवस्थित करने के लिए आवश्यक है, ब्राउज़र विंडो के आकार का निर्धारण करने और कई उपयोगी कार्यों तक पहुंच प्रदान करने के लिए, Node.js में उपलब्ध नहीं है:

 if (typeof window !== 'undefined') { // ,     `window`      }

यह ध्यान दिया जाना चाहिए कि यहां तक कि Next.js डेवलपर को सर्वर पर और क्लाइंट पर समान कोड के निष्पादन से जुड़ी समस्याओं को हल करने की आवश्यकता से बचाने में सक्षम नहीं है। लेकिन ऐसी समस्याओं को हल करते समय, config.isServer और getInitialProps() बहुत उपयोगी होते हैं।

परिणाम: Next.js के बाद क्या होगा?

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

शायद भविष्य में हम इस घटना के अन्य विकल्पों पर विचार करेंगे कि हमारे आवेदन को सर्वर रेंडरिंग और अधिक जटिल सर्वर लॉजिक दोनों की जरूरत है (उदाहरण के लिए, हम कई साइन-ऑन तकनीक को कई गुना लागू करने की संभावना को देखते हैं। डैशबोर्ड और मेनफोल्ड ।.co )। लेकिन तब तक हम Next.js का उपयोग करेंगे, क्योंकि इस रूपरेखा ने, छोटे समय की लागतों के साथ, हमें भारी लाभ दिलाया।

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में Next.js का उपयोग करते हैं?

नेक्स्ट.जेएस पर स्विच करना और मैनिफोल्ड.फो होमपेज के लोडिंग को 7.5 गुना तेज करना