Frontend Academy · Lektion

SSG, SSR und ISR

Generieren Sie Seiten zur Build-Zeit statisch, rendern Sie sie pro Anfrage auf dem Server oder validieren Sie zwischengespeicherte Seiten nach einem Zeitplan mit Incremental Static Regeneration neu.

Lektion 3 von 414 Schritte

SSG, SSR und ISR ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Drei Rendering-Strategien

Next.js unterstützt drei Möglichkeiten, Seiten zu rendern: SSG (statische Seitengenerierung), SSR (serverseitiges Rendering) und ISR (inkrementelle statische Regenerierung). Jede Strategie hat andere Vor- und Nachteile.

SSG – Generierung zur Build-Zeit

Seiten werden zur Build-Zeit als statisches HTML generiert und über ein CDN ausgeliefert. Das ist die schnellstmögliche Bereitstellung. Ideal für Marketingseiten, Blogs und Dokumentationen.

SSG im Pages Router

Exportieren Sie getStaticProps aus einer Seite. Die Funktion wird zur Build-Zeit ausgeführt und stellt der Komponente Props bereit.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG im App Router

Standardmäßig rufen asynchrone Server-Komponenten Daten zur Build-Zeit ab. Verwenden Sie generateStaticParams für dynamische Routen.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR – Generierung pro Anfrage

Seiten werden bei jeder Anfrage gerendert. Verwenden Sie SSR, wenn Inhalte benutzerspezifisch sind oder sich zu häufig für eine Zwischenspeicherung ändern.

SSR im Pages Router

Exportieren Sie getServerSideProps.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR im App Router

Erzwingen Sie das Rendering pro Anfrage mit dynamic = 'force-dynamic' oder durch das Auslesen von Cookies und Headern, wodurch die statische Generierung automatisch deaktiviert wird.

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR – das Beste aus beiden Welten

ISR liefert eine statische Seite aus, generiert sie aber alle N Sekunden im Hintergrund neu. So wird die Geschwindigkeit von SSG mit annähernd aktuellen Daten kombiniert.

ISR im Pages Router

Fügen Sie revalidate zu getStaticProps hinzu.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR im App Router

Verwenden Sie next: { revalidate: N } in den fetch-Optionen oder setzen Sie export const revalidate = N auf einer Seite.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

Revalidierung nach Bedarf

Lösen Sie die Neugenerierung manuell aus, etwa über einen CMS-Webhook, ohne auf das Ende des Zeitintervalls zu warten.

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Die richtige Strategie auswählen

Verwenden Sie SSG, wenn sich Daten selten ändern, etwa bei Marketingseiten, Dokumentationen oder Blogs. Verwenden Sie ISR, wenn Daten gelegentlich aktualisiert werden, etwa bei CMS-basierten Websites oder E-Commerce-Listen. Verwenden Sie SSR für benutzerspezifische Inhalte, etwa Dashboards oder Kontoseiten.

Schnelltest

Was leistet ISR (inkrementelle statische Regenerierung), das reines SSG nicht leistet?

Beantworte es in der interaktiven Lektion

Zusammenfassung: SSG, SSR, ISR

SSG: zur Build-Zeit, am schnellsten, feste Inhalte. SSR: pro Anfrage, dynamisch, langsamer. ISR: SSG plus geplante Neugenerierung im Hintergrund – annähernd aktuelle Inhalte bei hoher Geschwindigkeit. Der Pages Router verwendet getStaticProps/getServerSideProps. Der App Router verwendet asynchrone Server-Komponenten mit fetch revalidate oder einer Revalidate-Konstanten auf Seitenebene. revalidatePath/Tag dienen für Aktualisierungen nach Bedarf.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „SSG, SSR und ISR“ kostenlos?

Ja — der vollständige Text von „SSG, SSR und 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 Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „SSG, SSR und ISR“?

Generieren Sie Seiten zur Build-Zeit statisch, rendern Sie sie pro Anfrage auf dem Server oder validieren Sie zwischengespeicherte Seiten nach einem Zeitplan mit Incremental Static Regeneration neu. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 „SSG, SSR und 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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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 Frontend Academy