Next.js के पास कौन सी कैशिंग लेयर्स हैं?

Question

IT Interview Practice · Accepted Answer

App Router के पास **कई कैशिंग लेयर्स** हैं जो एक साथ काम करती हैं। उन्हें समझने से समझा जाता है कि डेटा कभी-कभी पुराना क्यों दिखता है और ताजापन को कैसे नियंत्रित किया जाए।

## चार कैश

```text
1. Request Memoization — dedupes identical fetch() calls within ONE render pass
2. Data Cache          — persists fetch() results across requests & deploys (server)
3. Full Route Cache    — caches the rendered HTML/RSC of static routes (build time)
4. Router Cache        — client-side cache of visited routes (in the browser, per session)
```

## 1. Request Memoization

```tsx
// the SAME fetch in a layout AND a page → only ONE network request per render
const user = await fetch("/api/user"); // automatically deduped
```

## 2. Data Cache (जिसे आप सबसे अधिक tune करते हैं)

```tsx
fetch(url, { cache: "force-cache" });       // cached (default) — like SSG
fetch(url, { cache: "no-store" });          // never cached — fresh every request
fetch(url, { next: { revalidate: 60 } });   // cached, refreshed every 60s — ISR
fetch(url, { next: { tags: ["posts"] } });  // taggable for on-demand invalidation
```

## 3 & 4. Route कैश

**Full Route Cache** स्थिर रूप से प्रस्तुत किए गए मार्गों को संग्रहीत करता है; **Router Cache** पहले से ही visit किए गए मार्गों को ब्राउज़र में रखता है ताकि back/forward और re-navigation तुरंत हो सकें।

## Mutation पर कैश को अमान्य करना

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

revalidatePath("/blog");        // invalidate a specific route's cache
revalidateTag("posts");         // invalidate every fetch tagged "posts"
router.refresh();               // (client) clear the Router Cache for current route
```

डेटा बनाने/अपडेट करने के बाद (अक्सर Server Action में), आप `revalidatePath`/`revalidateTag` कॉल करते हैं ताकि प्रभावित पृष्ठ फिर से fetch करें और उपयोगकर्ता परिवर्तन देखें।

## सामान्य समस्या

```text
"Why is my data stale after an update?" → a cache (usually Data or Router cache)
is serving the old value. Fix: revalidateTag/revalidatePath after the mutation,
or use cache: "no-store" for always-fresh data.
```

(नोट: कैश डिफ़ॉल्ट्स Next संस्करणों में बदल गए हैं — अपने संस्करण को जांचें, क्योंकि कुछ हाल के संस्करण डिफ़ॉल्ट रूप से कम आक्रामक रूप से कैश करते हैं।)

## यह क्यों महत्वपूर्ण है

Next.js की आक्रामक multi-layer कैशिंग ही चीज है जो इसे तेज़ बनाती है, लेकिन यह "मेरा डेटा पुराना क्यों है?" भ्रम का #1 स्रोत भी है।

चार लेयर्स को जानना, Data Cache को per-fetch के साथ नियंत्रित करना (`no-store`/`revalidate`/tags), और mutations के बाद `revalidatePath`/`revalidateTag` से अमान्य करना both performance और सही ताजापन प्राप्त करने के लिए आवश्यक है।

चार कैश

1. Request Memoization

2. Data Cache (जिसे आप सबसे अधिक tune करते हैं)

3 & 4. Route कैश

Mutation पर कैश को अमान्य करना

सामान्य समस्या

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

संबंधित प्रश्न