Next.js Rendering: SSR vs. SSG vs. ISR – Die komplette Anleitung

Einführung

Next.js bietet drei leistungsstarke Render-Strategien, die je nach Anforderung optimal eingesetzt werden können: Server Side Rendering (SSR), Static Site Generation (SSG) und Incremental Static Regeneration (ISR). In diesem Artikel erkläre ich die Unterschiede und zeige, wann welche Strategie am besten passt.

1. Static Site Generation (SSG)

Was ist SSG?

Bei der Static Site Generation werden alle Seiten beim Build-Prozess generiert. Das Ergebnis sind statische HTML-Dateien, die direkt ausgeliefert werden – ohne Server-Side Processing bei jedem Request.

// pages/blog/[slug].tsx
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  return {
    props: { post },
    revalidate: false, // Keine Regeneration
  };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map((post) => ({ params: { slug: post.slug } })),
    fallback: false,
  };
}

Vorteile:

⚡ Blitzschnell: Kein Server-Processing bei Requests
🎯 Perfekt für SEO: Vollständiger HTML-Content verfügbar
💰 Kostengünstig: Einfache CDN-Auslieferung möglich
🔒 Sicher: Keine Server-Side Vulnerabilities
📱 Skalierbar: Beliebige Anzahl von Requests

Nachteile:

🔄 Statisch: Keine dynamischen Inhalte möglich
📝 Build-Zeit: Alle Seiten müssen beim Build generiert werden

Wann SSG nutzen?

Blog-Artikel und Dokumentation
Landing Pages mit statischen Inhalten
Produktkataloge (wenn sich selten ändern)
Portfolio-Websites

🔗 Mehr Infos: Next.js Static Generation

2. Server Side Rendering (SSR)

Was ist SSR?

Bei SSR wird jede Seite bei jedem Request serverseitig gerendert. Der Server generiert das HTML dynamisch und liefert es an den Client aus.

// pages/dashboard.tsx
export async function getServerSideProps(context) {
  const { req } = context;
  const user = await getUserFromSession(req);
  const data = await fetchUserData(user.id);

  return {
    props: {
      user,
      data,
      timestamp: new Date().toISOString(),
    },
  };
}

Vorteile:

🔄 Dynamisch: Immer aktuelle Daten
👤 Personalisierung: User-spezifische Inhalte möglich
🔍 SEO-freundlich: Vollständiger HTML-Content
🚫 Kein FOUC: Kein Flash of Unstyled Content

Nachteile:

⏱️ Langsamer: Server-Processing bei jedem Request
💰 Teurer: Höhere Server-Kosten
🔧 Komplexer: Server-Management erforderlich

Wann SSR nutzen?

E-Commerce Produktseiten mit Live-Preisen
Dashboard mit persönlichen Daten
News-Seiten mit aktuellen Inhalten
Seiten mit User-Authentication

🔗 Mehr Infos: Next.js Server-Side Rendering

3. Incremental Static Regeneration (ISR)

Was ist ISR?

ISR kombiniert die Vorteile von SSG und SSR: Seiten werden statisch generiert, können aber im Hintergrund aktualisiert werden, ohne dass ein kompletter Rebuild nötig ist. Das ermöglicht eine perfekte Balance zwischen Performance und Aktualität.

// app/blog/[id]/page.tsx
interface Post {
  id: string
  title: string
  content: string
}

export const revalidate = 3600 // Regeneriere alle Stunde

