Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

कैशिंग और पुनः सत्यापन

Next.js की शक्तिशाली कैशिंग प्रणालियों को समझें और ताज़ा सामग्री के लिए कैश किए गए डेटा का पुनः सत्यापन करना सीखें

पाठ 2, कुल 3 में से11 चरण

कैशिंग और पुनः सत्यापन, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

कैशिंग क्यों महत्वपूर्ण है

वेब ऐप्लिकेशन के प्रदर्शन और प्रतिक्रियाशीलता को बेहतर बनाने के लिए कैशिंग एक मौलिक तकनीक है।

कल्पना कीजिए कि आप डेटाबेस या एपीआई से वही डेटा बार-बार प्राप्त कर रहे हैं। इससे अनावश्यक भार बढ़ता है और आपका ऐप धीमा हो जाता है।

कैशिंग बार-बार एक्सेस किए जाने वाले डेटा की एक प्रति रखती है, ताकि बाद के अनुरोधों पर उसे तेज़ी से उपलब्ध कराया जा सके और विलंबता तथा संसाधनों का उपयोग कम हो।

अंतर्निहित डेटा कैश

Next.js 15, विशेष रूप से App Router के साथ, शक्तिशाली अंतर्निहित कैशिंग तंत्र प्रदान करता है।

यह सर्वर कंपोनेंट्स में मूल fetch एपीआई का उपयोग करके प्राप्त किए गए डेटा को बुद्धिमानी से कैश करता है।
यह कैश सर्वर पर संग्रहीत होता है, जिससे बार-बार आने वाले उपयोगकर्ताओं या समान डेटा के कई अनुरोधों के लिए प्रतिक्रियाएँ तेज़ मिलती हैं।
यह आपके ऐप्लिकेशन को हर बार डेटा फिर से प्राप्त किए बिना सामग्री तेज़ी से देने में मदद करता है।

सर्वर कंपोनेंट्स में `fetch` के डिफ़ॉल्ट

जब आप Next.js सर्वर कंपोनेंट के अंदर मानक fetch एपीआई का उपयोग करते हैं, तो Next.js डेटा को अपने-आप कैश करता है।

इसका अर्थ है कि यदि वही fetch अनुरोध दोबारा किया जाता है, तो Next.js बाहरी एपीआई से संपर्क करने के बजाय अपने कैश से डेटा देगा।

यह व्यवहार उन परिस्थितियों के लिए अनुकूलित है जहाँ डेटा बार-बार नहीं बदलता और इससे प्रदर्शन में काफ़ी सुधार हो सकता है।

डिफ़ॉल्ट कैशिंग आज़माएँ

यह सर्वर कंपोनेंट द्वारा डेटा प्राप्त करने का एक सरल उदाहरण है। ध्यान दें कि Next.js परिणाम को स्वतः कैश करता है।

यदि आप इसे चलाकर पेज को रीफ़्रेश करें, तो कैश के जीवनकाल के आधार पर fetch कॉल तुरंत दोबारा बाहरी एपीआई तक नहीं पहुँच सकती।

// app/page.js
async function getUserData() {
  // This fetch request is automatically cached by Next.js
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!res.ok) {
    throw new Error('Failed to fetch user data');
  }
  return res.json();
}

