जानें कि Next.js, रूट प्रीफ़ेच करने की सुविधा के साथ नेविगेशन की प्रोसेस को कैसे बढ़ाता है और इसे अपनी पसंद के मुताबिक कैसे बनाता है.
आपको क्या सीखने को मिलेगा?
इस पोस्ट में, Next.js में रूटिंग के काम करने के तरीके के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि इसे स्पीड के लिए कैसे ऑप्टिमाइज़ किया गया है और इसे अपनी ज़रूरतों के हिसाब से कैसे बनाया जा सकता है.
<Link> कॉम्पोनेंट
Next.js में, आपको मैन्युअल तरीके से रूटिंग सेट अप नहीं करनी होगी.
Next.js फ़ाइल-सिस्टम-आधारित रूटिंग का इस्तेमाल करता है, जिससे आपको ./pages/ डायरेक्ट्री में सिर्फ़ फ़ाइलें और फ़ोल्डर बनाने की सुविधा मिलती है:
अलग-अलग पेजों को लिंक करने के लिए, <Link> कॉम्पोनेंट का इस्तेमाल ठीक उसी तरह करें जैसे आप पुराने
<a> एलिमेंट को करते हैं:
<Link href="/margherita">
<a>Margherita</a>
</Link>
जब नेविगेशन के लिए <Link> कॉम्पोनेंट का इस्तेमाल किया जाता है, तो Next.js आपकी मदद के लिए बहुत कुछ करता है. आम तौर पर, किसी पेज को तब डाउनलोड किया जाता है, जब किसी लिंक को फ़ॉलो किया जाता है, लेकिन
Next.js उस पेज को रेंडर करने के लिए ज़रूरी JavaScript को अपने-आप प्रीफ़ेच कर देता है.
जब कुछ लिंक वाला कोई पेज लोड किया जाता है, तो हो सकता है कि उस लिंक को फ़ॉलो करने से पहले ही, उसके पीछे के कॉम्पोनेंट को फ़ेच कर लिया गया हो. इससे नए पेजों पर तेज़ी से नेविगेट किया जा सकता है, जिससे ऐप्लिकेशन का रिस्पॉन्स बेहतर होता है.
नीचे दिए गए उदाहरण ऐप्लिकेशन में, index.js पेज <Link> के साथ margherita.js से लिंक किया गया है:
Chrome DevTools का इस्तेमाल करके यह पुष्टि करें कि margherita.js प्रीफ़ेच कर दिया गया है:
1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
नेटवर्क टैब पर क्लिक करें.
कैश मेमोरी बंद करें चेकबॉक्स चुनें.
पेज को फिर से लोड करें.
जब index.js को लोड किया जाता है, तो नेटवर्क टैब दिखाता है कि margherita.js भी डाउनलोड हो गया है:
अपने-आप प्रीफ़ेच होने की सुविधा कैसे काम करती है
Next.js सिर्फ़ उन लिंक को प्रीफ़ेच करता है जो व्यूपोर्ट में दिखते हैं और उनका पता लगाने के लिए Intersection
ऑब्जेक्टर एपीआई का इस्तेमाल करते हैं. अगर इंटरनेट की स्पीड धीमी है या उपयोगकर्ता Save-Data चालू हैं, तो इससे प्रीफ़ेच भी बंद हो जाता है. इन जांच के आधार पर, Next.js <link
rel="preload"> टैग को डाइनैमिक तरीके से इंजेक्ट करता है, ताकि बाद में होने वाले नेविगेशन के लिए कॉम्पोनेंट डाउनलोड किए जा सकें.
Next.js सिर्फ़ JavaScript को फ़ेच करता है, लेकिन यह उसे लागू नहीं करता. इस तरह, यह कोई भी ऐसा अतिरिक्त कॉन्टेंट डाउनलोड नहीं करेगा जिसके लिए प्रीफ़ेच किए गए पेज का अनुरोध किया जा सकता है. ऐसा तब तक होगा, जब तक आप इस लिंक पर नहीं जाते.
बेवजह प्रीफ़ेच करने से बचना
गै़र-ज़रूरी कॉन्टेंट डाउनलोड करने से बचने के लिए, prefetch प्रॉपर्टी को <Link> पर false पर सेट करके, उन पेजों के लिए प्रीफ़ेच करने की सुविधा बंद की जा सकती है जिन पर कभी-कभी विज़िट नहीं किया जाता:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
उदाहरण के तौर पर दिए गए इस दूसरे ऐप्लिकेशन में, index.js पेज पर <Link> के लिए
pineapple-pizza.js मौजूद है, जिसमें prefetch को false पर सेट किया गया है:
नेटवर्क गतिविधि की जांच करने के लिए, पहले उदाहरण में दिया गया तरीका अपनाएं. index.js को लोड करने पर, DevTools नेटवर्क टैब दिखता है कि margherita.js को डाउनलोड किया गया है. हालांकि, pineapple-pizza.js को:
कस्टम रूटिंग की मदद से प्रीफ़ेच करना
<Link> कॉम्पोनेंट, इस्तेमाल के ज़्यादातर उदाहरणों के लिए सही होता है. हालांकि, रूटिंग करने के लिए अपना कॉम्पोनेंट भी बनाया जा सकता है. Next.js, next/router में उपलब्ध राऊटर एपीआई की मदद से यह काम आसान बनाता है.
अगर नए रास्ते पर जाने से पहले आपको कुछ करना है (उदाहरण के लिए, फ़ॉर्म सबमिट करना), तो अपने कस्टम रूटिंग कोड में इसकी जानकारी दी जा सकती है.
रूटिंग के लिए कस्टम कॉम्पोनेंट का इस्तेमाल करते समय, उनमें प्रीफ़ेच भी किया जा सकता है.
अपने रूटिंग कोड में प्रीफ़ेच करने की सुविधा लागू करने के लिए, useRouter में दिए गए prefetch तरीके का इस्तेमाल करें.
उदाहरण के तौर पर दिए गए इस ऐप्लिकेशन में components/MyLink.js को देखें:
प्रीफ़ेच की प्रक्रिया useEffect हुक में की जाती है. अगर <MyLink> पर मौजूद prefetch प्रॉपर्टी को true पर सेट किया गया है, तो <MyLink> के रेंडर होने पर href प्रॉपर्टी में बताया गया रास्ता प्रीफ़ेच हो जाएगा:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
लिंक पर क्लिक करने के बाद, handleClick में रूटिंग पूरी हो जाती है. कंसोल में, मैसेज लॉग किया जाता है और push वाला तरीका, href में बताए गए नए रास्ते पर ले जाता है:
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
उदाहरण के तौर पर दिए गए इस ऐप्लिकेशन में, index.js पेज पर <MyLink> से margherita.js और
pineapple-pizza.js के बीच की वैल्यू दी गई है. prefetch प्रॉपर्टी को /margherita को true पर और /pineapple-pizza को false पर सेट किया गया है.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
जब index.js को लोड किया जाता है, तो नेटवर्क टैब दिखाता है कि margherita.js
डाउनलोड हो गया है और pineapple-pizza.js:
किसी भी लिंक पर क्लिक करने पर, Console "Next.js का आनंद ले रहा है" लॉग करता है और नए रास्ते पर नेविगेट करता है:
नतीजा
<Link> का इस्तेमाल करने पर, Next.js लिंक किए गए पेज को रेंडर करने के लिए ज़रूरी JavaScript को अपने-आप प्रीफ़ेच कर देता है. इससे, नए पेजों पर तेज़ी से नेविगेट किया जा सकता है. अगर कस्टम रूटिंग का इस्तेमाल किया जा रहा है, तो खुद को प्रीफ़ेच करने के लिए Next.js राऊटर एपीआई का इस्तेमाल करें. जिन पेजों पर कभी-कभी विज़िट किया जाता है उन पर प्रीफ़ेच करने की सुविधा बंद करके, कॉन्टेंट को बेवजह डाउनलोड करने से बचें.