Qu'est-ce que l'hydratation ?

L'hydratation est le processus par lequel le JavaScript attache l'interactivité à du HTML déjà rendu sur le serveur. Le navigateur reçoit une page complète, avec texte, images et mise en page en place, puis le framework prend le relais du balisage, branche les écouteurs d'événements et transforme la page statique en application pleinement interactive.

Définition

Dans un flux SSR ou SSG, le serveur produit le HTML et le client télécharge un bundle JavaScript qui sait gérer ce HTML par la suite. Pendant l'hydratation, le framework réconcilie son arbre de composants avec le DOM existant. Une fois l'hydratation terminée, la page se comporte comme une application monopage : les changements d'état, les transitions de route et les mises à jour de composants sont gérés dans le navigateur.

Pourquoi c'est important

L'hydratation est le pont entre un premier affichage rapide et une interactivité complète. Bien menée, les utilisateurs voient le contenu immédiatement et peuvent interagir avec en un instant. Mal menée, l'hydratation retarde l'interactivité, livre des bundles surdimensionnés et produit des comportements saccadés où la page semble prête mais ne répond pas encore aux saisies.

Variantes modernes

Les frameworks récents introduisent l'hydratation partielle, l'hydratation progressive et l'architecture en îlots, où seules les parties interactives de la page reçoivent du JavaScript. La résumabilité et les composants serveur poussent la frontière plus loin, en différant voire en éliminant l'hydratation pour le contenu qui n'en a pas besoin. Pour les vitrines de commerce, ces techniques réduisent le temps d'interactivité et améliorent les Core Web Vitals sans sacrifier la richesse des expériences.

Articles liés

Découvrir Composable Headless Frontend · Performance et Core Web Vitals.