Rendering-Strategien

Datum: März 2025
Lesedauer: 3 Minuten

Es gibt verschiedene Wege, um aus Code Markup zu generieren, welches dem Nutzer im Browser präsentiert wird. Nachfolgend werden vier verbreitete Strategien beschrieben.

Die folgenden Informationen basieren auf Recherchen und insbesondere auf einem Artikel des Vercel-Blogs “How to Choose the Best Rendering Strategy for Your App” . Die wichtigsten Punkte wurden extrahiert und als CheatSheet zusammengefasst.

Legende


🚧 Build Server
🧠 Cache
👨🏻‍💻 Client
📄 Code
🗄️ Daten
📁 Netzwerk Server

Static Site Generation (SSG)

Restaurant-Analogie: Fertiggerichte

Beim Build werden statische HTML-Dateien erstellt, welche später effizient geliefert werden.

Architektur

Build


📄 -----------> 🚧 (Build)
				🚧 -----------> 🗄️ (Fetch)
				🚧 <----------- 🗄️ (Cache)
				🚧 -----------> 📁 (Deploy)

Client Request


👨🏻‍💻	-----------> 📁 (Request)
👨🏻‍💻	<----------- 📁 (Response)

Vorteile

Effizient
Performant
SEO-optimiert
Geringe Server-Last

Nachteile

Lange Build-Zeit für grosse Seiten
Neuer Build und neues Deployment bei jeder Inhaltsanpassung

Einsatzgebiet

Für statischen Inhalt.

Performance-kritische Seiten
Seiten mit kleinem Build

Incremental Static Regeneration (ISR)

Restaurant-Analogie: Aufwärmen von kalten Gerichten

Daten werden beim Build noch nicht berücksichtigt, sondern erst beim ersten Client-Request geladen und daraufhin im Cache gespeichert.
Dies löst das Problem der SSG-Skalierbarkeit, da spezifische Seiten aktualisiert werden können.

Architektur

Build


📄 -----------> 🚧 (Build)
				🚧 -----------> 📁 (Deploy)

Client Request 1


👨🏻‍💻 -----------> 📁 (Request)
				📁 -----------> 🧠 (Fetch)
								🧠 -----------> 🗄️ (Fetch)
								🧠 <----------- 🗄️ (Cache)
				📁 <----------- 🧠 (Response)
👨🏻‍💻 <----------- 📁 (Response)

Client Request 2


👨🏻‍💻 -----------> 📁 (Request)
				📁 -----------> 🧠 (Fetch)
				📁 <----------- 🧠 (Response)
👨🏻‍💻 <----------- 📁 (Response)

Vorteile

Performance
Aktualisierter Inhalt ohne gesamte Rebuilds
Skalierbarkeit
Kosteneffizienz im Vergleich zu SSR (in einigen Fällen)

Nachteile

Performance des ersten Requests
(Cache-Invalidierung muss sorgfältig konfiguriert werden)

Einsatzgebiet

Für regelmässig aktualisierte Inhalte (oder bei zu langen Build-Zeiten mit SSG).

E-Commerce-Produktseiten
Grosse Inhaltsseiten

Server-Side Rendering (SSR)

Restaurant-Analogie: Kochen des Gerichts beim Eingang der Bestellung

Seite wird bei jedem einzelnen Request generiert.

Architektur

Build


📄 -----------> 🚧 (Build)
				🚧 -----------> 📁 (Deploy)

Client Request


👨🏻‍💻 -----------> 📁 (Request)
				📁 -----------> 🗄️ (Fetch)
				📁 <----------- 🗄️ (Cache)
👨🏻‍💻 <----------- 📁 (Response)

Vorteile

Aktuelle Daten
(Bessere Performance als clientseitige Fetches)
(Besser für SEO als clientseitige Fetches)

Nachteile

Performance
Serverlast

Einsatzgebiet

Für Echtzeitdaten und personalisierten Inhalt.
(Wenn man zu viele neue Daten für ISR benötigt.)

Dashboards
Social Media
Echtzeitdaten-Visualisierungen

Client-Side Rendering (CSR)

Restaurant-Analogie: Kunde erhält Zutaten, kocht aber selbst

Mit JS wird dynamischer Inhalt im Browser gerendert.

Architektur

CSR kann in Kombination mit den vorherigen Strategien verwendet werden, um Teile einer Seite mit dynamischer Funktionalität zu erweitern.

Vorteile

Interaktivität
Nahtlose Übergänge

Nachteile

Performance
SEO

Einsatzgebiet

Interaktive Elemente, bei denen CSR eine schnellere Reaktion bietet als ein Server-Request.

Interaktionen mit direktem Feedback
Hintergrundtasks (z. B. Inhalts-Synchronisierung)
Echtzeitdaten-Visualisierungen

Vergleich

Merkmal	SSG	ISR	SSR	(CSR)
Build-Time	🟥 Lang	🟧 Variiert	🟩 Kurz	🟩 Kurz
Time to First Byte	🟩 Schnell	🟨 Schnell*	🟥 Langsam	🟧 Mittel
Largest Contentful Paint	🟩 Schnell	🟨 Schnell*	🟧 Mittel	🟥 Langsam
Aktualität der Daten	🟥 Statisch	🟨 Periodisch/On-demand	🟩 Echtzeit	🟩 Echtzeit
Server-Compute	🟩 Niedrigste	🟨 Niedrig	🟥 Hoch	🟩 Niedrigste
Client-side Performance	🟩 Exzellent	🟩 Exzellent	🟨 Gut	🟧 Variiert
Interaktivität	🟧 Limitiert**	🟧 Limitiert**	🟩 Voll	🟩 Voll

* Erster Request wie SSR, danach wie SSG.
** Kann mit CSR verbessert werden.

Fazit

Rendering-Strategien bieten jeweils spezifische Vorteile und Herausforderungen, die je nach Anwendung und Anforderungen berücksichtigt werden müssen. Es gibt eine Vielzahl etablierter Methoden, und ständig entstehen neue Ansätze, wie zum Beispiel Partial Prerendering (PPR) , die zusätzliche Möglichkeiten bieten. Es ist entscheidend, die passende Strategie auszuwählen und flexibel zu bleiben, um Performance und Benutzererfahrung zu optimieren. Oft können verschiedene Ansätze kombiniert werden, um die bestmöglichen Ergebnisse zu erzielen.