Hydratation

En développement web, l’hydratation est un processus utilisé dans les applications web rendues côté serveur (Server-Side Rendering – SSR). Lorsqu’une page est initialement servie, le HTML statique est généré sur le serveur et envoyé au client. Ensuite, une fois la page chargée, le JavaScript du côté client prend le relais pour « hydrater » cette page statique, en liant les composants interactifs à leur logique JavaScript.

L’hydratation permet de combiner les avantages du rendu serveur (rapidité de chargement initial et optimisation pour le SEO) avec ceux des applications à page unique (Single-Page Applications – SPA) pour fournir des fonctionnalités dynamiques. Cela permet aux applications web d’être interactives tout en réduisant le temps de chargement initial.

Le processus fonctionne ainsi :

  1. Le serveur génère et envoie une version HTML complète de la page.
  2. Le JavaScript côté client s’exécute, « hydrate » le HTML en le connectant aux fonctionnalités interactives (comme les boutons, formulaires, etc.).
  3. La page devient interactive sans nécessiter un rechargement complet du contenu.

L’hydratation est couramment utilisée avec des frameworks comme React, Vue.js, ou Next.js pour offrir des expériences utilisateurs fluides tout en optimisant les performances de chargement et le SEO.

Articles associés

Technique
6 décembre 2019

Javascript Responsable : 1ère partie

Préambule JavaScript Responsable est la formulation de Jeremy Wagner, consultant en web performance du Minnesota, qui est certes moins provocatrice que notre No Fucking JS...
Lire la suite de Javascript Responsable : 1ère partie