Revalidierung
Nach dem Speichern genau das neu holen, was sich geändert hat
Statt Caching auszuschalten, sagst du Next.js gezielt Bescheid, wenn etwas veraltet ist. Dann bleibt die Seite schnell und ist trotzdem aktuell.
Die vorige Lektion endete mit einem Dilemma: Zwischenspeichern macht schnell, aber die Daten veralten. Die Auflösung ist nicht, den Speicher abzuschalten – sondern ihn zum richtigen Zeitpunkt für ungültig zu erklären.
Zwei Wege
Nach Zeit revalidate: 60
"höchstens eine Minute alt" – ohne dass du
etwas tun musst. Gut für Inhalte von außen.
Auf Zuruf revalidatePath() / revalidateTag()
"genau jetzt ist es veraltet" – nachdem DU
etwas geändert hast. Gut für eigene Daten.Der Unterschied in einem Satz: Nach Zeit rätst du, wie schnell etwas veraltet. Auf Zuruf weißt du es.
Nach Zeit
// Für die ganze Seite
export const revalidate = 3600; // stündlich
// Oder pro Abfrage
const kurse = await fetch(url, { next: { revalidate: 300 } });Next.js liefert die gespeicherte Fassung aus und baut im Hintergrund neu. Erst der nächste Besucher sieht die frischen Daten. Das ist Absicht: Niemand muss auf den Neuaufbau warten. Fachbegriff dafür ist ISRStatische Seite mit Verfallsdatum: Nach der eingestellten Zeit erzeugt Next.js sie im Hintergrund neu.Ausgeschrieben Incremental Static Regeneration. Eingestellt über `revalidate`.→.
Auf Zuruf
"use server";
import { revalidatePath, revalidateTag } from "next/cache";
export async function artikelSpeichern(id: string, daten: FormData) {
await db.artikel.update({ where: { id }, data: … });
// Variante 1: eine bestimmte Adresse
revalidatePath("/blog/" + id);
revalidatePath("/blog"); // die Übersicht auch
// Variante 2: alles, was dieses Etikett trägt
revalidateTag("artikel");
}// Beim Holen ein Etikett vergeben …
await fetch(url, { next: { tags: ["artikel"] } });
// … und später alles damit für ungültig erklären.
revalidateTag("artikel");Nach dem Bearbeiten eines Artikels ist nicht nur /blog/mein-artikel veraltet, sondern auch /blog und vielleicht die Startseite. Wer nur den Einzelfall abräumt, wundert sich, warum die Liste noch den alten Titel zeigt. Etiketten lösen genau das.
Wann was
- +
Nach Zeit für Daten aus fremder Hand: Wechselkurse, Wetter, ein fremder Blog-Feed
- +
Auf Zuruf für alles, was du selbst änderst – aus einer Server Action heraus
- +
Beides zusammen: Zuruf als Regelfall, Zeit als Sicherheitsnetz
- −
no-storeüberall, nur um dem Thema auszuweichen - −
Sehr kurze Zeiten (
revalidate = 1) – das ist dynamisch mit Extraschritten - −
Nach dem Speichern gar nichts tun und hoffen
Wenn die Daten aus einem fremden Redaktionssystem kommen, kann dieses nach dem Veröffentlichen eine Adresse deiner Seite aufrufen (einen Webhook). Darin rufst du revalidateTag(...) auf. So wird die Seite in dem Moment aktuell, in dem jemand veröffentlicht – ohne dass du eine Zeitspanne raten musst.
▸ Genauer erklärt: was revalidate NICHT anfasst optional
revalidatePath räumt den serverseitigen Speicher ab. Der Router CacheDer Zwischenspeicher im Browser: Beim Zurücknavigieren zeigt Next.js die Seite sofort aus dem Speicher.→ im Browser des Nutzers ist davon zunächst unberührt – deshalb sieht man nach dem Speichern manchmal trotzdem den alten Stand.
"use client";
import { useRouter } from "next/navigation";
const router = useRouter();
router.refresh(); // holt die aktuelle Seite frisch vom ServerRufst du revalidatePath innerhalb einer Server Action auf, aktualisiert Next.js die aktuelle Ansicht gleich mit. router.refresh() brauchst du nur, wenn die Änderung an React vorbei passiert ist.
Sitzt das schon?
4 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.