X'inhi s-saffi tal-caching li għandha Next.js?

Question

Accepted Answer

L-App Router għandha **saffi multipli ta' caching** li jaħdmu flimkien. Jifhmu minnhom jispjega għaliex id-data kultant tidher ħamra u kif tikkontrolla l-friskezza.

## L-erba' cache

```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 (dik li tudjusta l-aktar)

```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 u 4. Route cache

L-**Full Route Cache** taħżen ir-roti li rrandiret b'mod statiku; ir-**Router Cache** tinżamm ir-roti viżitati qabel fil-browser sabiex il-gida/avanz u r-re-navigazzjoni huma istantanji.

## Invalida l-cache fuq mutazzjoni

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

Wara ma tkun inħoloqt/aġornata d-data (ħafna drabi f'Server Action), tieħu `revalidatePath`/`revalidateTag` sabiex il-paġni affettwati jeħtieġu mill-ġdid u l-utenti jaraw il-bidla.

## Il-gotcha komuni

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

(Nota: is-saffi cache default taċċaqqu fl-isqaq ta' Next - iċċekkja l-verżjoni tiegħek, billi xi verżjonijiet riċenti jaqgħa inqas b'mod aggressiv bil-default.)

## Għaliex din hija importanti

L-aggressive multi-layer caching ta' Next.js huwa dak li jagħmilha mgħaġġla, iżda huwa wkoll is-sors #1 tal-konfużjoni "għaliex id-data tiegħi ħamra?".

Il-għarfien tas-saffi erba', il-kontroll tal-Data Cache per-fetch (`no-store`/`revalidate`/tags), u l-invalida b'`revalidatePath`/`revalidateTag` wara mutazzjonijiet huwa essenzjali biex tikseb kemm il-prestazzjoni kif ukoll l-friskezza korrett.