] इस लेख में, मैं बताऊंगा कि ISR नेक्स्ट.जेएस में कैसे काम करता है, पेज राउटर और ऐप राउटर दोनों में आईएसआर को लागू करने के उदाहरण दिखाते हैं, और अंत में, नेक्स्ट.जेएस में आईएसआर के बारे में कुछ सामान्य प्रश्नों को संबोधित करते हैं।

ISR क्या है?

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

आईएसआर एसईओ और उपयोगकर्ता अनुभव में कैसे सुधार करता है?

] जब कोई उपयोगकर्ता पहली बार SPA वेबसाइट पर जाता है, तो SPA एक न्यूनतम HTML फ़ाइल भेजता है (प्रतिक्रिया में, यह आमतौर पर index.html है)। उसके बाद, यह CSS, जावास्क्रिप्ट और अनुरोधित पृष्ठ के लिए आवश्यक अन्य संसाधनों को प्राप्त करता है। इन संसाधनों को तब प्रदान किया जाता है और ग्राहक (ब्राउज़र) तक पहुंचने के बाद HTML में जोड़ा जाता है। हालाँकि, जैसा कि पहले उल्लेख किया गया है, एक स्पा द्वारा भेजी गई प्रारंभिक HTML फ़ाइल में कोई सामग्री नहीं है।

अब, एक उपयोगकर्ता के बजाय वेबसाइट का अनुरोध करने वाले Google बॉट की कल्पना करें। जबकि आधुनिक Google बॉट सामग्री को पुनः प्राप्त करने के लिए जावास्क्रिप्ट को निष्पादित कर सकते हैं, इस पर पूरी तरह से भरोसा करना अभी भी एसईओ को नकारात्मक रूप से प्रभावित कर सकता है। बॉट प्रारंभिक HTML को खाली के रूप में देख सकता है, जो पृष्ठ सामग्री को अनुक्रमित करने में देरी कर सकता है, संभावित रूप से आपकी खोज रैंकिंग को नुकसान पहुंचा सकता है।

] हम बाद में विस्तार से प्रतिपादन के बारे में बात करेंगे, लेकिन यहां एक संक्षिप्त अवलोकन है। सर्वर प्री-रेंडरिंग के साथ, प्रत्येक मार्ग के लिए HTML सर्वर पर उत्पन्न होता है और सीधे क्लाइंट को भेजा जाता है। CSS और जावास्क्रिप्ट फ़ाइलों को आमतौर पर बंडल और कैश किया जाता है।

] यह एसईओ में सुधार करता है क्योंकि Google बॉट तुरंत HTML में सामग्री देख सकता है। यह पेज लोड को तेज करके उपयोगकर्ता अनुभव को भी बढ़ाता है, जिसका अर्थ है कि उपयोगकर्ताओं को गतिशील रूप से लोड करने के लिए सामग्री का इंतजार नहीं करना पड़ता है।

ISR कैसे काम करता है?

] कल्पना कीजिए कि आप एक व्यवस्थापक हैं जो आपकी वेबसाइट पर ब्लॉग की सूची का प्रबंधन करता है। हर बार जब आप एक नया ब्लॉग पोस्ट करते हैं तो आप अपनी परियोजना का पुनर्निर्माण नहीं करना चाहते हैं। इसके बजाय, आप चाहते हैं कि आपका ब्लॉग सूची पृष्ठ स्वचालित रूप से अपडेट हो, कहें, हर 60 सेकंड। इसलिए, जब आप एक नया ब्लॉग लिखते हैं, तो आप चाहते हैं कि यह मैन्युअल रूप से अपनी परियोजना के पुनर्निर्माण के बिना दिखाए। यह वह जगह है जहां ISR आता है। जब आप SSR (सर्वर-साइड रेंडरिंग) जैसे तरीकों का उपयोग कर सकते हैं, यदि आप चाहते हैं कि आपकी वेबसाइट विशिष्ट अंतराल पर अपडेट हो, तो ISR जाने का रास्ता है। हम बाद में SSR के बारे में बात करेंगे।

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

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

] पहले निर्माण के बाद, आईएसआर पुनर्जनन प्रक्रिया को संभालने के लिए किक करता है। इसके अलावा, ISR आपकी पूरी साइट को पुन: उत्पन्न नहीं करता है; यह केवल उस विशिष्ट पृष्ठ को पुनर्जीवित करता है जहां ISR लागू होता है। इसलिए, जब ISR पुन: उत्पन्न करता है, तो केवल उस विशिष्ट पृष्ठ को अपडेट किया जाता है, पूरी परियोजना नहीं।

