Was ist Server-Side Rendering?

Der Ablauf von der Anfrage bis zum Klick

In einem Framework wie Next.js, Nuxt oder SvelteKit läuft eine SSR-Anfrage in diesen Schritten ab:

1. 1

   Anfrage

   Der Browser ruft eine Adresse auf, etwa die Produktseite eines Shops.

2. 2

   Rendern auf dem Server

   Der Server führt die Komponenten aus, holt die nötigen Daten, zum Beispiel Preis und Lagerbestand, und erzeugt daraus HTML.

3. 3

   Anzeige

   Der Browser zeichnet das HTML sofort, noch bevor das JavaScript-Bündel geladen ist. Die Seite ist sichtbar, reagiert aber noch nicht.

4. 4

   Hydration

   Das JavaScript lädt, dieselbe Anwendung läuft im Browser noch einmal an und hängt Ereignisse an das vorhandene Markup.

5. 5

   Interaktiv

   Ab jetzt reagieren Klicks und Eingaben, und weitere Navigation kann im Browser stattfinden.

Neu ist das Prinzip nicht. PHP, Java Server Pages oder Ruby on Rails haben HTML schon immer auf dem Server erzeugt. Wenn heute von SSR die Rede ist, meint man meist, dass JavaScript-Komponenten aus React, Vue oder Svelte auf dem Server gerendert und im Browser anschließend weiterverwendet werden. Genau dieser zweite Teil, die Hydration, ist das Neue.

Was Hydration bedeutet und warum sie Zeit kostet

Hydration heißt wörtlich Bewässerung: Das trockene HTML vom Server wird im Browser mit Leben gefüllt. Dafür muss das gesamte JavaScript der Seite geladen und ausgeführt werden, und das Framework geht den Komponentenbaum noch einmal durch, um Zustand und Ereignisse mit dem vorhandenen Markup zu verbinden. In React erledigt das hydrateRoot statt des sonst üblichen createRoot.

Zwischen Anzeige und Hydration liegt ein Fenster, in dem die Seite fertig aussieht, aber noch nicht reagiert. Wer in dieser Zeit klickt, sieht nichts passieren. Je größer das Bündel und je schwächer das Gerät, desto länger dauert das. Erzeugen Server und Browser dabei unterschiedliches Markup, spricht man von einem Hydration Mismatch, und das Framework muss Teile der Seite neu aufbauen.

Gegen diese Kosten gibt es mehrere Ansätze. Streaming schickt die Seite in Stücken, sodass wichtige Bereiche früher fertig sind und einzeln hydriert werden. Die Inselarchitektur, etwa in Astro, hydriert nur die wenigen interaktiven Teile und lässt den Rest als reines HTML stehen. React Server Components schicken für Komponenten, die nur Inhalt darstellen, gar keinen JavaScript-Code an den Browser.

SSR, SSG und CSR im Vergleich

Server-Side Rendering ist eine von mehreren Rendering-Strategien. Welche passt, hängt davon ab, wie oft sich der Inhalt ändert und ob er für jeden Besucher anders aussieht.

Moderne Frameworks zwingen dich nicht zu einer globalen Entscheidung. In Next.js, Nuxt, SvelteKit oder Astro legst du die Strategie pro Route oder sogar pro Komponente fest: Die Marketingseiten liegen statisch vor, der Warenkorb wird pro Anfrage gerendert, und das Dashboard hinter der Anmeldung läuft komplett im Browser.