NextJS में नेविगेशन का परिचय

इस ट्यूटोरियल अनुभाग में हम NextJS में लिंक के काम के बारे में बात करेंगे।

शुरुआत में आइए चर्चा करें कि लिंक में इतना खास क्या है। आइए उन्हें वेबसाइट बनाने की विभिन्न शैलियों में देखें।

React पर बनी वेबसाइट

मान लीजिए कि आपके पास React पर बनी एक वेबसाइट है। जैसा कि ज्ञात है, React एक SPA का प्रतिनिधित्व करता है - ऐसी वेबसाइट जिसमें उपयोगकर्ता हमेशा एक ही पेज पर रहता है। आप React Router को जोड़ सकते हैं और उपयोगकर्ता को लगेगा कि वह अलग-अलग पेजों पर जा रहा है, भले ही वह भौतिक रूप से एक ही फाइल पर रहता हो।

इस दौरान उपयोगकर्ता लिंक पर क्लिक करेगा, उसे लगेगा कि वह किसी दूसरे पेज पर पहुंच गया है, लेकिन ब्राउज़र में वेबसाइट का पेज पुनः लोड नहीं होगा - React गतिशील रूप से वह सब कुछ बनाएगा, जो उपयोगकर्ता स्क्रीन पर देखता है।

इस योजना में, उपयोगकर्ता को पेज पर पहली बार आने पर वेबसाइट का लेआउट मिलता है, और फिर वेबसाइट के हिस्से JavaScript के माध्यम से बदलते रहते हैं। इस दौरान वेबसाइट सर्वर से AJAX के माध्यम से डेटा मांग सकती है।

यह दृष्टिकोण होस्टिंग पर लोड कम करता है (जिसके संसाधन हमारे पैसे खर्च करते हैं), और साथ ही यूजर के इंटरनेट चैनल पर लोड भी कम करता है।

लेकिन इस दृष्टिकोण में एक कमी है - SEO की समस्या। ऐसा लगता है कि वेबसाइट में लिंक का एक सेट है, और एड्रेस बार में कुछ बदलता है, और मैसेजर के माध्यम से वेबसाइट के किसी विशेष पेज की लिंक भी भेजी जा सकती है। हालांकि, पेज की सामग्री क्लाइंट पर गतिशील रूप से बनती है और सर्च इंजन इसे प्रोसेस करने में सक्षम नहीं हैं। इसलिए ऐसी वेबसाइट प्रमोट नहीं होगी।

हालांकि, सभी वेबसाइटें सर्च इंजन में प्रमोट होने के लिए नहीं बनी होती हैं। और यदि आपकी वेबसाइट ऐसी नहीं है, तो यह योजना आपके लिए पूरी तरह से काम करने योग्य है।

बैकएंड पर बनी वेबसाइट

मान लीजिए कि आपकी वेबसाइट बैकएंड की किसी एक भाषा पर बनी है। उदाहरण के लिए, PHP पर।

इस मामले में, जब उपयोगकर्ता लिंक पर क्लिक करेगा, तो वेबसाइट का पेज हर बार पूरी तरह से लोड होगा।

समस्या यह है कि पेज का एक महत्वपूर्ण हिस्सा यूजर के पास पहले से ही मौजूद है। क्योंकि, जैसा कि आप पहले से ही जानते हैं, पेज पर आमतौर पर केवल कंटेंट और मेटाडेटा बदलता है, और बाकी सब कुछ अपरिवर्तित रहता है।

अगर केवल कंटेंट बदला है तो हमें बाकी सब क्यों डाउनलोड करना चाहिए? इससे सर्वर और इंटरनेट चैनल पर अत्यधिक लोड पैदा होता है।

एक और समस्या है। मान लीजिए कि जो पेज हमें मिलता है, उसके कंटेंट में उत्पादों की एक सूची है, जैसे ऑनलाइन स्टोर में। जाहिर है, प्रत्येक उत्पाद का लेआउट एक जैसा होता है। अधिक इष्टतम यह होता कि केवल उत्पादों का डेटा, और उत्पाद दिखाने का टेम्पलेट डाउनलोड किया जाता। और फिर क्लाइंट पर प्रत्येक उत्पाद को इस टेम्पलेट में दिखाया जाता। लेकिन हम उत्पादों को उत्पाद के दोहराए जाने वाले लेआउट के साथ डाउनलोड करते हैं।

सारांश में, यदि हमारी वेबसाइट शुद्ध बैकएंड पर है, तो हम नेटवर्क पर बहुत सारा अतिरिक्त डेटा भेज रहे हैं।

हालांकि, इस मामले में हमें SEO की कोई समस्या नहीं है। अनुरोध किए गए URL पर हमेशा स्टेटिक सामग्री मिलती है, जिसे सर्च इंजन आसानी से समझते हैं।

NextJS पर बनी वेबसाइट

NextJS दोनों दृष्टिकोणों को जोड़ती है। जब उपयोगकर्ता सीधे एड्रेस बार में URL टाइप करता है, तो उसे जवाब में पेज की स्टेटिक सामग्री मिलती है।

लेकिन जब उपयोगकर्ता हमारी वेबसाइट पर लिंक पर क्लिक करना शुरू करता है, तो वेबसाइट का पेज पूरी तरह से रीफ्रेश नहीं होता, बल्कि AJAX के माध्यम से यूजर के लिए आवश्यक डेटा लोड होता है।

जब सर्च इंजन हमारी वेबसाइट पर जाता है, तो उसे अपनी आवश्यक स्टेटिक सामग्री दिखाई देती है। और जब यूजर हमारी वेबसाइट पर जाता है, तो हमारी वेबसाइट SPA की तरह व्यवहार करना शुरू कर देती है।

और, सबसे महत्वपूर्ण बात, NextJS यह सब स्वचालित रूप से करती है! हमें इसकी चिंता करने की जरूरत नहीं है - वह खुद ही सब कुछ कर देगी। बहुत खूब!

अगले पाठों में हम यह समझेंगे कि NextJS को वर्णित तरीके से काम कैसे करवाया जाए।