Hydration ist der Schritt, in dem ein JavaScript-Framework eine auf dem Server erzeugte Seite im Browser übernimmt und interaktiv macht. Das HTML ist schon da; das Framework verbindet es mit seinen Komponenten und hängt die Ereignisse an.
- Hydration
Das Übernehmen einer auf dem Server erzeugten HTML-Seite durch ein JavaScript-Framework im Browser.
Beispiel: „Bis die Hydration fertig ist, sieht der Warenkorb-Button schon aus wie ein Button, reagiert aber noch nicht.“Auch: Hydrierung. Das Bild dahinter: Die ausgelieferte Seite ist trocken, und JavaScript füllt sie mit Leben.
Verwandt: Next.js und Nuxt, die Seiten auf dem Server erzeugen und danach im Browser hydrieren.
Wie Hydration abläuft
Zuerst kommt fertiges HTML im Browser an, die Seite ist sofort lesbar. Danach lädt das JavaScript des Frameworks, baut im Speicher dieselben Komponenten noch einmal auf, gleicht sie mit dem vorhandenen HTML ab und hängt an jedes Element die passenden Event-Listener.
Stimmen Server und Browser dabei nicht überein, etwa weil eine Uhrzeit oder ein Zufallswert auf beiden Seiten verschieden ausfällt, meldet das Framework einen Hydration-Fehler und baut den betroffenen Teil neu auf.
Was Hydration kostet
Rechenzeit im Browser. Die Seite wird gewissermaßen zweimal aufgebaut, einmal auf dem Server und einmal im Browser, und bis das zweite Mal fertig ist, reagieren Knöpfe nicht. Auf schwächeren Smartphones sind das spürbare Sekunden, die sich in den Core Web Vitals niederschlagen.
Dazu kommt der Download. Das JavaScript für die Hydration umfasst alle Komponenten der Seite, auch solche, die nie auf eine Eingabe reagieren.
Wie Frameworks die Hydration verkleinern
Mit teilweiser Hydration: Astro hydriert nur einzelne interaktive Inseln und lässt den Rest als reines HTML stehen. Andere Ansätze hydrieren Teile erst, wenn sie sichtbar werden oder jemand mit ihnen arbeitet.
Einen Schritt weiter geht das Framework Qwik mit der sogenannten Resumability. Der Browser setzt dort fort, wo der Server aufgehört hat, und lädt Code erst bei der ersten Eingabe.