export default async function HomePage() {
  const user = await getUserData();
  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Fetched at: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

कैश को दरकिनार करना

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

आप cache विकल्प को 'no-store' पर सेट करके किसी विशिष्ट fetch अनुरोध के लिए कैशिंग से बाहर निकल सकते हैं।

fetch('...', { cache: 'no-store' }) Next.js को हमेशा डेटा फिर से प्राप्त करने का निर्देश देता है।
इससे सुनिश्चित होता है कि आपको हर बार नवीनतम जानकारी मिले।

कैश को दरकिनार करके आज़माएँ

यह उदाहरण दिखाता है कि कैश को स्पष्ट रूप से कैसे दरकिनार किया जाता है। हर बार जब यह कंपोनेंट रेंडर होगा, एपीआई को एक नया अनुरोध भेजा जाएगा।

// app/live-data/page.js
async function getLiveTime() {
  // This fetch request explicitly opts out of caching
  const res = await fetch('https://worldtimeapi.org/api/ip', {
    cache: 'no-store', // Always re-fetch
  });
  if (!res.ok) {
    throw new Error('Failed to fetch live time');
  }
  return res.json();
}

export default async function LiveDataPage() {
  const timeData = await getLiveTime();
  return (
    <div>
      <h1>Live Time</h1>
      <p>Current time in your timezone:</p>
      <p><b>{new Date(timeData.datetime).toLocaleTimeString()}</b></p>
      <p>Last fetched: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

समय के साथ डेटा का पुनर्वैधीकरण

यदि आप चाहते हैं कि डेटा कैश हो, लेकिन एक निश्चित अवधि के बाद ताज़ा भी हो जाए, तो क्या करें? Next.js समय-आधारित पुनर्वैधीकरण का समर्थन करता है, जो Incremental Static Regeneration (ISR) के समान है।

आप अपने fetch कॉल की next प्रॉपर्टी में revalidate विकल्प निर्दिष्ट कर सकते हैं:

fetch('...', { next: { revalidate: 60 } }) डेटा को 60 सेकंड तक कैश करेगा।
60 सेकंड के बाद, अगला अनुरोध पृष्ठभूमि में दोबारा डेटा लाने की प्रक्रिया शुरू करेगा। पहले पुराना डेटा दिखाया जाएगा, फिर नया डेटा दिखाया जाएगा।

समय-आधारित पुनर्वैधीकरण आज़माएँ

इस उदाहरण में डेटा 10 सेकंड तक कैश रहेगा। यदि आप 10 सेकंड के भीतर पृष्ठ को रीफ़्रेश करते हैं, तो आपको कैश किया गया समय दिखाई देगा। 10 सेकंड के बाद, डेटा फिर से लाया जाएगा।

// app/revalidated-data/page.js
async function getRevalidatedData() {
  // Data will be revalidated every 10 seconds
  const res = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC', {
    next: { revalidate: 10 }, // Revalidate after 10 seconds
  });
  if (!res.ok) {
    throw new Error('Failed to fetch revalidated data');
  }
  return res.json();
}

export default async function RevalidatedPage() {
  const data = await getRevalidatedData();
  return (
    <div>
      <h1>Revalidated UTC Time</h1>
      <p>Current UTC Time: <b>{new Date(data.datetime).toLocaleTimeString()}</b></p>
      <p>This data revalidates every 10 seconds.</p>
      <p>Last rendered: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

मैन्युअल पुनर्वैधीकरण

समय-आधारित पुनर्वैधीकरण के अलावा, Next.js आपको कैश किए गए डेटा का मैन्युअल रूप से या "माँग पर" पुनर्वैधीकरण करने की सुविधा भी देता है।

revalidatePath('/path'): किसी विशिष्ट पृष्ठ पथ के कैश का पुनर्वैधीकरण करता है।
revalidateTag('tag'): किसी विशिष्ट स्ट्रिंग से टैग किए गए सभी fetch अनुरोधों का पुनर्वैधीकरण करता है (उदाहरण के लिए, fetch('...', { next: { tags: ['products'] } }))।

जब उपयोगकर्ता की किसी कार्रवाई के कारण डेटा बदलता है (जैसे किसी उत्पाद को अपडेट करना) और आप चाहते हैं कि UI तुरंत नवीनतम जानकारी दिखाए, तब यह उपयोगी होता है।

अपना ज्ञान जाँचें

निम्नलिखित में से Next.js का कौन-सा fetch विकल्प यह सुनिश्चित करता है कि हर अनुरोध पर डेटा हमेशा मूल सर्वर से ही लाया जाए और किसी भी कैश को दरकिनार किया जाए?

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

कैशिंग और पुनर्वैधीकरण का पुनरावलोकन

इस पाठ में आपने Next.js की शक्तिशाली डेटा कैशिंग प्रणालियों के बारे में सीखा।

Next.js डिफ़ॉल्ट रूप से Server Components में fetch अनुरोधों को कैश करता है।
रीयल-टाइम डेटा के लिए { cache: 'no-store' } से आप कैश को दरकिनार कर सकते हैं।
समय-आधारित पुनर्वैधीकरण (ISR) { next: { revalidate: N } } से किया जाता है।
माँग पर पुनर्वैधीकरण में कैश किए गए डेटा को मैन्युअल रूप से ताज़ा करने के लिए revalidatePath या revalidateTag का उपयोग किया जाता है।

उच्च-प्रदर्शन वाले Next.js अनुप्रयोग बनाने के लिए इन तकनीकों में दक्षता हासिल करना बहुत महत्वपूर्ण है!

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

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

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

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

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

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

क्या “कैशिंग और पुनः सत्यापन” पाठ निःशुल्क है?

हाँ — Next.js 15 फुलस्टैक (App Router + Server Actions) अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “कैशिंग और पुनः सत्यापन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“कैशिंग और पुनः सत्यापन” में मैं क्या सीखूँगा?

Next.js की शक्तिशाली कैशिंग प्रणालियों को समझें और ताज़ा सामग्री के लिए कैश किए गए डेटा का पुनः सत्यापन करना सीखें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।

“कैशिंग और पुनः सत्यापन” पाठ पूरा करने में कितना समय लगता है?

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

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

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

सर्वर-साइड डेटा प्राप्त करना
कैशिंग और पुनः सत्यापन
समानांतर, क्रमिक और स्ट्रीमिंग डेटा फ़ेचिंग

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