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" (opens in a new tab). 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 statisch 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)
(Besserer für SEO als clientseitige Fetches)

Nachteile

Performance
Serverlast

Einsatzgebiet

Für Echtzeitdaten und personalisierter 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) (opens in a new tab), 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.