Quelles couches de cache Next.js possède-t-il ?

Question

Accepted Answer

L'App Router possède **plusieurs couches de cache** qui fonctionnent ensemble. Les comprendre explique pourquoi les données parfois semblent obsolètes et comment contrôler leur fraîcheur.

## Les quatre caches

```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 (celle que vous ajustez le plus)

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

Le **Full Route Cache** stocke les routes rendues statiquement ; le **Router Cache** garde les routes précédemment visitées dans le navigateur pour que les actions retour/avance et re-navigation soient instantanées.

## Invalider les caches lors de mutations

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

Après avoir créé/mis à jour des données (souvent dans une Server Action), vous appelez `revalidatePath`/`revalidateTag` pour que les pages affectées re-récupèrent les données et que les utilisateurs voient le changement.

## Le piège courant

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

(Note : les valeurs par défaut du cache ont changé à travers les versions de Next — vérifiez votre version, car certaines versions récentes cachent moins agressivement par défaut.)

## Pourquoi c'est important

Le cache multi-couche agressif de Next.js est ce qui le rend rapide, mais c'est aussi la source #1 de confusion « pourquoi mes données sont-elles obsolètes ? ».

Connaître les quatre couches, contrôler le Data Cache par-fetch (`no-store`/`revalidate`/tags), et invalider avec `revalidatePath`/`revalidateTag` après les mutations est essentiel pour obtenir à la fois performance et fraîcheur correcte.