Next.js मध्ये कोणत्या कॅशिंग लेयर्स आहेत?

Question

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 (जो आप सर्वात वेगळे करता)

```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** ब्राउজरमध्ये आधी भेट दिलेल्या मार्गांना ठेवते म्हणून मागे/पुढे आणि पुन: नेव्हिगेशन तात्काळ आहेत.

## मिउटेशन वर कॅशे अमान्य करणे

```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` कॉल करता जेणेकरून प्रभावित पृष्ठे पुन: फेच करतात आणि वापरकर्ते बदल पाहतात.

## सामान्य गोचरा

```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 च्या आक्रमक मल्टी-लेयर कॅशिंगमुळे ते वेगवान आहे, परंतु ही "मेरा डेटा जुना कोण आहे?" गोंधळचे #1 स्रोत देखील आहे.

चार लेयर्सचे ज्ञान, प्रति-फेच (`no-store`/`revalidate`/tags) द्वारे Data Cache नियंत्रित करणे, आणि मिउटेशनानंतर `revalidatePath`/`revalidateTag` सह अमान्य करणे ही कार्यक्षमता आणि योग्य ताजेपण दोन्ही मिळविण्यासाठी आवश्यक आहे.