Next.js तुम्हाला 'out of the box' काय देते

  • Data cache – Next.js 13+ मध्ये प्रत्येक fetch() कॉल एका प्रति-रिक्वेस्ट (per-request) मेमरी कॅशेमध्ये साठवला जातो. revalidate पर्याय जोडल्यामुळे रनटाइमला ठराविक अंतराने डेटा रिफ्रेश करण्यास सांगितले जाते, ज्यामुळे गरज असेल तेव्हाच 'hot API call' चे रूपांतर 'cold' मध्ये होते.
  • Full-route cache – हे फ्रेमवर्क रेंडर केलेले HTML आणि संपूर्ण राउटसाठी आवश्यक असलेला डेटा कायमस्वरूपी (persist) ठेवते. पुन्हा भेट देणाऱ्या वापरकर्त्यांना त्वरित ट्रान्झिशन दिसते कारण सर्व्हर पुन्हा रेंडरिंग करणे टाळतो.
  • ISR – जुनी आवृत्ती ट्रॅफिक हाताळत असताना पार्श्वभूमीमध्ये (background) स्टॅटिक पेजेस पुन्हा तयार (regenerate) होतात. यामुळे प्रत्येक वेळी कंटेंट बदलल्यावर पूर्ण रिबिल्ड न करता तुम्ही मोठी साइट स्टॅटिक ठेवू शकता.
  • Server Component cache() – React चा cache हेल्पर एका सिंगल रिक्वेस्टच्या कालावधीसाठी महागड्या (expensive) कॅल्क्युलेशन्स किंवा डेटाबेस कनेक्शन्सचे मेमोइझेशन (memoize) करतो, ज्यामुळे पेजच्या कंपोनंट ट्रीमध्ये वारंवार होणारी कामे टाळता येतात.

हे कॅशे "first-hit" समस्या सोडवतात, परंतु ते अजूनही Node प्रोसेसच्या आतच असतात. सर्व्हर आणि डेटाबेस सुरक्षित ठेवण्यासाठी, कॅशिंग बाहेरील थरांकडे (outward) ढकलणे आवश्यक आहे.

तुम्ही जोडू शकता असे बाह्य स्तर (External layers)

स्तर काय साठवते सामान्य साधने कशा प्रकारे मदत करते
CDN स्टॅटिक असेट्स, HTML, API JSON Cloudflare, Akamai, AWS CloudFront कंटेंट एज लोकेशन्सवर हलवते, ज्यामुळे युजरपर्यंतचा राऊंड-ट्रिप वेळ कमी होतो
Reverse proxy Node पर्यंत पोहोचण्यापूर्वी संपूर्ण पेज रिस्पॉन्स Nginx, Varnish थेट कॅश्ड पेजेस सर्व्ह करते, ज्यामुळे Next.js इन्स्टन्सवरील लोड कमी होतो
Application-level cache महागड्या DB क्वेरीज किंवा API कॉल्सचे रिझल्ट्स Redis, Memcached एक वेगवान की-व्हॅल्यू स्टोअर प्रदान करते जे सर्व्हर रीस्टार्ट झाल्यावरही टिकते आणि अनेक ॲप इन्स्टन्सेसमध्ये शेअर केले जाऊ शकते

प्रत्येक स्तर मूळ (origin) डेटाबेसपासून अधिक दूर असतो, त्यामुळे एका स्तरावर कॅशे न मिळाल्यास (miss) तो पुढच्या स्तराकडे जातो, आणि शेवटी जेव्हा अत्यंत आवश्यक असेल तेव्हाच तो डेटाबेसपर्यंत पोहोचतो.

कॅशे ताजे (fresh) ठेवणे

'Invalidation' मुळे बहुतेक टीम्स गोंधळतात. तीन व्यावहारिक पद्धती चांगल्या प्रकारे काम करतात:

  • Time-based (TTL) – कॅशे एंट्रीला एक निश्चित कालबाह्यता (expiration) वेळ द्या. कॉन्फिगर करण्यास सोपे आहे परंतु टाइमर संपण्यापर्यंत ते जुना (outdated) डेटा देऊ शकते.
  • Event-driven – तुमच्या CMS किंवा कोणत्याही डेटा सोर्सला जोडा जो कंटेंट बदलल्यावर वेबहुक (webhook) पाठवतो. वेबहुक संबंधित कॅशे एंट्री काढून टाकण्यासाठी (purge) ट्रिगर करतो.
  • Tag-based – फेचेसच्या (fetches) समूहाला एक लॉजिकल टॅग जोडा (उदा. product-list). जेव्हा त्या समूहातील कोणताही घटक बदलतो, तेव्हा revalidateTag('product-list') च्या एका सिंगल कॉलमुळे तो टॅग असलेले सर्व एन्ट्रीज क्लिअर होतात.

या पद्धतींचे मिश्रण केल्यामुळे तुम्ही डेटाची ताजेपणा (freshness) आणि कॅशे-हिट रेट (cache-hit rates) यांच्यात संतुलन राखू शकता.

बहुतेक टीम्ससाठी उपयुक्त असलेली श्रेणी (Hierarchy)

  1. Browser cache – स्टॅटिक असेट्स (CSS, JS, images) ला मोठा max-age दिला जातो जेणेकरून युजरचे डिव्हाइस नेटवर्कला पुन्हा विचारणार नाही.
  2. CDN – एज नोड्स पूर्ण 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) क्वेरी केले जाते.

जेव्हा एखादी रिक्वेस्ट येते, तेव्हा ती या सूचीमध्ये खालील स्तरांकडे जाते जोपर्यंत एखादा स्तर त्याला उत्तर देत नाही. जो सर्वात वेगवान प्रतिसाद देतो तो जिंकतो, आणि तो प्रतिसाद भविष्यातील हिट्ससाठी साखळीमध्ये (chain) वरच्या स्तरावर लिहिला जातो.

सर्व घटक एकत्र आणणे

  1. तुमच्या API राउट्समध्ये Cache-Control हेडर्स सेट करा
  2. तुमचा CDN कॉन्फिगर करा – HTML आणि JSON एंडपॉइंट्ससाठी एज कॅशिंग सक्षम करा आणि CDN ने Cache-Control चे पालन केले जाईल याची खात्री करा.
  3. रिअ‍र्स प्रॉक्सी तैनात (deploy) करा – तुमच्या Next.js सर्व्हरच्या समोर Nginx ठेवा.
  4. Redis जोडा – महागड्या डेटाबेस क्वेरीजचे रिझल्ट्स कॅशे करा.
  5. तुमच्या कंपोनंट्समध्ये revalidateTag वापरा – विशिष्ट टॅगसाठी Next.js अंतर्गत कॅशे क्लिअर करण्यासाठी revalidateTag कॉल करा.

मुख्य निष्कर्ष (Takeaway)

Next.js मधील एक सिंगल कॅशे पहिल्या रिक्वेस्टचा वेग वाढवते, परंतु खरी स्केलेबिलिटी (scalability) एका शिस्तबद्ध स्टॅकमुळे येते: browser → CDN → reverse proxy → framework → Redis → database. प्रत्येक स्तर कॉन्फिगर करा, वेळ, इव्हेंट्स आणि टॅग्ससह इनव्हॅलिडेशन (invalidation) हाताळा आणि तुमचे मेट्रिक्स तपासा. यामुळे बॅकएंड ट्रॅफिक स्पाइक्स (traffic spikes) सहन करू शकेल आणि लेटन्सी (latency) कमी राहील.