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

Granular Cache Busting के लिए Tag-Based Invalidation

Fetches में cache tags जोड़ें और mutations के बाद केवल प्रभावित data को invalidate करें।

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

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

टैग-आधारित अमान्यकरण क्यों

Next.js 15 में डेटा कैश अनुरोधों और परिनियोजनों के बीच fetch के परिणामों को बनाए रखता है। चुनौती यह है कि किसी परिवर्तन के बाद ठीक सही प्रविष्टियों को कैसे हटाया जाए।

समय-आधारित पुनःसत्यापन (revalidate: 60) मोटा और घड़ी-आधारित होता है।
पथ-आधारित (revalidatePath) पूरे मार्ग खंडों को साफ़ करता है।
टैग-आधारित आपको अलग-अलग फ़ेच को लेबल करने और केवल उन्हीं को अमान्य करने देता है, चाहे उन्हें किसी भी पृष्ठ ने रेंडर किया हो।

टैग आपको सूक्ष्म और लक्षित कैश सफ़ाई देते हैं: एक उत्पाद अपडेट करें और केवल उस उत्पाद को पढ़ने वाले फ़ेच को अमान्य करें।

किसी फ़ेच में टैग जोड़ना

आप विस्तारित fetch के next.tags विकल्प के माध्यम से टैग जोड़ते हैं। हर टैग आपके द्वारा चुनी गई साधारण स्ट्रिंग होती है।

यहाँ उत्पाद सूची के फ़ेच को दो टैग से लेबल किया गया है: एक व्यापक products टैग और एक विशिष्ट product-42 टैग।

व्यापक टैग पूरे संग्रह को अमान्य करता है।
विशिष्ट टैग एक आइटम को अमान्य करता है।

async function getProduct(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: ['products', `product-${id}`] },
  });
  if (!res.ok) throw new Error('Failed to load product');
  return res.json();
}

revalidateTag से अमान्य करना

किसी परिवर्तन के बाद next/cache से revalidateTag(tag) कॉल करें। उस टैग वाला हर कैश किया गया fetch बासी चिह्नित हो जाता है; अगला अनुरोध नया डेटा फिर से फ़ेच करता है।

यह सर्वर एक्शन या रूट हैंडलर के भीतर चलता है — ऐसे सर्वर-केवल संदर्भों में, जहाँ परिवर्तन किए जाते हैं।

revalidateTag ऐसा वादा नहीं लौटाता जिसका आप नए फ़ेच के लिए इंतज़ार करें; यह केवल प्रविष्टियों को बासी चिह्नित करता है।
कई टैग हैं? हर टैग के लिए इसे एक बार कॉल करें।

'use server';
import { revalidateTag } from 'next/cache';

