Selective Hydration

Was ist Selective Hydration?

Für Websites, die sowohl interaktive Elemente als auch SEO-Performance brauchen, ist Selective Hydration die pragmatischste Lösung. Frameworks wie Astro nutzen dieses Prinzip mit ihrer Islands Architecture: Nur Buttons, Formulare und dynamische Elemente werden mit JavaScript aktiviert, während der gesamte Content sofort als statisches HTML geladen wird. Das Ergebnis sind deutlich bessere Core Web Vitals bei voller Interaktivität.

Selective Hydration ist eine Performance-Optimierungstechnik, die das Problem der vollständigen Hydration bei Server-Side-Rendered (SSR) Anwendungen löst. Bei klassischer Hydration muss der gesamte JavaScript-Code einer Seite heruntergeladen und ausgeführt werden, bevor einzelne Komponenten interaktiv werden. Selective Hydration priorisiert stattdessen die Komponenten, mit denen der Nutzer am wahrscheinlichsten interagiert, und hydriert diese zuerst.

React 18 hat Selective Hydration nativ eingeführt. Dabei kann React erkennen, welche Komponenten der Nutzer gerade verwenden möchte — etwa durch Hover oder Klick — und diese priorisiert hydrieren. Weniger wichtige Komponenten werden verzögert oder erst bei Bedarf verarbeitet. Das Ergebnis sind schnellere Interaktionszeiten und bessere Core Web Vitals, weil die Seite nicht auf die vollständige Hydration warten muss.

Für die technische SEO ist Selective Hydration ein Mittelweg zwischen vollständiger Hydration und radikaleren Ansätzen wie Resumability oder Islands Architecture. Der Server liefert vollständiges HTML, das Google ohne JavaScript-Ausführung lesen kann — das schont das Rendering Budget. Gleichzeitig bleiben alle Vorteile einer React-Anwendung erhalten. Wenn Sie eine bestehende React- oder Next.js-Anwendung optimieren, ist Selective Hydration oft der pragmatischste erste Schritt.