Was ist Hydration?

Hydration ist der Prozess, in dem JavaScript Interaktivität an bereits servergerendertes HTML knüpft. Der Browser erhält eine fertige Seite mit Texten, Bildern und Layout, und das Framework übernimmt das Markup, hängt Event-Listener ein und verwandelt die statische Seite in eine voll interaktive Anwendung.

Definition

In einem SSR- oder SSG-Workflow gibt der Server HTML aus, und der Client lädt ein JavaScript-Bundle, das weiß, wie es dieses HTML weiterverwaltet. Während der Hydration gleicht das Framework seinen Komponentenbaum mit dem bestehenden DOM ab. Nach Abschluss verhält sich die Seite wie eine Single-Page-Application: Statusänderungen, Routenwechsel und Komponentenupdates passieren im Browser.

Warum es zählt

Hydration ist die Brücke zwischen schnellem First Paint und voller Interaktivität. Gut gemacht, sehen Nutzer Content sofort und können kurz darauf interagieren. Schlecht gemacht, verzögert Hydration die Interaktivität, liefert übergroße Bundles aus und erzeugt ein ruckeliges Verhalten, bei dem die Seite zwar fertig aussieht, aber noch nicht auf Eingaben reagiert.

Moderne Varianten

Aktuelle Frameworks führen Partial Hydration, Progressive Hydration und Islands Architecture ein, bei denen nur interaktive Teile der Seite JavaScript erhalten. Resumability und Server Components verschieben die Grenze weiter, indem sie Hydration für nicht-interaktiven Content aufschieben oder ganz entfallen lassen. Für Commerce-Storefronts senken diese Techniken die Time to Interactive und heben Core Web Vitals, ohne reichhaltige Erlebnisse zu opfern.

Verwandt

Mehr dazu: Composable Headless Frontend · Performance and Core Web Vitals.