Static Site Generation (SSG) ist eine Rendering-Strategie, bei der alle HTML-Seiten einer Website während des Build-Prozesses vorab generiert werden. Die fertigen HTML-Dateien werden anschließend auf einem CDN oder Webserver bereitgestellt und bei jeder Anfrage direkt als statische Dateien ausgeliefert, ohne dass ein Server Code ausführen muss.
SSG ist das Herzstück des Jamstack-Ansatzes und erlebt seit Mitte der 2020er-Jahre eine Renaissance. Der Grund: Statisch generierte Websites sind extrem schnell, hochsicher und kostengünstig im Betrieb. Frameworks wie Next.js, Astro und Hugo haben SSG zu einer ausgereiften, produktionsreifen Technologie gemacht.
So funktioniert Static Site Generation
Der Build-Prozess
Im Gegensatz zu Server-Side Rendering, wo HTML bei jedem Request erzeugt wird, passiert bei SSG alles im Voraus:
- Der Entwickler startet den Build-Prozess (z. B.
next buildoderastro build) - Das Framework liest alle Content-Quellen: MDX-Dateien, CMS-Daten, API-Antworten
- Für jede Seite wird das HTML vollständig gerendert und als Datei gespeichert
- CSS, JavaScript und Bilder werden optimiert und gebündelt
- Alle Dateien werden in einen Output-Ordner geschrieben
- Dieser Ordner wird auf ein CDN oder einen Webserver deployt
Auslieferung an den Nutzer
Wenn ein Nutzer eine SSG-Seite aufruft, passiert auf dem Server praktisch nichts: Die fertige HTML-Datei wird direkt vom CDN-Edge-Server ausgeliefert. Es gibt keine Datenbankabfragen, kein Rendering, keine Berechnungen. Das Ergebnis: Ladezeiten im Millisekundenbereich.
Vorteile von Static Site Generation
Maximale Performance
| Metrik | SSG | SSR | CSR |
|---|---|---|---|
| Time to First Byte (TTFB) | 10-50 ms | 100-500 ms | 50-200 ms |
| First Contentful Paint | Sehr schnell | Schnell | Langsam |
| Serverlast | Keine (CDN) | Hoch | Keine |
| Skalierbarkeit | Unbegrenzt | Serverabhängig | Unbegrenzt |
SSG-Seiten erreichen fast immer hervorragende Core Web Vitals-Werte, weil der Browser sofort vollständiges HTML und optimierte Assets erhält.
Sicherheit
Da kein Server-Code bei Requests ausgeführt wird, gibt es keine Angriffsfläche für SQL-Injections, Server-Side Request Forgery oder andere serverseitige Sicherheitslücken. Die statischen Dateien auf dem CDN sind praktisch unhackbar.
Kosteneffizienz
Statische Dateien auf einem CDN zu hosten kostet einen Bruchteil von Server-Infrastruktur. Dienste wie Vercel, Netlify oder Cloudflare Pages bieten großzügige kostenlose Tiers für statische Websites.
SEO-Vorteile
Suchmaschinen-Crawler erhalten sofort vollständig gerenderten HTML-Content. Die schnellen Ladezeiten wirken sich positiv auf die Page Speed und damit auf das Ranking aus. Meta-Tags, strukturierte Daten und Open Graph-Informationen sind direkt im HTML verfügbar.
Grenzen von SSG und Lösungsansätze
Die Build-Zeit-Problematik
Bei Websites mit zehntausenden Seiten kann der Build-Prozess sehr lange dauern. Jede Inhaltsänderung erfordert einen neuen Build. Lösungen:
- Incremental Static Regeneration (ISR): Next.js kann einzelne Seiten im Hintergrund neu generieren, ohne einen kompletten Rebuild auszulösen
- Deferred Static Generation: Seltener besuchte Seiten werden erst beim ersten Aufruf generiert und dann gecacht
- On-Demand Revalidation: Webhooks aus dem CMS triggern gezielt den Rebuild einzelner Seiten
Dynamische Inhalte
SSG eignet sich nicht für Inhalte, die sich bei jedem Seitenaufruf ändern müssen. Personalisierte Dashboards, Echtzeit-Daten oder nutzerspezifische Inhalte erfordern SSR oder Client-Side Rendering. Moderne Frameworks lösen das durch hybride Ansätze: Statische Seitenhülle per SSG, dynamische Inhalte per Client-Side Fetch.
SSG-Frameworks im Vergleich
| Framework | Sprache | Stärke | Ideal für |
|---|---|---|---|
| Next.js | React | Hybrid (SSG + SSR + ISR) | Komplexe Websites und Apps |
| Astro | Multi-Framework | Minimales JavaScript, Content-fokussiert | Marketing-Sites, Blogs, Docs |
| Hugo | Go | Extrem schnelle Builds | Große Content-Websites |
| Gatsby | React | Großes Plugin-Ökosystem | Datenreiche Marketing-Sites |
| Eleventy | JavaScript | Einfach, keine Frameworks nötig | Kleine bis mittlere Websites |
SSG in der Praxis: Ideale Anwendungsfälle
Static Site Generation ist die optimale Wahl für:
- Marketing-Websites und Landingpages: Inhalte ändern sich selten, Performance ist entscheidend
- Blogs und Magazine: Artikel werden veröffentlicht und selten geändert
- Dokumentationen: Technische Docs profitieren von schnellen Ladezeiten und einfacher Durchsuchbarkeit
- Lexika und Glossare: Perfekt für strukturierte, selten aktualisierte Inhalte
- Portfolio-Websites: Projekte werden hinzugefügt, bestehende Einträge bleiben stabil
Die Website von PAKU Media nutzt beispielsweise Next.js mit einer Mischung aus SSG für statische Seiten und dynamischem Rendering wo nötig. Dieses Lexikon selbst ist ein klassischer SSG-Anwendungsfall: Die MDX-Dateien werden beim Build zu HTML gerendert und über ein CDN ausgeliefert.