React Academy · Lektion

Incremental Static Regeneration (ISR)

Generieren Sie statische Seiten nach einem Zeitplan oder auf Anfrage neu, ohne ein vollständiges Redeployment.

Incremental Static Regeneration (ISR) ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ISR?

Incremental Static Regeneration ermöglicht es Next.js, eine vorab erstellte statische Seite auszuliefern und sie nach einem festgelegten Intervall im Hintergrund neu zu generieren — so werden die Geschwindigkeit von statischem HTML und die Aktualität serverseitigen Renderings kombiniert.

So funktioniert ISR

Bei der ersten Anfrage liefert Next.js das statische HTML aus dem Cache. Nach Ablauf des Revalidierungszeitraums löst die nächste Anfrage eine Neugenerierung im Hintergrund aus. Sobald diese abgeschlossen ist, liefern nachfolgende Anfragen die neue Seite aus.

ISR mit revalidate aktivieren

Exportieren Sie eine Konstante namens revalidate oder setzen Sie next: { revalidate: N } bei einem fetch-Aufruf innerhalb einer Server-Component-Seite.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR mit dynamischen Routen

Kombinieren Sie generateStaticParams mit revalidate, um häufig aufgerufene dynamische Seiten vorab zu erstellen und planmäßig zu revalidieren.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

On-Demand-Revalidierung

Rufen Sie revalidatePath() oder revalidateTag() aus einer Server Action, einer API-Route oder einem Webhook-Handler auf, um bestimmte Seiten sofort neu zu generieren — ohne auf das Intervall zu warten.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Fallback-Verhalten für unbekannte Pfade

Setzen Sie für dynamische Routen, die nicht in generateStaticParams enthalten sind, dynamicParams = true (Standard), damit sie bei Bedarf gerendert und gecacht werden, oder false, um 404 zurückzugeben.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Stale-While-Revalidate

Während der Neugenerierung liefert Next.js die veraltete Seite aus, bis die neue Version bereitsteht. Benutzer erhalten immer eine Antwort — sie müssen nicht auf aktuelle Daten warten.

ISR vs. SSR vs. statisches Rendering

Statisch: einmal erstellt, ändert sich nie. ISR: vorab erstellt und planmäßig neu generiert. SSR: wird bei jeder Anfrage aktuell gerendert. Verwenden Sie ISR für Inhalte, die sich gelegentlich ändern, aber von der Geschwindigkeit statischer Auslieferung profitieren.

Einschränkungen von ISR

ISR eignet sich nicht für personalisierte Inhalte, also benutzerspezifische Daten, oder für Daten, die in Echtzeit vorliegen müssen. Verwenden Sie dafür fetch-Aufrufe mit no-store und SSR.

ISR im Pages Router (getStaticProps)

Im Pages Router verwendet ISR getStaticProps mit einem Rückgabewert für revalidate — dasselbe Konzept, aber mit einer anderen API.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

ISR überprüfen

Prüfen Sie den Antwort-Header x-nextjs-cache: HIT bedeutet, dass die Antwort aus dem Cache stammt, MISS bedeutet, dass sie neu gerendert wurde, und STALE bedeutet, dass eine veraltete Version ausgeliefert wird, während die Revalidierung läuft.

Kurztest

Was geschieht, wenn ein Benutzer eine ISR-Seite anfordert, deren Revalidierungszeitraum gerade abgelaufen ist?

Zusammenfassung

ISR erstellt Seiten vorab und revalidiert sie alle N Sekunden über export const revalidate = N. Verwenden Sie generateStaticParams für häufig aufgerufene dynamische Routen und eine On-Demand-Revalidierung über revalidatePath/Tag, um Inhalte nach Mutationen sofort zu aktualisieren.

Häufig gestellte Fragen

Ist die Lektion „Incremental Static Regeneration (ISR)“ kostenlos?

Ja — der vollständige Text von „Incremental Static Regeneration (ISR)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Incremental Static Regeneration (ISR)“?

Generieren Sie statische Seiten nach einem Zeitplan oder auf Anfrage neu, ohne ein vollständiges Redeployment. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Incremental Static Regeneration (ISR)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy