Next.js में कैशिंग केवल समय बचाने के बारे में नहीं है - यह अनावश्यक नेटवर्क अनुरोधों को कम करने, डेटा को ताज़ा रखने और आपके ऐप को रॉकस्टार की तरह प्रदर्शन करने के बारे में है।
चाहे आप डेटा को अधिक समय तक कैश्ड रखने का प्रयास कर रहे हों या इसे ऑन-डिमांड रीफ्रेश करने का प्रयास कर रहे हों, Next.js आपको वे सभी उपकरण प्रदान करता है जिनकी आपको आवश्यकता है। इस लेख में, हम Next.js में कैशिंग का प्रभावी ढंग से उपयोग करने का तरीका बताएंगे

Next.js जब कैशिंग की बात आती है तो आपको सुपरपावर देने के लिए फ़ेच एपीआई का विस्तार करता है। cache: 'no-store' और cache: 'force-cache' जैसे सरल फ़ेच विकल्पों के साथ, आप आसानी से नियंत्रित कर सकते हैं कि डेटा कब और कैसे कैश किया जाए।

कैश के साथ हमेशा ताज़ा: 'नो-स्टोर' (अस्थिर_नोस्टोर() के बराबर)

हर बार ताज़ा डेटा चाहते हैं? कैश: 'नो-स्टोर' वह है जिसके साथ जाना चाहिए। यह फ़ेच विकल्प कैश को पूरी तरह से छोड़ देता है और हर अनुरोध के साथ नवीनतम डेटा पकड़ लेता है। जब आपको वास्तविक समय की सटीकता की आवश्यकता हो तो यह एकदम सही है—कल के लाए गए बचे हुए खाने की अनुमति नहीं है।

नोट: यदि आप सर्वर घटक पर कैश को छोड़ना चाहते हैं तो आप unstable_noStore() का भी उपयोग कर सकते हैं। सिंटैक्स बाद में बदल सकता है, इसलिए स्थिरता के लिए cache: 'no-store' पर बने रहें।

कैश के साथ डेटा का पुन: उपयोग करें: 'बल-कैश' (अस्थिर_कैश() के बराबर)

दूसरी ओर, यदि आप कैश्ड डेटा का उपयोग करने से सहमत हैं (स्थैतिक सामग्री के बारे में सोचें जो अक्सर नहीं बदलती है), तो cache: 'force-cache' का उपयोग करें। यह भविष्य में उपयोग के लिए प्रतिक्रिया को सहेज लेगा और अनावश्यक नेटवर्क अनुरोधों को छोड़ देगा।

नोट: unstable_cache() भी डेटा को कैश करता है, लेकिन स्थिर cache: 'force-cache' का उपयोग करना अधिक विश्वसनीय है यदि आप भविष्य में आश्चर्य से बच रहे हैं।

पुनर्वैधीकरण के साथ इसे ताज़ा रखें

कभी-कभी कैश्ड डेटा को ताज़ा करने की आवश्यकता होती है - चाहे वह एक निश्चित समय के बाद हो या जब किसी घटना से ट्रिगर हो। आपके लिए सौभाग्य की बात है कि Next.js आपको अपने कैश्ड डेटा को कई तरीकों से पुनः सत्यापित करने की सुविधा देता है।

समय के साथ पुन:वैधीकरण करें: अगला.पुनःवैधीकरण करें

यदि आपके डेटा को समय-समय पर ताज़ा करने की आवश्यकता है (जैसे हर घंटे या दिन), तो आप अपने फ़ेच अनुरोध में next.revalidate विकल्प का उपयोग करके पुनर्वैधीकरण अवधि निर्धारित कर सकते हैं। यह आपके द्वारा निर्दिष्ट समय के बाद नवीनतम डेटा प्राप्त करेगा जबकि बाकी समय चीज़ों को कैश्ड रखेगा।

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

टैग के साथ ऑन-डिमांड पुनर्वैधीकरण: revalidateTag()

अब, कल्पना कीजिए कि जब कुछ महत्वपूर्ण होता है - जैसे फॉर्म सबमिशन या नए ब्लॉग पोस्ट का लाइव होना, तो आप नेक्स्ट.जेएस को कैश्ड डेटा के विशिष्ट बिट्स को रीफ्रेश करने के लिए कह सकते हैं। आप अपने कैश्ड डेटा में टैग निर्दिष्ट कर सकते हैं, और फिर जब भी आवश्यकता हो उन टैग को पुनः मान्य कर सकते हैं।

इस तरह, आप अगले निर्धारित पुनर्वैधीकरण की प्रतीक्षा किए बिना मांग पर अपने कैश के कुछ हिस्सों को मैन्युअल रूप से रीफ्रेश कर सकते हैं।

अस्थिर तरीकों का उपयोग करना

यदि आप साहसी प्रकार के हैं, तो आप कैशिंग व्यवहार को प्रबंधित करने के लिए सीधे सर्वर घटकों पर unstable_noStore() और unstable_cache() तरीकों का भी उपयोग कर सकते हैं। बस ध्यान रखें, कि ये किसी कारण से "अस्थिर" हैं, इसलिए ये भविष्य में बदल सकते हैं (या जब आप इसे पढ़ रहे हैं तब बदल गए होंगे)।

या यदि आप कैशिंग में रुचि रखते हैं, तो यहां बताया गया है कि आप अस्थिर_कैश() का उपयोग कैसे कर सकते हैं:

प्रोप ड्रिलिंग छोड़ें

यहां एक साफ चाल है: यदि आप एक ही डेटा को कई घटकों (जैसे लेआउट, पेज और कुछ आंतरिक घटकों) में ला रहे हैं, तो इसे एक बार शीर्ष पर लाने और इसे नीचे भेजने या करने के बारे में चिंता न करें। उस डेटा के लिए कई घटकों पर कई बार अनुरोध करें जो प्रदर्शन को धीमा कर देता है। Next.js सर्वर रेंडरिंग के दौरान स्वचालित रूप से फ़ेच अनुरोधों को याद रखता है, जिसका अर्थ है कि यदि आप एक ही डेटा को कई बार लाते हैं, तो यह केवल एक बार नेटवर्क पर हिट करने और परिणाम को कई घटकों में साझा करने के लिए पर्याप्त स्मार्ट है।

इसे लपेट रहा है

Next.js आपको कैशिंग को प्रभावी ढंग से प्रबंधित करने के लिए आवश्यक सभी उपकरण देता है, चाहे वह फ़ेच एपीआई विकल्प जैसे cache: 'no-store' और cache: 'force-cache', या अधिक प्रयोगात्मक अस्थिर_नोस्टोर() और अस्थिर_कैश() विधियाँ। next.revalidate और revalidateTag जैसी पुनर्वैधीकरण रणनीतियों को जोड़ें, और आपको बिना किसी परेशानी के अपने डेटा को ताज़ा रखने के लिए आवश्यक सब कुछ मिल जाएगा।

स्रोत:
Next.js कैशिंग