Was ist Hydration?
Hast du schon mal auf einen Button geklickt und nichts ist passiert, obwohl die Seite fertig aussah? Dann hast du die Hydration erwischt, bevor sie durch war.
Der Begriff stammt aus der Webentwicklung, nicht aus der Fitness. Bei modernen JavaScript-Frameworks wie React läuft eine Seite oft so ab:
- Der Server schickt fertiges HTML, du siehst die Seite schnell.
- Der Browser lädt das JavaScript nach.
- Das JavaScript läuft und hängt Klicks und Zustände an das HTML. Das ist die Hydration.
- Erst jetzt ist die Seite voll bedienbar.
Stell dir das HTML als gefriergetrocknete Mahlzeit vor. Sie sieht schon nach etwas aus, das JavaScript ist das Wasser. web.dev beschreibt es nüchterner: Client-Skripte fügen dem Server-HTML Zustand und Interaktivität hinzu.
Hydration, SSR und CSR
Hydration ist kein Gegenstück zu Rendering-Arten, sondern der Schritt danach:
Verfahren
Wo entsteht das HTML?
CSR
Im Browser
SSR
Auf dem Server, je Anfrage
SSG
Beim Bauen der Seite
SSR und SSG brauchen Hydration, sobald etwas interaktiv sein soll. Klassische WordPress-Seiten kennen das in dieser Form kaum, denn dort erzeugt PHP das HTML und kleine Skripte ergänzen es. Das Thema trifft dich also vor allem, wenn deine Website mit React, Next.js, Nuxt oder ähnlichen Frameworks läuft.
Was bedeutet das für SEO?
Gute Nachricht: Hydration ist an sich kein Rankingproblem. Das HTML ist ja schon da, Google kann es lesen. Google selbst nennt Server-Rendering und Pre-Rendering eine gute Idee und empfiehlt sie sogar als Ersatz für das veraltete Dynamic Rendering, neben Static Rendering und Hydration.
Die Risiken liegen woanders:
- Reaktionszeit: Während der Hydration hängt der Browser oft fest. Das trifft den INP (Interaction to Next Paint), die Kennzahl der Core Web Vitals für Reaktionsfähigkeit. Gut ist ein Wert bis 200 Millisekunden.
- Inhalte erst per JavaScript: Was nicht im ersten HTML steht, muss Google rendern. Das dauert laut Google meist Sekunden, manchmal länger.
- noindex: Steht es im ersten HTML, rendert Google gar nicht. JavaScript kann das nicht mehr retten.
Wie groß ist die Last? Laut Web Almanac 2025 liegt der Median bei 646 KB JavaScript pro Seite auf dem Handy. 2024 waren rund 206 KB davon mobil ungenutzt. Gutes INP erreichten 2025 mobil 77 % der Websites. Das misst JavaScript insgesamt, einen eigenen Hydration-Anteil dazu habe ich nicht gefunden.
Häufige Fehler
Fehler 1 · „Sieht fertig aus, ist fertig“
Laut web.dev kann SSR mit Rehydration den First Contentful Paint verbessern und zugleich die Reaktion spürbar verschlechtern. Schau also nicht nur auf die Zeit bis zum ersten Inhalt.
Fehler 2 · Hydration-Fehler ignorieren
Stimmen Server-HTML und Browser nicht überein, meldet React einen Fehler. Die Doku sagt klar: Behandle das als Bug. Häufige Ursachen sind Datum und Uhrzeit, falsch verschachtelte Tags oder Browser-Erweiterungen.
Fehler 3 · Alles doppelt ausliefern
Bei klassischer Hydration schickst du die Seite als HTML und dieselben Daten noch einmal als JavaScript. Das ist doppelte Fracht, gerade auf dem Handy.
Fehler 4 · Nur am schnellen Rechner testen
Auf deinem Laptop läuft die Hydration in Sekundenbruchteilen. Auf einem günstigen Smartphone sieht das anders aus: Der Median der blockierenden Zeit im Labor lag 2025 mobil bei 1.916 Millisekunden, am Desktop bei 92.
So geht es leichter
Die Webentwicklung arbeitet seit Jahren daran, weniger zu hydrieren:
- Progressive Hydration: Teile nacheinander statt alles auf einmal.
- Partial Hydration: Nur interaktive Teile bekommen JavaScript.
- Islands: Astro baut statische Seiten mit kleinen interaktiven Inseln und liefert standardmäßig kein JavaScript aus.
- React Server Components: Nur Client-Komponenten werden hydriert.
- Resumability: Qwik setzt die Arbeit des Servers im Browser fort, statt sie zu wiederholen.
Prüfen kannst du das mit PageSpeed Insights und Lighthouse: Sie zeigen Total Blocking Time, INP und ungenutztes JavaScript. Die URL-Prüfung der Search Console zeigt, was Google im gerenderten HTML sieht.
Häufige Fragen
Ist Hydration schlecht für SEO?
Nicht direkt. Das HTML liegt fertig vor, Google kann es lesen. Ein Thema wird es, wenn die Hydration den INP verschlechtert oder wichtige Inhalte erst per JavaScript nachkommen.
Was ist der Unterschied zwischen SSR und Hydration?
SSR erzeugt das HTML auf dem Server. Hydration passiert danach im Browser und macht dieses HTML bedienbar. Das eine liefert die sichtbare Seite, das andere die Funktion.
Was ist ein Hydration-Fehler?
Der Browser erwartet anderes HTML, als der Server geschickt hat. Oft stecken Zeitstempel, falsch verschachtelte Tags oder Browser-Erweiterungen dahinter. Im schlimmsten Fall hängen Klicks am falschen Element.
Warum reagiert meine Seite beim Laden nicht auf Klicks?
Oft läuft noch das JavaScript, und der Browser ist blockiert. Das betrifft vor allem schwächere Handys. PageSpeed Insights zeigt dir, wie viel blockierendes JavaScript die Seite hat.
Betrifft Hydration WordPress?
Klassisches WordPress erzeugt das HTML mit PHP und hydriert nicht im Sinne von React. Einzelne Blöcke oder Plugins können aber eigene Skripte mitbringen. Wichtiger ist dort meist, die Gesamtmenge an JavaScript klein zu halten.
Quellen
