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> के ज़रिए लिंक होता है:

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

1. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.

2. नेटवर्क टैब पर क्लिक करें.

3. कैश मेमोरी की सुविधा बंद करें चेकबॉक्स को चुनें.

4. पेज को फिर से लोड करें.

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

अपने-आप कॉन्टेंट लोड होने की सुविधा कैसे काम करती है

Next.js सिर्फ़ उन लिंक को प्रीफ़ेच करता है जो व्यूपोर्ट में दिखते हैं. साथ ही, उन्हें पहचानने के लिए इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करता है. इंटरनेट कनेक्शन धीमा होने या उपयोगकर्ताओं ने 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 router API का इस्तेमाल किया जा सकता है. कभी-कभी देखे जाने वाले पेजों के लिए, कॉन्टेंट को पहले से लोड होने की सुविधा बंद करके, कॉन्टेंट को ज़रूरत से ज़्यादा डाउनलोड होने से रोकें.