Der Prozess, bei dem clientseitiges JavaScript an vom Server gerendertes HTML angehängt wird.
Hydration ist ein Kernkonzept in modernen Web-Frameworks wie Next.js, Remix und Astro. Wenn ein Server eine Seite rendert, sendet er statisches HTML an den Browser für schnelle Erstanzeige. Hydration ist der Prozess, bei dem das clientseitige JavaScript dieses statische HTML 'aufweckt', indem es Event-Listener anhängt, Zustand wiederherstellt und Komponenten interaktiv macht. Partial Hydration optimiert dies, indem nur interaktive Komponenten hydriert werden.
Der Server generiert vollständiges HTML für die Seite, einschließlich aller Inhalte und des initialen Zustands.
Das statische HTML wird an den Browser gesendet, der es sofort anzeigt (schneller First Contentful Paint).
Der Browser lädt und parst die für Interaktivität benötigten JavaScript-Bundles herunter.
React (oder ein anderes Framework) durchläuft das DOM, hängt Event-Listener an und stellt den Komponentenzustand wieder her.
Single-Page-Anwendungen, die crawlbares HTML für Suchmaschinen liefern und voll interaktiv für Nutzer bleiben.
Nutzung von Partial Hydration zur Reduzierung von JavaScript-Payloads und Verbesserung der Core Web Vitals.
Seiten, die als statisches HTML funktionieren, bevor JavaScript lädt, und dann progressiv Interaktivität hinzufügen.
Die Definition zu kennen ist Schritt eins. Es in Ihr Produkt einzubauen ist Schritt zwei. Dabei kommen wir ins Spiel.