Hydration bezeichnet in der Webentwicklung den Schritt, in dem JavaScript im Browser serverseitig gerendertes HTML interaktiv macht, indem es Event-Handler an die vorhandenen DOM-Elemente hängt. Der Begriff meint hier die Webtechnik, die Suche liefert auch Treffer zum Flüssigkeitshaushalt.
Wie funktioniert Hydration?
Der Server liefert fertiges HTML aus, das Seitenelemente sofort anzeigt. Danach lädt der Browser das JavaScript, und das Framework verbindet sich mit dem vorhandenen HTML. React beschreibt das mit hydrateRoot. Beispiele und Funktionsnamen stammen hier aus React, andere Frameworks verwenden den Begriff mit eigenen Schnittstellen. Bis dahin sieht die Seite fertig aus, reagiert aber noch nicht auf Eingaben.
Der im Browser erzeugte React-Baum muss exakt der Ausgabe des Servers entsprechen. Abweichungen, etwa durch Abfragen von window oder unterschiedliche Daten auf Server und Client, gelten laut React als Fehler, die behoben werden sollten. Sie können zu Verlangsamungen und zu Event-Handlern an falschen Elementen führen.
Bedeutung für SEO
Enthält das serverseitige HTML die Inhalte, sehen auch Crawler ohne JavaScript-Ausführung Texte und Links. Google nennt Hydration neben Server-Side Rendering und statischem Rendering als Alternative zu Dynamic Rendering. DebugBear beschreibt, dass Hydration den Hauptthread blockieren und den INP verschlechtern kann und dass große eingebettete Datenstrukturen das HTML-Dokument vergrößern.
Beispiel
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);
Das Element root enthält bereits das vom Server gerenderte HTML. React ergänzt nur die Interaktivität.
Quellen
- hydrateRoot – React Docsreact.dev
- Dynamic Rendering als Behelfslösung – Google Search Centraldevelopers.google.com
- Hydration (web development) – Wikipediaen.wikipedia.org
- What Is JavaScript Hydration For Single Page Applications? – DebugBeardebugbear.com
Stand: