Was ist serverseitiges Rendering?
Serverseitiges Rendering (SSR) erzeugt das anfängliche HTML einer Seite auf dem Server und sendet es an den Browser. Clientseitiges JavaScript kann dieses HTML anschließend hydratisieren, um interaktives Verhalten bereitzustellen.
So funktioniert serverseitiges Rendering
Bei SSR werden Komponenten für jede Anfrage auf einem Server gerendert oder aus einem serverseitigen Cache bereitgestellt. So entsteht eine HTML-Darstellung, die bereits vor der Ausführung des Anwendungspakets angezeigt werden kann. Wenn Interaktivität benötigt wird, verbindet die Hydration anschließend die Clientlogik mit dem passenden Markup. Das unterscheidet SSR von der statischen Generierung, die HTML vor den Anfragen erstellt, und von rein clientseitig gerenderten Seiten, die mit einem minimalen Grundgerüst beginnen. SSR ist Teil des Webauslieferungspfads und kann vor der Antwort Anfragekontext, Backend-Daten und Routing zusammenführen.
Wichtige Fakten
- Die Hydration erwartet, dass der anfängliche Komponentenbaum des Clients mit dem Server-Markup übereinstimmt; Gebietsschema, Zeit, Zufallswerte oder ausschließlich im Browser ausgeführte Verzweigungen können Abweichungen verursachen und bereits geleistete Arbeit verwerfen lassen.
- Serverseitiges Rendering kann erste Inhalte früher verfügbar machen. Langsame Backend-Daten oder nicht zwischengespeicherte Berechnungen verlängern jedoch die Zeit bis zum ersten Byte, sofern Ergebnisse nicht gestreamt oder zwischengespeichert werden.
- Code, der während SSR ausgeführt wird, hat kein Browser-DOM. Auch als clientseitig markierte Komponenten können für das anfängliche HTML auf dem Server gerendert werden. Greifen Sie daher auf window oder document nur in Code zu, der ausschließlich im Browser läuft, etwa in Effekten oder Ereignishandlern. Laden Sie Module, die bereits beim Import darauf zugreifen, über einen clientseitigen dynamischen Import.
Wann serverseitiges Rendering wichtig ist
Verwenden Sie SSR, wenn anfängliche Inhalte, Linkvorschauen, die Auffindbarkeit über Suchmaschinen oder die Funktionsfähigkeit ohne JavaScript wichtig sind. SSR verursacht zusätzlichen Rendering-Aufwand auf dem Server und kann Hydrationsfehler auslösen, wenn die Browserausgabe vom Server-HTML abweicht.