Next.js में रूट प्रीफ़ेच करना

Next.js, रूट प्रीफ़ेचिंग की मदद से नेविगेशन की स्पीड कैसे बढ़ाता है और इसे पसंद के मुताबिक कैसे बनाया जा सकता है.

Milica Mihajlija

इस पोस्ट में, आपको 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 पेज, margherita.js से <Link> की मदद से लिंक होता है:

Chrome DevTools का इस्तेमाल करके पुष्टि करें कि margherita.js को प्रीफ़ेच किया गया है: 1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

1. Chrome DevTools खोलें.
2. नेटवर्क टैब पर क्लिक करें.
3. कैश मेमोरी की सुविधा बंद करें चेकबॉक्स को चुनें.
4. पेज को फिर से लोड करें.

index.js लोड करने पर, नेटवर्क टैब दिखाता है कि margherita.js भी डाउनलोड किया गया है:

अपने-आप प्रीफ़ेच होने की सुविधा कैसे काम करती है

Next.js सिर्फ़ उन लिंक को प्रीफ़ेच करता है जो व्यूपोर्ट में दिखते हैं. साथ ही, उन्हें ढूंढने के लिए IntersectionObserver API का इस्तेमाल करता है. नेटवर्क कनेक्शन धीमा होने या उपयोगकर्ताओं के Save-Data चालू करने पर, यह सुविधा प्रीफ़ेचिंग को भी बंद कर देती है. इन जांचों के आधार पर, Next.js डाइनैमिक तरीके से <link rel="preload"> टैग इंजेक्ट करता है, ताकि बाद में नेविगेशन के लिए कॉम्पोनेंट डाउनलोड किए जा सकें.

Next.js सिर्फ़ JavaScript को फ़ेच करता है. यह उसे लागू नहीं करता. इस तरह, यह कोई ऐसा कॉन्टेंट डाउनलोड नहीं करता है जिसके लिए पहले से फ़ेच किए गए पेज को अनुरोध करना पड़ सकता है. ऐसा तब तक होता है, जब तक कि आप लिंक पर नहीं जाते.

ज़रूरत से ज़्यादा प्रीफ़ेचिंग से बचें

ज़रूरत से ज़्यादा कॉन्टेंट डाउनलोड होने से रोकने के लिए, उन पेजों के लिए प्रीफ़ेचिंग की सुविधा बंद की जा सकती है जिन्हें कम ही विज़िट किया जाता है. इसके लिए, <Link> पर prefetch प्रॉपर्टी को false पर सेट करें:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

इस दूसरे उदाहरण वाले ऐप्लिकेशन में, index.js पेज पर <Link> है. इसमें pineapple-pizza.js को false पर सेट किया गया है:prefetch

नेटवर्क गतिविधि की जांच करने के लिए, पहले उदाहरण में दिया गया तरीका अपनाएं. index.js लोड करने पर, DevTools के नेटवर्क टैब में दिखता है कि margherita.js डाउनलोड हो गया है, लेकिन pineapple-pizza.js डाउनलोड नहीं हुआ है:

कस्टम रूटिंग के साथ प्रीफ़ेच करना

<Link> कॉम्पोनेंट का इस्तेमाल ज़्यादातर मामलों में किया जा सकता है. हालांकि, राउटिंग के लिए अपना कॉम्पोनेंट भी बनाया जा सकता है. Next.js, next/router में उपलब्ध router API की मदद से, आपके लिए इस काम को आसान बना देता है. अगर आपको किसी नए रूट पर जाने से पहले कोई कार्रवाई करनी है (उदाहरण के लिए, कोई फ़ॉर्म सबमिट करना है), तो उसे कस्टम राउटिंग कोड में तय किया जा सकता है.

राउटिंग के लिए कस्टम कॉम्पोनेंट का इस्तेमाल करते समय, उनमें प्रीफ़ेचिंग भी जोड़ी जा सकती है. अपने राउटिंग कोड में प्रीफ़ेचिंग लागू करने के लिए, prefetch से useRouter तरीके का इस्तेमाल करें.

इस उदाहरण ऐप्लिकेशन में 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 में "Having fun with Next.js." लॉग होता है. इसके बाद, यह नए रूट पर चला जाता है:

नतीजा

<Link> का इस्तेमाल करने पर, Next.js लिंक किए गए पेज को रेंडर करने के लिए ज़रूरी JavaScript को अपने-आप प्रीफ़ेच कर लेता है. इससे नए पेजों पर तेज़ी से नेविगेट किया जा सकता है. अगर कस्टम राउटिंग का इस्तेमाल किया जा रहा है, तो Next.js राउटर एपीआई का इस्तेमाल करके, प्रीफ़ेचिंग को खुद लागू किया जा सकता है. कम ही विज़िट किए जाने वाले पेजों के लिए, प्रीफ़ेचिंग की सुविधा बंद करके, बिना वजह कॉन्टेंट डाउनलोड करने से बचें.