Einführung

Moderne Web-Apps basieren nicht mehr nur auf HTML und CSS. Frameworks wie Next.js ermöglichen verschiedene Render-Strategien: Server Side Rendering (SSR), Static Site Generation (SSG) und Client Side Rendering (CSR). Jede Methode hat ihre Stärken – und den richtigen Einsatzbereich.

1. Static Site Generation (SSG)

Was ist SSG?

Bei SSG wird deine Seite beim Build generiert. Das Ergebnis ist eine statische HTML-Datei, die bei jedem Aufruf direkt ausgeliefert wird – blitzschnell und caching-freundlich.

🔗 Next.js SSG Doku

Vorteile:

• Extrem schnell (kein Server notwendig)
• Perfekt für SEO
• Günstig in der Auslieferung (z. B. über CDN)

Wann nutzen?

Für Seiten mit statischen Inhalten, z. B. Landingpages, Blogs oder Produktbeschreibungen.

2. Server Side Rendering (SSR)

Was ist SSR?

Die Seite wird bei jedem Request serverseitig gerendert – etwa auf einem Node.js-Server oder einer Serverless Function. Die Antwort ist HTML mit initialem Content.

🔗 Next.js SSR Doku

Vorteile:

• Dynamisch und personalisierbar (z. B. basierend auf Cookies)
• Kein Flash of Empty Content (wie bei CSR)
• Gutes SEO für dynamische Seiten

Wann nutzen?

Wenn sich Inhalte häufig ändern oder personalisierbar sind – z. B. Dashboards, Nutzerprofile oder E-Commerce-Seiten.

3. Client Side Rendering (CSR)

Was ist CSR?

Hier wird die Seite beim ersten Aufruf minimal ausgeliefert, der eigentliche Content wird per JavaScript im Browser nachgeladen. Das ist der klassische React-Ansatz.

🔗 Next.js CSR Info

Vorteile:

• Maximale Flexibilität bei dynamischen UIs
• Ideal für Apps, die nach der ersten Ladung alles clientseitig steuern

Nachteile:

• SEO nur eingeschränkt möglich (da Inhalte per JS kommen)
• Erhöhter initialer Ladeaufwand (Time to Content)

Wann nutzen?

Für Single Page Applications, interaktive Tools oder Seiten, bei denen SEO keine große Rolle spielt.

Fazit

Mit Next.js lassen sich alle drei Strategien kombinieren – und je nach Route gezielt einsetzen. So baust du flexible, performante und wartbare Webanwendungen.