Hydratation

L’hydratation est le pont entre le rendu côté serveur (SSR) et le rendu côté client (CSR). Le serveur envoie une coquille HTML statique afin que l’utilisateur voie la page immédiatement, puis le navigateur télécharge et exécute un bundle JavaScript pour « hydrater » cette coquille, rendant les boutons cliquables et les formulaires soumissibles.

Pourquoi c’est important

L’hydratation est une taxe. Pendant que le navigateur hydrate le DOM, le thread principal est bloqué. Sur un ordinateur portable haut de gamme, cela se produit en millisecondes. Sur un appareil mobile d’entrée de gamme sur un réseau lent, la page apparaîtra complètement chargée, mais si l’utilisateur appuie sur un bouton, la page semblera gelée jusqu’à ce que l’hydratation soit terminée.

Hydratation vs. Résumabilité

• Hydratation : Le navigateur doit télécharger le framework, reconstruire l’intégralité de l’arbre des composants en mémoire, et réexécuter les fonctions des composants pour savoir où attacher les écouteurs d’événements.
• Résumabilité : Le serveur sérialise l’état exact de l’application dans le HTML lui-même. Le navigateur n’a pas besoin de réexécuter le moindre code de composant ; il se contente de « reprendre » (resume) l’exécution exactement là où le serveur s’est arrêté.

Concepts Associés

• Lire le guide complet : Les performances Web en tant qu’architecture
• Voir aussi : Architecture en Îlots, Stratégie de Rendu