Hydration

HydrationHydration 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 RenderingJavaScript-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 → (Server-Side RenderingBeim 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 InteraktivitätInteraction 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 HTMLHyperText 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.