Hydration bezeichnet den Vorgang, bei dem serverseitig geliefertes HTML im Browser durch JavaScript interaktiv gemacht wird. Das Markup ist bereits vorhanden, JavaScript fügt nur noch das Verhalten hinzu.Zum Glossareintrag → kombiniert die Vorteile von serverseitigem JavaScript-Rendering bezeichnet den Vorgang, bei dem ein Browser oder Crawler JavaScript-Code ausführt, um daraus die fertige, sichtbare Seite zu erzeugen. Erst nach diesem Schritt entstehen Inhalte, die nicht bereits im ausgelieferten HTML stehen.Zum Glossareintrag → (Beim Server-Side Rendering (SSR) erzeugt der Server das fertige HTML, bevor die Seite an Browser oder Crawler ausgeliefert wird. Inhalte sind dadurch sofort im Quelltext vorhanden.Zum Glossareintrag →) oder statischer Generierung mit Interaction to Next Paint (INP) misst, wie schnell eine Seite über alle Interaktionen hinweg auf Nutzereingaben reagiert, und steht für die Interaktivität.Zum Glossareintrag →. Der Ablauf ist typischerweise:
- Der Server liefert fertiges HyperText Markup Language (HTML) ist die Auszeichnungssprache für Webseiten. Mit ihr werden Struktur und Inhalt einer Seite definiert, etwa Überschriften, Absätze, Links und Bilder.Zum Glossareintrag →.
- Crawler können die Inhalte sofort lesen.
- Der Browser lädt das JavaScript.
- Das JavaScript macht die bestehende Seite interaktiv.
Das ist grundsätzlich vorteilhaft, weil Inhalte schon vor der Interaktivität verfügbar sind. Probleme entstehen bei einem Hydration-Mismatch, also wenn die serverseitig erzeugte Version nicht zur clientseitig erwarteten passt.
Typische Ursachen sind unterschiedliche Daten auf Server und Client, Zeit- oder Zufallswerte im Render, abweichende Spracheinstellungen oder nicht synchrone Schnittstellendaten. Ein Mismatch kann dazu führen, dass Inhalte flackern, verschwinden oder im Browser anders aussehen als im ausgelieferten HTML.