Hydration (Server-Rendering)

Kurz: Hydration bedeutet, dass ein Framework das vom Server fertig gelieferte HTML im Browser „zum Leben erweckt”, indem es Ereignisse und Zustand anbindet.

Genauer: Beim Server-Rendering schickt der Server vollständiges HTML, das sofort lesbar ist. Danach lädt der Browser das JavaScript und das Framework verbindet sich mit den vorhandenen Elementen, statt sie neu zu erzeugen. Erst danach reagieren Schaltflächen.

Im Detail

• Hydration-Fehler: Weicht das HTML vom Server vom Ergebnis im Browser ab (zum Beispiel durch Date.now() oder Math.random() im Render), meldet das Framework einen Mismatch.
• Kosten: Das JavaScript muss geladen und ausgeführt werden. Je mehr interaktive Komponenten, desto länger dauert es.
• Entlastung: Server Components liefern HTML ohne Client-JavaScript. Nur interaktive Teile werden hydriert.
• Teil-Hydration: Inseln (Islands) hydrieren nur die Bereiche, die es brauchen.
• Tipp: Browser-spezifische Werte erst in einem Effekt lesen, nicht im Render.

Siehe auch: Lighthouse und Core Web Vitals