ऐप राउटर में ISR कैसे लागू करें

ऐप राउटर में ISR (वृद्धिशील स्थैतिक पुनर्जनन) को लागू करने के लिए, यह जानना महत्वपूर्ण है कि ISR का उपयोग सर्वर घटकों में किया जाना चाहिए, न कि क्लाइंट घटकों में। ऐसा इसलिए है क्योंकि ISR एक सर्वर-रेंडरिंग विधि है, न कि क्लाइंट-साइड। तो, आपको ISR को ऐप/ब्लॉग/page.tsx या app/blog/page.jsx जैसी फ़ाइलों में रखना चाहिए।

] सर्वर घटक पृष्ठ को पुन: उत्पन्न करने के लिए नया डेटा प्राप्त करने में सक्षम होना चाहिए, अन्यथा, कोई अपडेट नहीं होगा।

] यदि आप लाने के बजाय Axios का उपयोग करना पसंद करते हैं, तो आप अभी भी अनुरोध को कॉन्फ़िगर करके इसका उपयोग कर सकते हैं, लेकिन अभी के लिए, मैं Fetch का उपयोग करने के लिए चिपक जाऊंगा। हो सकता है कि बाद में मैं समझाता हूं कि इसे Axios के साथ कैसे करना है।

]

यह TSX फ़ाइल में लागू करने का उदाहरण है

यह jsx फ़ाइल में लागू करने का उदाहरण है:

पेज राउटर में ISR कैसे लागू करें?

] यह फ़ंक्शन केवल सर्वर-साइड रेंडरिंग के दौरान चलता है, इसलिए आपको अपने एपीआई को GetStaticProps के अंदर कॉल करना सुनिश्चित करना होगा। जैसा कि पिछले अनुभाग में उल्लेख किया गया है, आप अपने डेटा को लाने के लिए Fetch या Axios का उपयोग कर सकते हैं, लेकिन ध्यान रखें कि API कॉल को GetStaticProps के अंदर बनाया जाना चाहिए, या फिर ISR काम नहीं करेगा।

फिर से, यह फ़ंक्शन सर्वर पर निष्पादित किया जाता है, क्लाइंट पर नहीं। यहाँ प्रदर्शित करने के लिए एक उदाहरण है:

यह TSX फ़ाइल में लागू करने का उदाहरण है:

यह jsx फ़ाइल में लागू करने का उदाहरण है:

निष्कर्ष

isr में अगला। आप SSR या SSG जैसे अन्य तरीकों का उपयोग करके अपना घटक बना सकते हैं, लेकिन कभी -कभी विशिष्ट उपयोग के मामलों के लिए ISR की आवश्यकता होती है।

] इस लेख में, मैंने इसे यथासंभव स्पष्ट रूप से समझाने की कोशिश की है, और मैं इसे बाद में अपडेट करूंगा यदि मैं इसे और भी बेहतर समझा सकता हूं। यदि कुछ भी स्पष्ट नहीं है, तो कृपया मुझे एक टिप्पणी छोड़कर बताएं, और मैं और अधिक स्पष्टीकरण प्रदान करूंगा।

इस ब्लॉग को पढ़ने के लिए धन्यवाद, और मुझे आशा है कि आपने इसका आनंद लिया है!