Hydration, im Tech-Kontext.
Hydration verknüpft geliefertes HTML im Browser mit JavaScript, damit die Seite auf Klicks reagiert. Der teuerste Schritt zwischen sichtbar und bedienbar.
Hydration ist der Schritt, in dem der Browser bereits vorhandenes HTML mit dem passenden JavaScript verbindet, damit Buttons, Menüs und Formulare reagieren. Vorher ist die Seite sichtbar, aber tot. Bei serverseitig gerenderten React-Seiten läuft der Komponentenbaum dabei ein zweites Mal durch, was auf schwachen Geräten hunderte Millisekunden kostet und sich direkt in INP niederschlägt. Der häufigste Fehler ist der Hydration-Mismatch: Server und Browser erzeugen unterschiedliches Markup, etwa durch Zufallswerte, Zeitangaben oder Zugriff auf window. React verwirft dann den betroffenen Teilbaum und rendert ihn neu, was Sprünge und Doppelanzeigen erzeugt. Gegenmittel sind weniger interaktive Bereiche, Islands-Architektur oder Server-Components.
Beispiele aus dem Mittelstand
- Eine Startseite zeigt nach dem Laden sofort Text, reagiert aber zwei Sekunden lang nicht auf das Menü, weil das Bundle noch hydriert.
- Ein Buchungsformular zeigte kurz die falsche Uhrzeit, weil der Server in UTC und der Browser in lokaler Zeit rechnete.
// Bricht die Hydration: Server und Browser erzeugen unterschiedliche Ausgabe
export function Uhrzeit() {
return <span>{new Date().toLocaleTimeString()}</span>;
}
// Sauber: der Wert entsteht erst nach dem ersten Rendern im Browser
export function UhrzeitSicher() {
const [zeit, setZeit] = useState<string | null>(null);
useEffect(() => setZeit(new Date().toLocaleTimeString()), []);
return <span>{zeit ?? ""}</span>;
}Folge-Fragen
Woran erkenne ich einen Hydration-Fehler?
An einer Warnung in der Browser-Konsole und an Inhalten, die nach dem Laden kurz springen oder sich verändern.
Kostet Hydration wirklich messbar Leistung?
Ja, sie ist eine lange Aufgabe im Hauptthread. Klicks in diesem Fenster warten und verschlechtern den INP-Wert.
Geht es auch ohne Hydration?
Ja, für rein darstellende Bereiche. Islands-Architektur und Server-Components hydrieren nur die Teile, die wirklich interaktiv sind.
Hilft es, das Bundle kleiner zu machen?
Es hilft beim Herunterladen, aber Hydration kostet zusätzlich Rechenzeit. Weniger interaktive Komponenten wirken stärker als weniger Kilobyte.
Hydration in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance