Wadanne caching layers da Next.js ke da ke?

Question

Accepted Answer

App Router yana da **wadanne caching layers" da ke aiki tare. Fahimta ta bayyana dalilin da data ta dade-dade ta zama tsufa da kuma yadda za ka mallaka daɗewar.

## Caches hudu

```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 (wanda ka tune mafi yawa)

```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 caches

**Full Route Cache** yana ajiyar hanyoyin da aka tabbatar su jiya; **Router Cache** yana riƙe da hanyoyin da aka ziyarci a gida a cikin browser don haka baje-baje da sake-navigation zai zama jiya jiya.

## Bata caches akan 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
```

Bayan ƙirƙirar/sabunta data (sau da yawa a cikin Server Action), ka kira `revalidatePath`/`revalidateTag` don haka shafukan da aka shiga suka sake fito da ubam yadda users za su gani canji.

## Gumanin gida

```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.
```

(Sanarwa: cache shirye-shiryen sun canza a cikin Next versions — duba your version, kamar yadda wasu sabon versions ba sa caching da karfi sosai ta default.)

## Ya yake mahimmaci

Next.js abubuwan caching multi-layer ɓata ɗabi'a ne ke sanya shi sannu, amma kuma itace tushe #1 na "me yasa data na da daɗewarwa?" rikitarwa.

Janyo da hanyoyin hudu, ƙarfe Data Cache ba-fetch (`no-store`/`revalidate`/tags), da bata `revalidatePath`/`revalidateTag` bayan mutations shine mahimmanci don samun sauran aiki da daɗewar dama.