Welche Caching-Schichten hat Next.js?

Question

Accepted Answer

Der App Router hat **mehrere Caching-Schichten**, die zusammenarbeiten. Ihr Verständnis erklärt, warum Daten manchmal veraltet wirken, und wie Sie die Aktualität kontrollieren.

## Die vier 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 (die eine, die Sie am meisten anpassen)

```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 und 4. Route Caches

**Full Route Cache** speichert statisch gerenderte Routen; **Router Cache** behält zuvor besuchte Routen im Browser, sodass Zurückgehen/Weiterleiten und erneute Navigation sofortig sind.

## Caches bei Mutation invalidieren

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

Nach dem Erstellen/Aktualisieren von Daten (oft in einer Server Action) rufen Sie `revalidatePath`/`revalidateTag` auf, damit die betroffenen Seiten erneut abrufen und Benutzer die Änderung sehen.

## Die häufige Anfälligkeit

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

(Hinweis: Cache-Standardwerte haben sich über Next.js-Versionen hinweg verschoben — überprüfen Sie Ihre Version, da einige neuere Versionen standardmäßig weniger aggressiv cachen.)

## Warum es wichtig ist

Nächste.js aggressives Multi-Layer Caching ist das, was es schnell macht, aber es ist auch die #1-Quelle für Verwirrung "warum sind meine Daten veraltet?".

Die vier Schichten zu kennen, den Data Cache pro Abruf zu kontrollieren (`no-store`/`revalidate`/tags) und mit `revalidatePath`/`revalidateTag` nach Mutationen zu invalidieren, ist entscheidend, um sowohl Leistung als auch korrekte Aktualität zu erreichen.