आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं।
रेंडरिंग रिएक्ट कोड को HTML में बदलने की प्रक्रिया है। आपके द्वारा चुनी गई रेंडरिंग विधि उस डेटा पर निर्भर करती है जिसके साथ आप काम कर रहे हैं और आप प्रदर्शन के बारे में कितना ध्यान रखते हैं।
Next.js में, रेंडरिंग बहुत बहुमुखी है। आप पृष्ठों को क्लाइंट-साइड या सर्वर-साइड, स्थिर या वृद्धिशील रूप से प्रस्तुत कर सकते हैं।
देखें कि ये तरीके कैसे काम करते हैं और इनमें से प्रत्येक कैसे काम करता है।
सर्वर-साइड रेंडरिंग
सर्वर-साइड रेंडरिंग (SSR) के साथ, जब कोई उपयोगकर्ता किसी वेब पेज पर जाता है, तो ब्राउज़र उस पेज के लिए सर्वर को एक अनुरोध भेजता है। यदि आवश्यक हो तो सर्वर डेटाबेस से आवश्यक डेटा प्राप्त करता है, और इसे पृष्ठ की सामग्री के साथ ब्राउज़र में भेजता है। ब्राउज़र तब इसे उपयोगकर्ता को प्रदर्शित करता है।
ब्राउज़र प्रत्येक लिंक के लिए यह अनुरोध करता है जिसे उपयोगकर्ता क्लिक करता है जिसका अर्थ है कि सर्वर हर बार अनुरोध को संसाधित करता है।
यह वेबसाइट के प्रदर्शन को कम कर सकता है। हालांकि, सर्वर-साइड रेंडरिंग गतिशील डेटा का उपभोग करने वाले पृष्ठों के लिए एकदम सही है।
हर बार उपयोगकर्ता द्वारा अनुरोध किए जाने पर पृष्ठ को फिर से बनाने के लिए getServerSideProps का उपयोग करें।
निर्यातगलती करनासमारोहघर({ आंकड़े }) {
वापस करना (
<मुख्य>
// उपयोगआंकड़े
</main>
);
}निर्यातasyncसमारोहgetServerSideProps() {
// बाहरी एपीआई से डेटा प्राप्त करें
कॉन्स्ट रेस = इंतजार प्राप्त करें ('https://.../data')
कॉन्स्ट डेटा = इंतजार रेस.जेसन ()
// पृष्ठ घटक को प्रॉपर के रूप में पास किया जाएगा
वापस करना { रंगमंच की सामग्री: { आंकड़े } }
}
getServerSideProps केवल सर्वर पर चलता है और यह इस तरह चलता है:
- जब कोई उपयोगकर्ता सीधे पृष्ठ तक पहुंचता है, तो यह अनुरोध समय पर चलता है और पृष्ठ वापस आने वाले प्रोप के साथ पूर्व-रेंडर किया जाता है।
- जब कोई उपयोगकर्ता पृष्ठ को अगले लिंक के माध्यम से एक्सेस करता है, तो ब्राउज़र उस सर्वर को एक अनुरोध भेजता है जो इसे चलाता है।
नए संस्करण में, आप किसी पृष्ठ या लेआउट में डायनेमिक डेटा फ़ेच का उपयोग करके सर्वर-साइड रेंडरिंग का विकल्प चुन सकते हैं।
डायनेमिक डेटा फ़ेच फ़ेच () अनुरोध हैं जो विशेष रूप से कैश विकल्प को "नो-स्टोर" पर सेट करके कैशिंग से बाहर निकलते हैं।
लाना('https://...', {कैश: 'कोई दुकान' });
वैकल्पिक रूप से, पुनर्वैधीकरण को 0 पर सेट करें:
लाना('https://...', {अगला: {पुनर्वैधीकरण: 0}});
यह सुविधा अभी बीटा में है इसलिए इसे ध्यान में रखें। आप डायनेमिक डेटा लाने के बारे में अधिक पढ़ सकते हैं Next.js 13 बीटा डॉक्स.
क्लाइंट-साइड रेंडरिंग
आपको क्लाइंट-साइड रेंडरिंग (CSR) का उपयोग तब करना चाहिए जब आपको डेटा को बार-बार अपडेट करने की आवश्यकता हो या जब आप अपने पेज को प्री-रेंडर नहीं करना चाहते हों। आप सीएसआर को पृष्ठ स्तर या घटक स्तर पर लागू कर सकते हैं। पृष्ठ स्तर पर, Next.js रन टाइम पर डेटा प्राप्त करता है और जब घटक स्तर पर किया जाता है, तो यह माउंट पर डेटा प्राप्त करता है। इस वजह से, CSR धीमे प्रदर्शन में योगदान दे सकता है।
उपयोग यूज़ इफेक्ट () हुक इस तरह क्लाइंट पर पेज रेंडर करने के लिए:
आयात {यूज़स्टेट, यूज़ इफेक्ट} से 'प्रतिक्रिया'
समारोहघर() {
कॉन्स्ट [डेटा, सेटडाटा] = यूज़स्टेट (व्यर्थ)
कॉन्स्ट [isLoading, setLoading] = useState(असत्य)उपयोग प्रभाव (() => {
सेट लोड हो रहा है (सत्य)लाना('/api/get-data')
तब ((आरईएस) => रेस.जेसन ())
तब ((डेटा) => {
सेटडाटा (डेटा)
सेट लोड हो रहा है (असत्य)
})
}, [])अगर (लोड हो रहा है) वापसी <पी>लोड हो रहा है...</पी>
अगर (डेटा) वापसी <पी>कोई डेटा नहीं</पी>
वापस करना (
<डिव>
// उपयोगआंकड़े
</div>
)
}
आप SWR हुक का भी उपयोग कर सकते हैं। यह डेटा को कैश करता है और बासी होने की स्थिति में इसे फिर से वैलिडेट करता है।
आयात उपयोगSWR से 'स्वर'
const फ़ेचर = (...args) => लाने (... तर्क)। फिर ((res) => रेस.जेसन ())
समारोहघर() {
कॉन्स्ट {डेटा, त्रुटि} = उपयोगएसडब्ल्यूआर ('/api/डेटा', फ़ेचर)
अगर (त्रुटि) वापसी <डिव>लोड करने में विफल</div>
अगर (डेटा) वापसी <डिव>लोड हो रहा है...</div>
वापस करना (
<डिव>
// उपयोगआंकड़े
</div>
)
}
Next.js 13 में, आपको फ़ाइल के शीर्ष पर "क्लाइंट का उपयोग करें" निर्देश जोड़कर क्लाइंट घटक का उपयोग करने की आवश्यकता है।
"उपयोगग्राहक";
निर्यातगलती करना () => {
वापस करना (
<डिव>
// ग्राहक घटक
</div>
);
};
SSR और CSR के बीच अंतर यह है कि SSR में सर्वर पर प्रत्येक पृष्ठ अनुरोध पर डेटा प्राप्त किया जाता है जबकि CSR में क्लाइंट पक्ष पर डेटा प्राप्त किया जाता है।
स्टेटिक-साइट जनरेशन
स्टैटिक-साइट जनरेशन (एसएसजी) के साथ, पृष्ठ डेटा प्राप्त करता है एक बार बिल्ड-टाइम के दौरान। स्थैतिक जनित पृष्ठ बहुत तेज़ होते हैं और अच्छा प्रदर्शन करते हैं क्योंकि सभी पृष्ठ पहले से निर्मित होते हैं। इसलिए SSG उन पेजों के लिए उपयुक्त है जो बिक्री पेज या ब्लॉग जैसी स्थिर सामग्री का उपयोग करते हैं।
Next.js में, आपको उस पेज में getStaticProps फ़ंक्शन को एक्सपोर्ट करना होगा जिसे आप स्टेटिकली रेंडर करना चाहते हैं।
निर्यातगलती करनासमारोहघर({ आंकड़े }) {
वापस करना (
<मुख्य>
// उपयोगआंकड़े
</main>
);
}निर्यातasyncसमारोहgetStaticProps() {
// निर्माण समय पर बाहरी एपीआई से डेटा प्राप्त करें
कॉन्स्ट रेस = इंतजार प्राप्त करें ('https://.../data')
कॉन्स्ट डेटा = इंतजार रेस.जेसन ()
// पृष्ठ घटक को प्रॉपर के रूप में पास किया जाएगा
वापस करना { रंगमंच की सामग्री: { आंकड़े } }
}
आप getStaticProps के अंदर डेटाबेस को क्वेरी भी कर सकते हैं।
निर्यातasyncसमारोहgetStaticProps() {
// पुकारनासमारोहकोलानाआंकड़ेसेडेटाबेस
कॉन्स्ट डेटा = इंतजार getDataFromDB ()
वापस करना { रंगमंच की सामग्री: { आंकड़े } }
}
Next.js 13 में, स्टैटिक रेंडरिंग डिफ़ॉल्ट है, और जब तक आप कैशिंग विकल्प को बंद पर सेट नहीं करते हैं, तब तक सामग्री प्राप्त और कैश की जाती है।
asyncसमारोहडेटा प्राप्त करें() {
कॉन्स्ट रेस = इंतजार प्राप्त करें ('https://.../data');
वापस करना रेस.जेसन ();
}
निर्यातगलती करनाasyncसमारोहघर() {
कॉन्स्ट डेटा = इंतजार डेटा प्राप्त करें();
वापस करना (
<मुख्य>
// उपयोगआंकड़े
</main>
);
}
बारे में और सीखो Next.js 13 में स्टेटिक रेंडरिंग डॉक्स से।
वृद्धिशील-स्थैतिक पीढ़ी
ऐसे समय होते हैं जब आप एसएसजी का उपयोग करना चाहते हैं लेकिन सामग्री को नियमित रूप से अपडेट करना चाहते हैं। यहीं पर इंक्रीमेंटल स्टैटिक जेनरेशन (ISG) मदद करता है।
आईएसजी आपको आपके द्वारा निर्दिष्ट समय अंतराल के बाद स्थिर पृष्ठ बनाने या अपडेट करने की अनुमति देता है। इस तरह, आपको केवल उन पृष्ठों के लिए पूरी साइट को फिर से बनाने की आवश्यकता नहीं है जिन्हें इसकी आवश्यकता है।
उपयोगकर्ताओं को अद्यतन सामग्री परोसने के अतिरिक्त लाभ के साथ ISG SSG के लाभों को बरकरार रखता है। ISG आपकी साइट पर उन पृष्ठों के लिए एकदम सही है जो बदलते डेटा का उपभोग करते हैं। उदाहरण के लिए, आप कर सकते हैं ब्लॉग पोस्ट रेंडर करने के लिए ISR का उपयोग करें जैसे कि जब आप पोस्ट संपादित करते हैं या नए पोस्ट जोड़ते हैं तो ब्लॉग अपडेट रहता है।
ISR का उपयोग करने के लिए, पृष्ठ पर getStaticProps फ़ंक्शन में पुनर्वैधीकरण प्रोप जोड़ें।
निर्यातasyncसमारोहgetStaticProps() {
कॉन्स्ट रेस = इंतजार प्राप्त करें ('https://.../data')
कॉन्स्ट डेटा = इंतजार रेस.जेसन ()
वापस करना {
सहारा: {
आंकड़े,
},
पुन: सत्यापित करें: 60
}
}
यहां, 60 सेकंड के बाद अनुरोध आने पर नेक्स्ट.जेएस पेज को फिर से बनाने की कोशिश करेगा। अगले अनुरोध के परिणामस्वरूप अद्यतन पृष्ठ के साथ प्रतिक्रिया होगी।
Next.js 13 में, इस तरह फ़ेच में फिर से वैलिडेट का उपयोग करें:
लाना('https://.../data', {अगला: {पुनर्वैधीकरण: 60}});
आप अपने डेटा के साथ सबसे अच्छा काम करने के लिए समय अंतराल सेट कर सकते हैं।
रेंडरिंग विधि कैसे चुनें
अभी तक आपने Next.js — CSR, SSR, SSG, और ISG में चार रेंडरिंग विधियों के बारे में सीखा है। इनमें से प्रत्येक विधि विभिन्न स्थितियों के लिए उपयुक्त है। CSR उन पेजों के लिए उपयोगी है, जिन्हें ताज़ा डेटा की आवश्यकता होती है, जहाँ मजबूत SEO चिंता का विषय नहीं है। एसएसआर गतिशील डेटा का उपभोग करने वाले पृष्ठों के लिए भी बहुत अच्छा है, लेकिन यह अधिक एसईओ-अनुकूल है।
SSG उन पेजों के लिए उपयुक्त है, जिनका डेटा ज्यादातर स्थिर है, जबकि ISG उन पेजों के लिए सबसे अच्छा है, जिन्हें आप अंतराल में अपडेट करना चाहते हैं। एसएसजी और आईएसजी प्रदर्शन और एसईओ के मामले में बहुत अच्छे हैं क्योंकि डेटा पूर्व-प्राप्त है और आप इसे कैश कर सकते हैं।
