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. 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 को फ़ेच करता है; यह इस पर काम नहीं करता है. इस तरह, यह दो तरह से प्रीफ़ेच किया गया पेज तब तक के लिए कोई और कॉन्टेंट डाउनलोड कर सकता है, जब तक आप उस पर नहीं जाते लिंक.

बेवजह प्रीफ़ेच करने से बचें

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

जब रूटिंग के लिए कस्टम कॉम्पोनेंट का इस्तेमाल किया जाता है, तो उनमें प्रीफ़ेच भी जोड़ा जा सकता है. अपने रूटिंग कोड में प्रीफ़ेचिंग लागू करने के लिए, इसके 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. /margherita के लिए, prefetch प्रॉपर्टी को 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 राऊटर एपीआई का इस्तेमाल किया जा सकता है खुद को प्रीफ़ेच करना. इसे बंद करके, बिना ज़रूरत के कॉन्टेंट डाउनलोड करने से बचें बहुत कम विज़िट किए गए पेजों के लिए प्रीफ़ेच करना.