Hydration (deutsch etwa „Befeuchtung“, im Web oft „Aufwecken“ genannt) bezeichnet den Schritt, bei dem clientseitiges JavaScript das vom Server ausgelieferte, bereits fertige HTML übernimmt und interaktiv macht. Der Server sendet vollständiges HTML, das sofort sichtbar ist; nach dem Laden des JavaScript-Bundles hängt das Framework Ereignis-Listener an die vorhandenen DOM-Knoten, initialisiert den Zustand und macht die Oberfläche reagierbar.
Warum Hydration nötig ist
Statisches HTML allein kann keine Klicks verarbeiten: Ein Button ohne JavaScript tut beim Drücken nichts. Reines Client-Side Rendering liefert dagegen erst ein leeres Gerüst und baut alles im Browser – das dauert und ist für Suchmaschinen schwierig. Hydration verbindet beides: Der Nutzer sieht sofort das HTML vom Server, und sobald das Skript geladen ist, übernimmt die Anwendung die Seite. Frameworks wie React, Vue oder Svelte machen das automatisch, wenn sie mit Server-Side Rendering oder Static-Site-Generation kombiniert werden.
Ablauf und Voraussetzungen
- Der Server rendert die Komponenten einmal zu HTML und sendet es an den Browser.
- Parallel lädt der Browser das JavaScript-Bundle der Anwendung.
- Das Framework „hydriert“: Es erstellt im Speicher eine Kopie der Komponentenstruktur, gleicht sie mit dem vorhandenen DOM ab und bindet Ereignis-Listener an.
- Erst danach ist die Seite voll interaktiv – messbar etwa an den Core Web Vitals.
Wichtig ist, dass Server- und Client-Ausgabe übereinstimmen: Weicht das gerenderte HTML ab (etwa durch Browser-APIs oder Zufallswerte beim Rendern), meldet das Framework einen Hydration-Fehler, weil es die bestehenden Knoten nicht zuordnen kann. Solche Abweichungen gehören zu den häufigsten Fehlerquellen bei React- und Next.js-Anwendungen.
Grenzen
Hydration kostet Rechenzeit und überträgt JavaScript für die ganze Seite – auch für Teile, die gar keine Interaktivität brauchen. Genau hier setzen Partial Hydration und die Islands-Architektur an, die nur ausgewählte Komponenten aufwecken.
Verwandte Grundlagen: Server-Side Rendering, Client-Side Rendering, React, DOM, JavaScript.