Hydration.
Hydration ist der Schritt, in dem ein JavaScript-Framework wie React eine bereits fertig gerenderte HTML-Seite im Browser interaktiv macht: Es verbindet Klick-Handler, Zustand und Logik mit dem vorhandenen HTML. Die Seite ist dadurch sofort sichtbar, wird aber erst nach der Hydration vollständig bedienbar. Wie viel JavaScript hydriert werden muss, beeinflusst Ladezeit und Reaktionsfähigkeit stark.
Hydration — ausführlich erklärt
Moderne Websites mit React oder ähnlichen JavaScript-Frameworks werden oft auf dem Server oder schon beim Build als HTML erzeugt, mit Server-Side Rendering oder statischer Generierung. Der Browser kann dieses HTML sofort anzeigen. Damit Knöpfe, Menüs und Formulare reagieren, muss das Framework danach aber im Browser seinen JavaScript-Code laden, den Komponentenbaum nachbauen und ihn mit dem vorhandenen HTML verknüpfen. Dieser Vorgang heisst Hydration, weil eine «trockene» HTML-Seite mit Logik «bewässert» wird.
Hydration ist ein Kompromiss. Sie verbindet die Vorteile von serverseitigem HTML, also schnelle Anzeige und gute Lesbarkeit für Suchmaschinen, mit der Interaktivität einer Single-Page-Anwendung. Der Preis: Der Browser muss den Code aller interaktiven Komponenten herunterladen, parsen und ausführen. Bei grossen Seiten blockiert das den Hauptthread. In dieser Zeit sieht die Seite fertig aus, reagiert aber verzögert auf Klicks, was sich in der Kennzahl INP (Interaction to Next Paint) niederschlägt.
Ein bekanntes Problem sind Hydration-Fehler, auf Englisch «hydration mismatch». Sie entstehen, wenn das HTML vom Server nicht mit dem übereinstimmt, was React im Browser erwartet, etwa wenn ein Datum in einer anderen Zeitzone formatiert wird oder ein Wert vom Zufall abhängt. React meldet dann eine Warnung und baut Teile neu auf, was zu sichtbarem Springen und zusätzlicher Arbeit führen kann.
Die Entwicklung der letzten Jahre zielt darauf, weniger zu hydrieren. Partial Hydration oder Islands-Architekturen machen nur einzelne interaktive Bereiche lebendig, statt die ganze Seite. React Server Components, wie sie im App Router von Next.js verwendet werden, rendern Komponenten ausschliesslich auf dem Server und schicken für sie gar kein JavaScript an den Browser. Hydriert werden nur noch die Teile, die ausdrücklich als Client-Komponenten markiert sind, zum Beispiel ein Formular oder ein Menü.
Warum Hydration für Ladezeit und SEO zählt
Für Suchmaschinen ist das vorgerenderte HTML entscheidend, denn darin stehen Texte, Links und strukturierte Daten bereits ohne JavaScript. Hydration selbst ist für die Indexierung kaum relevant, wohl aber für die Nutzererfahrung, die Google über die Core Web Vitals misst. Viel Client-JavaScript verlängert die Zeit, bis eine Seite zuverlässig reagiert, und verschlechtert auf schwächeren Smartphones die Interaktionswerte deutlich.
Bei unserer Webentwicklung in Zürich arbeiten wir deshalb mit Next.js und Server Components: Inhalte bleiben auf dem Server, nur wirklich interaktive Teile werden hydriert. Das ist einer der Gründe, warum wir für Websites, die gut ranken sollen, eine Alternative zu WordPress mit schlankem Frontend empfehlen.
Beispiel: Eine Leistungsseite mit Rechner
Ein typischer Fall, als Beispiel beschrieben: Eine Leistungsseite besteht aus langem Text, Bildern, einer FAQ und einem kleinen Kostenrechner. In einer klassischen React-Umsetzung wird die gesamte Seite hydriert, obwohl nur der Rechner interaktiv ist. Auf älteren Smartphones reagiert der erste Klick spürbar verzögert.
Mit Server Components bleiben Text, Bilder und FAQ reines HTML. Nur der Rechner ist eine Client-Komponente und wird hydriert. Die Menge an JavaScript sinkt deutlich, der Rechner ist schneller bedienbar, und am sichtbaren Inhalt ändert sich nichts. Solche Umbauten prüfen wir auch bei bestehenden Web-Apps.
Weiterführende Seite
Server-Side RenderingHäufige Fragen zu Hydration
Nicht direkt. Suchmaschinen lesen das vorgerenderte HTML, das schon vor der Hydration vorhanden ist. Indirekt kann zu viel Hydration aber die Nutzererfahrung und damit Kennzahlen wie INP verschlechtern. Wichtig ist, nur das zu hydrieren, was wirklich interaktiv sein muss.
Ein Hydration-Fehler entsteht, wenn das HTML vom Server nicht mit dem Ergebnis übereinstimmt, das React im Browser erzeugt. Typische Ursachen sind Datums- und Zeitangaben, Zufallswerte oder Inhalte, die nur im Browser verfügbar sind. React zeigt dann eine Warnung und rendert Teile neu.
Server Components werden nur auf dem Server gerendert und schicken kein JavaScript an den Browser. Sie müssen deshalb nicht hydriert werden. Nur Client-Komponenten, etwa Formulare oder Menüs, durchlaufen die Hydration. Das reduziert die Menge an Code, die der Browser ausführen muss.
Weitere Begriffe mit „H“
Headless CMS
Ein Headless CMS ist ein Content Management System ohne integriertes Frontend ('head'). Inhalte werd...
HTTPS / SSL
HTTPS (HyperText Transfer Protocol Secure) bedeutet, dass die Datenübertragung zwischen Browser und ...
Headless Architecture
Headless Architecture trennt das Frontend (die sichtbare Website) vom Backend (Datenbank, CMS, Logik...
Bereit für Ihr Projekt?
Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.
Hydration in der Praxis
Wie der Begriff im Alltag von Schweizer KMU auftaucht — vertieft in Artikeln aus dem DLM Magazin.