Partial Hydration (teilweise Hydration) ist eine Rendering-Strategie, bei der nicht die gesamte Seite, sondern nur die Komponenten im Browser „aufgeweckt“ werden, die wirklich Interaktivität benötigen. Der Rest bleibt statisches HTML vom Server und spart dadurch JavaScript-Bytes, Ladezeit und Rechenarbeit.
Vom Opt-out zum Opt-in
Bei der klassischen Hydration hydriert das Framework die komplette Anwendung, sobald das Bundle geladen ist. Teilbereiche wie Texte, Artikel oder Diagramme, die nie geklickt werden, müssen dafür trotzdem heruntergeladen und im Speicher nachgebaut werden. Partial Hydration dreht die Logik um: Interaktivität ist die Ausnahme, nicht der Standard. Nur Bausteine, die der Entwickler ausdrücklich markiert, erhalten JavaScript – etwa ein Karussell, ein Suchfeld oder ein Login-Formular.
Umsetzung und Frameworks
Pionierarbeit leistete das Web-Framework Astro: Dort sind Seiten standardmäßig rein statisch, und jede interaktive Komponente wird einzeln über eine Direktive aktiviert. Die häufigsten Direktiven sind client:load (sofort beim Seitenstart hydrieren), client:idle (wenn der Browser zur Ruhe kommt) und client:visible (erst wenn das Element in den Viewport scrollt). React Server Components, Qwik mit seiner Resumability-Idee und das Insel-Modell von Preact verfolgen ähnliche Ziele mit unterschiedlichen Techniken.
Vorteile
- Weniger JavaScript auf der Ersten-Ladezeit – die Seite wird schneller sichtbar und interaktiv.
- Bessere Performance-Werte, da nur relevante Bundles geladen werden.
- Statische Inhalte behalten die SEO-Vorteile von Server-Rendering oder Static-Site-Generation.
Die Idee, interaktive Komponenten als einzelne Inseln im statischen HTML zu behandeln, wird als Islands-Architektur bezeichnet. Eine wichtige Einschränkung bleibt: Der Zustand zwischen mehreren Inseln muss koordiniert werden, da jede Insel ihr eigenes kleines Framework-Stück startet.
Verwandte Grundlagen: Hydration, Islands-Architektur, Static-Site-Generation, React, Core Web Vitals.