Next.js आपको डिफ़ॉल्ट रूप से क्या देता है

  • Data cache – Next.js 13+ में हर fetch() कॉल एक प्रति-अनुरोध (per-request) मेमोरी कैश में जाती है। revalidate विकल्प जोड़ने से रनटाइम को एक निश्चित अंतराल के बाद डेटा रिफ्रेश करने का निर्देश मिलता है, जिससे एक 'hot API call' केवल आवश्यकता पड़ने पर ही 'cold' में बदलती है।
  • Full-route cache – यह फ्रेमवर्क रेंडर किए गए HTML और पूरे रूट के लिए आवश्यक डेटा को सुरक्षित रखता है। वापस आने वाले विज़िटर्स को इंस्टेंट ट्रांज़िशन (instant transition) दिखता है क्योंकि सर्वर री-रेंडरिंग को छोड़ देता है।
  • ISR – पुराना वर्शन ट्रैफिक सर्व करता रहता है जबकि बैकग्राउंड में स्टैटिक पेज फिर से जेनरेट होते हैं। इससे आप हर बार कंटेंट बदलने पर फुल रीबिल्ड किए बिना एक बड़ी साइट को स्टैटिक रख सकते हैं।
  • Server Component cache() – React का cache हेल्पर एक सिंगल रिक्वेस्ट की अवधि के लिए महंगे कैलकुलेशन या डेटाबेस कनेक्शन को मेमोइज़ (memoize) करता है, जिससे पेज के कंपोनेंट ट्री के अंदर डुप्लिकेट काम से बचा जा सकता है।

ये कैश "first-hit" समस्या को हल करते हैं लेकिन अभी भी Node प्रोसेस के अंदर ही रहते हैं। सर्वर और डेटाबेस को सुरक्षित रखने के लिए, कैशिंग को बाहर की ओर (outward) ले जाएं।

बाहरी लेयर्स जिन्हें आप जोड़ सकते हैं

लेयर यह क्या स्टोर करता है सामान्य टूल यह कैसे मदद करता है
CDN स्टैटिक एसेट्स, HTML, API JSON Cloudflare, Akamai, AWS CloudFront कंटेंट को एज लोकेशन्स (edge locations) पर ले जाता है, जिससे यूजर तक पहुँचने का राउंड-ट्रिप समय कम हो जाता है
Reverse proxy Node तक पहुँचने से पहले पूरे पेज के रिस्पॉन्स Nginx, Varnish सीधे कैश किए गए पेज सर्व करता है, जिससे Next.js इंस्टेंस पर लोड कम होता है
Application-level cache महंगी DB क्वेरीज़ या API कॉल के परिणाम Redis, Memcached एक तेज़ की-वैल्यू स्टोर (key-value store) प्रदान करता है जो सर्वर रीस्टार्ट होने पर भी बना रहता है और जिसे कई ऐप इंस्टेंस के बीच साझा किया जा सकता है

प्रत्येक लेयर ओरिजिन डेटाबेस से और दूर स्थित होती है, इसलिए एक लेवल पर 'miss' होने पर वह अगले लेवल तक पहुँचता है, और अंततः डेटाबेस तक केवल तभी पहुँचता है जब अत्यंत आवश्यक हो।

कैश को फ्रेश रखना

इन्वैलिडेशन (Invalidation) अधिकांश टीमों को उलझा देता है। तीन व्यावहारिक पैटर्न अच्छी तरह काम करते हैं:

  • Time-based (TTL) – कैश एंट्री को एक निश्चित एक्सपायरी (expiration) दें। कॉन्फ़िगर करने में सरल है लेकिन टाइमर समाप्त होने तक यह पुराना डेटा सर्व कर सकता है।
  • Event-driven – अपने CMS या किसी भी डेटा सोर्स से जुड़ें जो कंटेंट बदलने पर वेबहुक (webhook) भेजता है। वेबहुक संबंधित कैश एंट्री को पज (purge) करने को ट्रिगर करता है।
  • Tag-based – फेच (fetches) के एक समूह से एक लॉजिकल टैग जोड़ें (जैसे, product-list)। जब उस समूह की कोई भी आइटम बदलती है, तो revalidateTag('product-list') का एक सिंगल कॉल उस टैग को साझा करने वाली हर एंट्री को क्लियर कर देता है।

इन दृष्टिकोणों को मिलाने से आप फ्रेशनेस और कैश-हिट रेट के बीच संतुलन बना सकते हैं।

वह पदानुक्रम (hierarchy) जो अधिकांश टीमों के लिए काम करता है

  1. Browser cache – स्टैटिक एसेट्स (CSS, JS, images) को एक लंबा max-age मिलता है ताकि यूजर का डिवाइस दोबारा नेटवर्क से न पूछे।
  2. CDN – एज नोड्स (Edge nodes) पूरे HTML पेज और API JSON को कैश करते हैं, और आपके द्वारा Next.js में सेट किए गए Cache-Control हेडर्स का सम्मान करते हैं।
  3. Reverse proxy – एक Nginx या Varnish इंस्टेंस Next.js सर्वर के सामने रहता है, जो उन रूट्स के लिए कैश किए गए रिस्पॉन्स सर्व करता है जो शायद ही कभी बदलते हैं।
  4. Next.js internal cache – फ्रेमवर्क के डेटा और रूट कैश प्रति-अनुरोध मेमोइज़ेशन और ISR को संभालते हैं।
  5. Application cache – Redis भारी डेटाबेस क्वेरीज़ के परिणामों को स्टोर करता है, जिसे क्वेरी पैरामीटर्स या टैग्स के आधार पर की (key) किया जाता है।
  6. Database – सत्य का अंतिम स्रोत (ultimate source of truth), जिसे केवल तभी क्वेरी किया जाता है जब हर उच्च स्तर पर कैश मिस (cache miss) हो।

जब कोई रिक्वेस्ट आती है, तो वह इस लिस्ट में नीचे की ओर बढ़ती है जब तक कि कोई लेयर उसका उत्तर न दे दे। सबसे तेज़ उत्तर जीतता है, और रिस्पॉन्स भविष्य के हिट्स के लिए वापस पूरी चेन में लिख दिया जाता है।

सब कुछ एक साथ जोड़ना

  1. अपने API रूट्स में Cache-Control हेडर्स सेट करें
  2. अपना CDN कॉन्फ़िगर करें – HTML और JSON एंडपॉइंट्स के लिए एज कैशिंग सक्षम करें, और सुनिश्चित करें कि CDN Cache-Control का सम्मान करता है।
  3. एक रिवर्स प्रॉक्सी तैनात करें – अपने Next.js सर्वर के आगे Nginx लगाएं।
  4. Redis जोड़ें – महंगी डेटाबेस क्वेरीज़ के परिणामों को कैश करें।
  5. अपने कंपोनेंट्स में revalidateTag का उपयोग करें – किसी विशिष्ट टैग के लिए Next.js इंटरनल कैश को क्लियर करने के लिए revalidateTag को कॉल करें।

निष्कर्ष

Next.js के अंदर एक सिंगल कैश पहली रिक्वेस्ट को तेज़ कर देता है, लेकिन वास्तविक स्केलेबिलिटी एक अनुशासित स्टैक से आती है: browser → CDN → reverse proxy → framework → Redis → database। प्रत्येक लेयर को कॉन्फ़िगर करें, समय, इवेंट और टैग के साथ इन्वैलिडेशन को संभालें, और अपने मेट्रिक्स पर नज़र रखें। इससे लेटेंसी (latency) कम बनी रहती है जबकि आपका बैकएंड ट्रैफिक स्पाइक्स को झेल लेता है।