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** પહેલાં ઉપલબ્ધ કરાયેલ રૂટ્સને બ્રાઉઝરમાં રાખે છે જેથી પાછળ/આગળ અને ફરીથી નેવિગેશન તાત્ક્ષણિક હોય.

## 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` કૉલ કરો જેથી અસરગ્રસ્ત પૃષ્ઠો ફરીથી ફેચ કરે અને વપરાશીઓ બદલાવ જુઓ.

## સામાન્ય મુશ્કેલી

```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 પણ છે.

ચાર સ્તરો જાણવું, Data Cache ને પ્રતિ-ફેચ સાથે નિયંત્રણમાં લેવું (`no-store`/`revalidate`/tags), અને mutation પછી `revalidatePath`/`revalidateTag` સાથે અમાન્ય કરવું બંને કામગીરી અને યોગ્ય તાજાપણ પ્રાપ્ત કરવા માટે આવશ્યક છે.