Hydration: Definition, Ablauf und Performance-Kosten

Was ist Hydration?

Hydration (Hydratisierung) ist der Schritt, bei dem JavaScript im Browser an HTML anknüpft, das der Server bereits gerendert hat. Das Framework übernimmt das vorhandene DOM, verbindet Event-Handler und baut den Komponentenzustand auf, sodass aus einer statisch wirkenden Seite eine interaktive wird. Sie ist die zweite Hälfte von Server-Side Rendering in Frameworks wie React mit Next.js. Ihre Kosten sind ein häufiger Grund, warum eine schnell wirkende Seite trotzdem träge auf Klicks und Taps reagiert.

So funktioniert Hydration

1. Der Server rendert die Seite zu HTML und sendet sie, sodass der Browser Inhalte früh darstellen kann.
2. Der Browser lädt das JavaScript-Bundle, parst und führt es aus.
3. Das Framework führt die Komponenten im Browser erneut aus und ordnet sie den vorhandenen DOM-Knoten zu. In React ist das hydrateRoot.
4. Event-Handler und Zustand werden angebunden. Ab hier ist die Seite interaktiv.

Zwischen Schritt 1 und 4 sieht die Seite bereit aus, aber Klicks werden eventuell ignoriert oder verzögert. Diese Lücke ist der Hydration-Aufwand und zeigt sich in der Interaction to Next Paint (INP). Google bewertet INP am 75. Perzentil echter Seitenaufrufe: 200 ms oder weniger gilt als gut, über 500 ms als schlecht (web.dev).

Beispiel

Eine Produktseite wird serverseitig gerendert und erscheint in unter einer Sekunde. Das Framework-Bundle ist groß, und gleichzeitig lädt ein Chat-Widget. Ein Besucher mit einem Mittelklasse-Smartphone tippt auf "In den Warenkorb", während die Hydration noch im Hauptthread läuft. Der Tipp wird in die Warteschlange gestellt, und der Button reagiert ein bis zwei Sekunden später. Das Server-HTML war schnell, die Hydration dahinter nicht.

Warum Hydration langsam ist

• Sie führt den Komponentenbaum im Browser erneut aus, auch für Teile, die sich nie ändern.
• Das Bundle muss erst geladen und geparst werden, mehr JavaScript bedeutet eine längere Lücke.
• Sie läuft im Hauptthread, der auch Eingaben verarbeitet.
• Sie konkurriert mit Bildern, Skripten von Drittanbietern und Werbung.
• Sie hängt vom Gerät ab. Ein Smartphone kann um ein Vielfaches langsamer sein als ein Entwickler-Laptop.

Techniken zur Senkung des Hydration-Aufwands

• Weniger JavaScript ausliefern. Code-Splitting und das Entfernen ungenutzten Codes verkürzen jeden Schritt.
• Islands. Astro rendert Seiten zu reinem HTML und fügt JavaScript nur Komponenten mit einer client:*-Direktive hinzu. Jede Insel wird getrennt hydriert, etwa beim Laden, im Leerlauf oder wenn sie sichtbar wird (Astro-Dokumentation).
• Streaming und Suspense. Reacts renderToPipeableStream sendet zuerst die Hülle und streamt den Rest, sobald Daten da sind, sodass Inhalte vor den Skripten erscheinen (React-Dokumentation).
• Server Components. Komponenten, die nur auf dem Server laufen, brauchen kein eigenes Client-JavaScript.
• Resumability. Qwik pausiert die Ausführung auf dem Server und setzt sie im Browser fort, statt die Anwendungslogik erneut abzuspielen (Qwik-Dokumentation).
• Keine Hydration. Rein statische Seiten aus Static Site Generation brauchen keine Hydration, und Lazy Loading von Code außerhalb des sichtbaren Bereichs hält den ersten Ladevorgang schlank.

Häufige Hydration-Fehler

• Hydration-Mismatches. Das Client-Rendering muss dieselbe Ausgabe erzeugen wie der Server. Typische Ursachen sind Zeitstempel und Locale-Formatierung, Browser-APIs wie window.matchMedia während des Renderns und typeof window-Prüfungen in der Render-Logik. React behandelt Mismatches als Fehler: Es kann sich erholen, was die App aber verlangsamen oder Handler an falsche Elemente binden kann (React-Dokumentation).
• Mismatches mit einem zweiten Rendering beheben. Inhalte in useEffect umzuschalten funktioniert, aber Komponenten rendern doppelt und die Oberfläche kann nach dem Laden sichtbar springen. suppressHydrationWarning ist nur für einzelne Elemente gedacht.
• Alles hydrieren. Reine Inhaltsbereiche wie Footer und Artikeltext brauchen selten JavaScript.
• Aufwendiger Zustandsaufbau beim Start und synchrone Skripte von Drittanbietern verzögern die Interaktivität.
• Nur auf dem schnellen Laptop testen. Hydration-Probleme zeigen sich auf echten Mittelklasse-Smartphones.

Hydration per Monitoring messen

Hydration sieht man im Screenshot nicht, also messen Sie sie. Der kostenlose Core Web Vitals Checker zeigt LCP, INP und CLS echter Nutzer aus den Daten des Chrome UX Report, über 28 Tage aggregiert. Für Labordaten führt das Page-Speed-Monitoring Lighthouse-Audits aus 25 Cloud-Regionen aus, erfasst die Total Blocking Time (eine Labormetrik, die Hauptthread-Arbeit wie Hydration widerspiegelt) und kann bei einer Verschlechterung alarmieren. Siehe auch Core Web Vitals mit Alarmen und Berichten überwachen und JavaScript für Performance meistern (beide Artikel auf Englisch).

Häufige Fragen: Hydration

Wozu ist Hydration nötig?

Server-gerendertes HTML ist nur Markup. Hydration ergänzt das JavaScript, das es interaktiv macht, mit Event-Handlern, Zustand und Effekten, ohne das HTML zu verwerfen, das der Nutzer schon sieht.

Was ist der Unterschied zwischen Rendering und Hydration?

Rendering erzeugt das HTML. Hydration bindet JavaScript an bereits vorhandenes HTML. Bei SSR rendert zuerst der Server, danach folgt die Hydration im Browser.

Was ist ein Hydration-Mismatch?

Er entsteht, wenn das HTML vom Server sich vom ersten Client-Rendering unterscheidet, zum Beispiel wegen eines Zeitstempels oder eines Browser-Werts. React gibt eine Warnung aus und muss eventuell Arbeit im Client wiederholen.

Beeinflusst Hydration das SEO?

Indirekt. Suchmaschinen können das Server-HTML lesen, aber langsame Hydration verschlechtert die Reaktionsfähigkeit und damit INP, einen Teil der Core Web Vitals.

Kann ich Hydration ganz vermeiden?

Ja bei Seiten ohne Interaktion, etwa statischen Inhaltsseiten. Bei interaktiven Seiten lässt sie sich mit Islands, Server Components oder einem Resumability-Framework wie Qwik begrenzen.

Woran erkenne ich, ob Hydration meiner Seite schadet?

Prüfen Sie INP in den Felddaten und die Total Blocking Time in einem Lighthouse-Lauf und profilieren Sie dann den Hauptthread auf einem Mittelklasse-Smartphone, um lange Tasks direkt nach dem Laden zu sehen.