export async function updateProduct(id: string, data: FormData) {
  await fetch(`https://api.shop.com/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ name: data.get('name') }),
  });
  // Bust only this product's cached reads
  revalidateTag(`product-${id}`);
}

व्यापक बनाम संकीर्ण टैग

एक छोटी टैग पदानुक्रम बनाएँ, ताकि आप प्रभाव का सही दायरा चुन सकें:

products — पूरे कैटलॉग को अमान्य करें (जैसे बड़े पैमाने पर आयात के बाद)।
product-42 — एकल आइटम को अमान्य करें (जैसे संपादन के बाद)।
product-42-reviews — उत्पाद को छुए बिना संबंधित हिस्से को अमान्य करें।

सामान्य नियम: हर फ़ेच को संग्रह टैग और इकाई टैग, दोनों से टैग करें। फिर परिवर्तन उस सबसे छोटे टैग को चुन सकते हैं जो बदलाव को समेटता हो।

पृष्ठों पर पढ़े जाने वाले डेटा को टैग करना

टैग डेटा कैश के लिए वैश्विक होता है, किसी मार्ग से बंधा नहीं होता। यदि मुखपृष्ठ और विवरण पृष्ठ दोनों एक ही टैग के साथ product-42 को फ़ेच करते हैं, तो एक revalidateTag('product-42') दोनों को साफ़ कर देता है।

यही revalidatePath पर इसका मुख्य लाभ है: आपको यह जानने की आवश्यकता नहीं होती कि डेटा का उपयोग किन पृष्ठों ने किया।

// app/page.tsx (home) and app/products/[id]/page.tsx both call this
export async function getProductSummary(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: [`product-${id}`] },
  });
  return res.json();
}

fetch के अलावा डेटा के लिए unstable_cache

सारा डेटा fetch से नहीं आता — सीधे डेटाबेस से की गई क्वेरी (Prisma, Drizzle) डेटा कैश को दरकिनार कर देती हैं। टैग समर्थन पाने के लिए उन्हें unstable_cache में लपेटें।

तीसरा तर्क tags और revalidate लेता है। वही revalidateTag कॉल इन प्रविष्टियों को भी साफ़ कर देती है।

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export const getCachedUser = unstable_cache(
  async (id: string) => db.user.findUnique({ where: { id } }),
  ['user-by-id'],
  { tags: ['users'], revalidate: 3600 },
);

unstable_cache में डायनेमिक टैग

कैश के कुंजी भाग (दूसरा तर्क) फ़ंक्शन की पहचान करने के लिए पर्याप्त स्थिर होने चाहिए, लेकिन अक्सर आपको प्रति-इकाई टैग चाहिए होता है। तर्क से टैग बनाएँ और उसे विकल्पों में पास करें।

फ़ंक्शन लौटाएँ, ताकि हर कॉल को सही इकाई टैग मिले और revalidateTag('user-7') जैसी सटीकता संभव हो।

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export function getCachedUser(id: string) {
  return unstable_cache(
    async () => db.user.findUnique({ where: { id } }),
    ['user', id],
    { tags: [`user-${id}`, 'users'] },
  )();
}

टैग नाम सुरक्षित रूप से बनाना

असंगत टैग स्ट्रिंग चुपचाप विफल हो जाती हैं — मेल न खाने वाला टैग कुछ भी साफ़ नहीं करता। टैग निर्माण को शुद्ध सहायक फ़ंक्शन में केंद्रीकृत करें, ताकि पढ़ने और लिखने वाले हमेशा सहमत रहें।

यह स्वतंत्र, प्रचलित TypeScript है: सहायक फ़ंक्शन ठीक वही स्ट्रिंग बनाते हैं जिनका उपयोग next.tags और revalidateTag दोनों में होता है।

const tags = {
  products: () => 'products',
  product: (id: string) => `product-${id}`,
  productReviews: (id: string) => `product-${id}-reviews`,
};

console.log(tags.products());
console.log(tags.product('42'));
console.log(tags.productReviews('42'));

कई टैग को एक साथ अमान्य करना

एक परिवर्तन अक्सर कैश किए गए कई हिस्सों को प्रभावित करता है। किसी उत्पाद को अपडेट करने के बाद आपको आइटम, संग्रह सूची और खोज अनुक्रमणिका — तीनों को साफ़ करना पड़ सकता है।

हर टैग के लिए revalidateTag कॉल करें। एक्शन की प्रतिक्रिया क्लाइंट को लौटने से पहले वे सभी साथ-साथ प्रभावी हो जाते हैं।

क्रम महत्वपूर्ण नहीं है — सभी बासी चिह्नित हो जाते हैं।
अन्य जगहों पर अनावश्यक रूप से दोबारा फ़ेच होने से बचने के लिए समूह को न्यूनतम रखें।

'use server';
import { revalidateTag } from 'next/cache';

export async function publishProduct(id: string) {
  await fetch(`https://api.shop.com/products/${id}/publish`, { method: 'POST' });
  revalidateTag(`product-${id}`);
  revalidateTag('products');
  revalidateTag('search-index');
}

टैग बनाम पथ: चुनाव करना

revalidateTag और revalidatePath दोनों अलग-अलग कामों के लिए हैं:

जब वही डेटा कई मार्गों पर दिखाई देता हो, या आप केवल डेटा को साफ़ करना चाहते हों (लेआउट के रेंडर किए गए मार्ग कैश की धारणाओं को नहीं), तब टैग का उपयोग करें।
जब पूरे मार्ग का आउटपुट बदल गया हो और वहाँ टैग का प्रबंधन न किया गया हो, तब पथ का उपयोग करें।

इनका संयोजन किया जा सकता है: कोई सर्वर एक्शन दोनों को कॉल कर सकता है। डेटा के लिए टैग और पूरे पृष्ठ की संरचनात्मक तब्दीलियों के लिए पथ को प्राथमिकता दें।

सर्वर एक्शन में शुरू से अंत तक

यह पूरा क्रम है: कोई फ़ॉर्म सर्वर एक्शन को डेटा भेजता है, एक्शन बैकएंड में परिवर्तन करता है, फिर सटीक टैग को अमान्य करता है। अगली बार उन टैग को पढ़ने वाला कोई भी पृष्ठ रेंडर होने पर अपने-आप नया डेटा प्राप्त करता है।

ध्यान दें कि हम इकाई टैग और संग्रह टैग दोनों को साफ़ करते हैं, क्योंकि संपादन सूची को भी बदल देता है।

'use server';
import { revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';

export async function editProduct(id: string, formData: FormData) {
  await fetch(`https://api.shop.com/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ name: formData.get('name') }),
    headers: { 'Content-Type': 'application/json' },
  });
  revalidateTag(`product-${id}`);
  revalidateTag('products');
  redirect(`/products/${id}`);
}

त्वरित जाँच

किसी उत्पाद विवरण के फ़ेच को ['products', 'product-42'] से टैग किया गया है और वही टैग मुखपृष्ठ की सूची में भी दिखाया गया है। आप केवल उत्पाद 42 का नाम संपादित करते हैं। अन्य उत्पादों को अनावश्यक रूप से अमान्य किए बिना दोनों दृश्यों को ताज़ा करने का सबसे सटीक तरीका क्या है?

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

पुनरावलोकन

आपने Next.js 15 में सूक्ष्म, टैग-आधारित कैश सफ़ाई सीखी:

fetch पर next: { tags: [...] } के माध्यम से और फ़ेच के अलावा डेटा के लिए unstable_cache के tags विकल्प के माध्यम से टैग जोड़ें।
एक संग्रह टैग और एक प्रति-इकाई टैग का उपयोग करें, ताकि परिवर्तन सबसे छोटा प्रभाव क्षेत्र चुन सकें।
सर्वर एक्शन या रूट हैंडलर के भीतर revalidateTag(tag) कॉल करें — हर टैग के लिए एक बार, और एक साथ।
टैग वैश्विक होते हैं: एक कॉल हर उस मार्ग पर डेटा को ताज़ा करती है जिसने उसे पढ़ा है, revalidatePath के विपरीत।
टैग स्ट्रिंग को सहायक फ़ंक्शन में केंद्रीकृत करें, ताकि पढ़ने और लिखने वाले कभी अलग न हों।

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

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

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

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

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

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

क्या “Granular Cache Busting के लिए Tag-Based Invalidation” पाठ निःशुल्क है?

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

“Granular Cache Busting के लिए Tag-Based Invalidation” में मैं क्या सीखूँगा?

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

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

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

“Granular Cache Busting के लिए Tag-Based Invalidation” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

चार Caches: Request, Data, Full Route और Router
Time-Based और On-Demand Revalidation Strategies
Granular Cache Busting के लिए Tag-Based Invalidation
Opting Out: Dynamic Rendering और no-store

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