Le processus par lequel le JavaScript côté client s'attache au HTML rendu par le serveur pour le rendre interactif.
L'Hydration est un concept fondamental dans les frameworks web modernes comme Next.js, Remix et Astro. Quand un serveur rend une page, il envoie du HTML statique au navigateur pour un affichage initial rapide. L'Hydration est le processus où le JavaScript du framework 'réveille' ce HTML statique en attachant des écouteurs d'événements, restaurant l'état et rendant les composants interactifs. L'Hydration Partielle optimise cela en n'hydratant que les composants interactifs.
Le serveur génère du HTML complet pour la page, incluant tout le contenu et l'état initial.
Le HTML statique est envoyé au navigateur, qui l'affiche immédiatement (First Contentful Paint rapide).
Le navigateur télécharge et parse les bundles JavaScript nécessaires à l'interactivité.
React (ou un autre framework) parcourt le DOM, attache les écouteurs d'événements et restaure l'état des composants.
Applications single-page qui servent du HTML crawlable aux moteurs de recherche tout en restant interactives.
Utilisation de l'hydration partielle pour réduire les payloads JavaScript et améliorer les Core Web Vitals.
Pages fonctionnant en HTML statique avant le chargement du JavaScript, puis ajout progressif d'interactivité.
Connaître la définition, c'est l'étape un. L'intégrer dans votre produit, c'est l'étape deux. C'est là que nous intervenons.