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), మరియు మ్యూటేషన్‌ల తర్వాత `revalidatePath`/`revalidateTag`తో చెల్లరాయించడం అనేది పనితీరు మరియు సరైన తాజాతన రెండింటిని పొందడానికి అవసరం.