export async function generateStaticParams() {
  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))
}

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const post: Post = await fetch(`https://api.vercel.app/blog/${id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

Wie funktioniert ISR?

Beim Build: Alle bekannten Blog-Posts werden generiert
Bei Requests: Cached-Seiten werden blitzschnell ausgeliefert
Nach Revalidation: Der Cache wird im Hintergrund aktualisiert
On-Demand: Neue Seiten werden bei Bedarf generiert

Vorteile:

⚡ Schnell: Statische Auslieferung für bekannte Seiten
🔄 Aktuell: Automatische Updates im Hintergrund
📈 Skalierbar: Neue Seiten werden bei Bedarf generiert
💰 Kosteneffizient: Weniger Server-Load als SSR
🎯 SEO-freundlich: Vollständiger HTML-Content verfügbar

Nachteile:

⏰ Verzögerung: Updates können bis zur Revalidation dauern
🔧 Komplexität: Mehr Konfiguration erforderlich
🚫 Nicht für Echtzeit-Daten: Für Live-Updates besser SSR verwenden

Wann ISR nutzen?

E-Commerce mit moderaten Preisänderungen
Blog mit regelmäßigen Updates
Produktkataloge mit neuen Artikeln
News-Seiten mit Archiv-Funktion
Content-Management-Systeme

On-Demand Revalidation

Für präzisere Kontrolle kannst du revalidatePath verwenden:

// app/actions.ts
"use server";

import { revalidatePath } from "next/cache";

export async function createPost() {
  // Cache für /blog invalidieren
  revalidatePath("/blog");
}

🔗 Mehr Infos: Next.js ISR Guide

4. Client Side Rendering (CSR)

Was ist CSR?

Bei CSR wird nur ein minimales HTML ausgeliefert. Der eigentliche Content wird per JavaScript im Browser nachgeladen und gerendert.

// pages/admin.tsx
import { useEffect, useState } from 'react';

export default function AdminPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/admin-data')
      .then(res => res.json())
      .then(setData);
  }, []);

  if (!data) return <div>Loading...</div>;

  return <AdminDashboard data={data} />;
}

Vorteile:

🎨 Maximale Flexibilität: Vollständige Kontrolle über das UI
⚡ Schnelle Navigation: Nach initialem Load
🔧 Einfache Entwicklung: Standard React-Pattern

Nachteile:

🔍 SEO-Probleme: Suchmaschinen sehen wenig Content
⏱️ Langsamer Start: JavaScript muss erst geladen werden
📱 Mobile Performance: Höherer Datenverbrauch

Wann CSR nutzen?

Admin-Dashboards
Interaktive Tools
Single Page Applications
Seiten ohne SEO-Anforderungen

🔗 Mehr Infos: Next.js Client-Side Rendering

Praktische Entscheidungshilfe

Entscheidungsbaum

Ist SEO wichtig?
├─ Ja → Ist der Content statisch?
│   ├─ Ja → SSG
│   └─ Nein → Ändert sich der Content häufig?
│       ├─ Ja → Ändert sich der Content sehr häufig?
│       │   ├─ Ja → SSR
│       │   └─ Nein → ISR
│       └─ Nein → ISR
└─ Nein → CSR

Performance-Vergleich

Strategie	First Load	Navigation	SEO	Dynamisch	Cache-Freundlich
SSG	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	❌	⭐⭐⭐⭐⭐
SSR	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
ISR	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
CSR	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐

Code-Beispiele für Next.js 13+ App Router

// app/blog/[slug]/page.tsx - SSG
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

// app/dashboard/page.tsx - SSR
export default async function Dashboard() {
  const user = await getCurrentUser();
  const data = await getUserData(user.id);
  return <Dashboard data={data} />;
}

// app/products/[id]/page.tsx - ISR
export const revalidate = 3600; // Regeneriere alle Stunde

export default async function Product({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return <ProductPage product={product} />;
}

export async function generateStaticParams() {
  const products = await getProducts();
  return products.map(product => ({ id: product.id }));
}

Best Practices

1. Hybride Ansätze nutzen

// Kombiniere Strategien je nach Route
// /blog → SSG (statische Artikel)
// /dashboard → SSR (persönliche Daten)
// /products → ISR (moderate Updates)

2. Fallback-Strategien

// Für ISR: Graceful Degradation
export async function getStaticPaths() {
  return {
    paths: [], // Generiere nur bei Bedarf
    fallback: "blocking", // Warte auf Generierung
  };
}

3. Caching-Strategien

// Cache-Control Headers
export async function generateMetadata() {
  return {
    other: {
      "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
    },
  };
}

Fazit

Die Wahl der richtigen Render-Strategie hängt von deinen spezifischen Anforderungen ab:

SSG: Für statische Inhalte mit maximaler Performance
SSR: Für dynamische, personalisierte Inhalte mit Echtzeit-Daten
ISR: Für den perfekten Kompromiss zwischen Performance und Aktualität
CSR: Für interaktive Anwendungen ohne SEO-Anforderungen

Next.js macht es einfach, verschiedene Strategien zu kombinieren und je nach Route die optimale Lösung zu wählen. So baust du performante, wartbare und SEO-freundliche Webanwendungen.

Pro-Tipp: Starte mit SSG und migriere zu ISR, wenn du moderate Updates brauchst. Für sehr häufige Änderungen oder Echtzeit-Daten nutze SSR. Das ist oft der beste Weg für optimale Performance.

Hast du Fragen zu Next.js Rendering-Strategien? Kontaktiere mich für eine kostenlose Beratung zu deinem Projekt!