Quali livelli di caching ha Next.js?

Question

Accepted Answer

L'App Router ha **più livelli di caching** che funzionano insieme. Comprenderli spiega perché i dati a volte sembrano obsoleti e come controllare la freschezza.

## Quattro 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 (quello che regoli di più)

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

La **Full Route Cache** memorizza le route renderizzate staticamente; la **Router Cache** mantiene le route visitate precedentemente nel browser così che indietro/avanti e ri-navigazione sono istantanei.

## Invalidare i cache su mutazione

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

Dopo aver creato/aggiornato dati (spesso in una Server Action), chiami `revalidatePath`/`revalidateTag` così le pagine interessate ri-recuperano i dati e gli utenti vedono il cambiamento.

## L'errore comune

```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: i default di cache si sono spostati tra le versioni di Next — controlla la tua versione, poiché alcune versioni recenti fanno cache meno aggressivamente per default.)

## Perché è importante

Il caching multi-livello aggressivo di Next.js è quello che lo rende veloce, ma è anche la #1 fonte di confusione "perché i miei dati sono obsoleti?".

Conoscere i quattro livelli, controllare la Data Cache per fetch (`no-store`/`revalidate`/tags), e invalidare con `revalidatePath`/`revalidateTag` dopo mutazioni è essenziale per ottenere sia performance che freschezza corretta.