React Academy · पाठ

Next.js में कैश विकल्पों के साथ fetch()

कैशिंग व्यवहार नियंत्रित करने के लिए fetch पर force-cache, no-store और revalidate विकल्पों का उपयोग करें।

पाठ 1, कुल 4 में से13 चरण

Next.js में कैश विकल्पों के साथ fetch(), CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Next.js में विस्तारित डेटा-प्राप्ति

Next.js नेटिव fetch() एपीआई को कैशिंग और पुनर्वैधीकरण नियंत्रित करने वाले next विकल्प से विस्तारित करता है। यह केवल सर्वर कंपोनेंट्स और रूट हैंडलर में काम करता है।

कैश-बल (डिफ़ॉल्ट)

डिफ़ॉल्ट रूप से Next.js में fetch() force-cache का उपयोग करता है—यह प्रतिक्रिया को अनिश्चित समय तक कैश करता है और स्पष्ट रूप से पुनर्वैधीकृत किए जाने तक सभी अनुरोधों के लिए उसका पुनः उपयोग करता है।

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

कैश न रखें — हमेशा ताज़ा

no-store कैशिंग को पूरी तरह बंद करता है। हर अनुरोध ओरिजिन तक पहुँचता है। व्यक्तिगत या संवेदनशील डेटा के लिए इसका उपयोग करें।

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — समय-आधारित ISR

next.revalidate विकल्प प्रतिक्रिया को कैश करता है, लेकिन पृष्ठभूमि में हर N सेकंड पर उसका पुनर्वैधीकरण करता है (बासी-रहते-हुए-पुनर्वैधीकरण का तरीका)।

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

खंड-स्तरीय revalidate

किसी पेज या लेआउट से revalidate स्थिरांक एक्सपोर्ट करके उस खंड के सभी डेटा-प्राप्ति कार्यों पर पुनर्वैधीकरण अंतराल लागू करें।

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — टैग-आधारित पुनर्वैधीकरण

next.tags के साथ डेटा-प्राप्ति कॉल को टैग दें। माँग पर सभी टैग किए गए कैश अमान्य करने के लिए सर्वर ऐक्शन या रूट हैंडलर में revalidateTag(tag) का उपयोग करें।

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) किसी विशिष्ट यूआरएल पथ का कैश अमान्य करता है, जिससे अगले अनुरोध पर वह फिर से तैयार होता है।

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

डायनेमिक फ़ंक्शनों से बाहर निकलना

किसी पेज में cookies(), headers() कॉल करने या searchParams पढ़ने से वह डायनेमिक हो जाता है—वह पेज पूरी तरह कैशिंग से बाहर हो जाता है।

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

डुप्लीकेट हटाना

Next.js एक ही रेंडर पास के भीतर समान डेटा-प्राप्ति कॉल को एकीकृत करता है—यदि दो सर्वर कंपोनेंट्स एक ही यूआरएल से डेटा प्राप्त करते हैं, तो केवल एक HTTP अनुरोध किया जाता है।

अनुरोध स्मरण बनाम कैश

कैश की दो परतें होती हैं: अनुरोध स्मरण (प्रति-अनुरोध डुप्लीकेट हटाना, स्वचालित) और डेटा कैश (स्थायी, कैश/पुनर्वैधीकरण विकल्पों से नियंत्रित)।

कैश व्यवहार की जाँच

next build चलाकर बिल्ड आउटपुट देखें—हर रूट अपनी रेंडरिंग रणनीति दिखाता है: स्थिर (कैश किया हुआ), गतिशील (कैश नहीं) या ISR (पुनर्वैधीकरण अंतराल)।

त्वरित जाँच

ऐसे डेटा के लिए किस fetch कैश विकल्प का उपयोग करना चाहिए जो कम बदलता है, लेकिन पूरे ऐप को फिर से तैनात किए बिना अपडेट होना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

स्थिर डेटा के लिए cache: 'force-cache', हमेशा ताज़ा डेटा के लिए cache: 'no-store' और ISR के लिए next: { revalidate: N } का उपयोग करें। डेटा-प्राप्ति कार्यों को next.tags से टैग करें और माँग पर अमान्य करने के लिए revalidateTag() कॉल करें। डायनेमिक फ़ंक्शन पेजों को अपने-आप कैशिंग से बाहर कर देते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 88
पाठ: 324

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Next.js में कैश विकल्पों के साथ fetch()” पाठ निःशुल्क है?

हाँ—“Next.js में कैश विकल्पों के साथ fetch()” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Next.js में कैश विकल्पों के साथ fetch()” में मैं क्या सीखूँगा?

कैशिंग व्यवहार नियंत्रित करने के लिए fetch पर force-cache, no-store और revalidate विकल्पों का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“Next.js में कैश विकल्पों के साथ fetch()” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← React Academy पर वापस जाएँ