Standard-Definition
Hydration ist der Prozess, bei dem server-seitig vorgerendertes HTML nach dem Laden im Browser durch JavaScript „belebt" wird — Event-Handler werden angehängt, interaktive Komponenten aktiviert, Client-State initialisiert. Hydration ist die zentrale Mechanik moderner SSR-Frameworks wie Next.js, Nuxt, Remix, SvelteKit und TanStack Start: die Seite wird zuerst als statisches HTML server-seitig gerendert (für schnellen First Paint und Crawler-Verständigkeit), dann durch Hydration im Browser zu einer interaktiven JavaScript-Anwendung. Hydration unterscheidet diese Architektur von reinem Server-Side Rendering (ohne Client-Interaktivität) und reinen Single-Page Applications (ohne Server-Render). Konzepte wie „Partial Hydration" und „Islands Architecture" (Astro) optimieren das Hydration-Konzept weiter.
Was das in der Mandate-Praxis bedeutet
Hydration ist eines der am wenigsten verstandenen Konzepte moderner Web-Entwicklung — mit operativen Konsequenzen.
Erstens, Hydration-Mismatch ist eine häufige Fehler-Quelle. Wenn das server-gerenderte HTML und der client-gerenderte React-Tree nicht exakt übereinstimmen, generiert React eine Hydration-Mismatch-Warnung. In Lovable und ähnlichen Plattformen passiert das häufig bei dynamischen Inhalten — Datum-Anzeigen, Zufalls-Werten, dynamischen Style-Anpassungen. Konsequenz: visuelle Glitches beim Laden, schlechte Core-Web-Vitals (CLS), in schweren Fällen funktionale Probleme. Calvarius beobachtet das in Mandate-Audits regelmäßig.
Zweitens, Hydration-Performance ist ein eigener Optimierungs-Bereich. Schwere JavaScript-Bundles, die initial geladen werden müssen, verzögern Hydration und damit Interaktivität. Das verschlechtert primär die INP-Metrik. Optimierungs-Hebel: Code-Splitting, Tree-Shaking, Lazy-Loading nicht-kritischer Komponenten, Partial Hydration für statische Bereiche. Bei React: Server Components seit React 19, die nicht hydratisiert werden müssen, sind ein substantieller Hydration-Performance-Hebel.
Drittens, „Islands Architecture" reduziert Hydration auf interaktive Inseln. Frameworks wie Astro nutzen das Konzept: statischer Content (Text, Bilder, Layouts) wird gar nicht hydratisiert — nur einzelne interaktive Komponenten (Forms, Suchfelder, Player) werden als „Islands" mit eigenem JavaScript geladen. Das reduziert den initialen JS-Bundle drastisch und verbessert Performance. Für inhalts-zentrierte Mandate (Marketing-Sites, Blogs, Glossare wie dieser) ist Islands Architecture oft die wirtschaftlich rationalste Architektur-Wahl.