¿Qué es la hidratación?

La hidratación es el proceso mediante el cual JavaScript añade interactividad a un HTML que ya se renderizó en el servidor. El navegador recibe una página completa con texto, imágenes y maquetación ya colocados, y a continuación el framework toma el control del marcado, conecta los event listeners y convierte la página estática en una aplicación totalmente interactiva.

Definición

En un flujo SSR o SSG, el servidor genera el HTML y el cliente descarga un paquete de JavaScript que sabe cómo gestionar ese HTML a partir de ese momento. Durante la hidratación, el framework reconcilia su árbol de componentes con el DOM existente. Una vez completada la hidratación, la página se comporta como una aplicación de página única: los cambios de estado, las transiciones de ruta y las actualizaciones de componentes se gestionan en el navegador.

Por qué importa

La hidratación es el puente entre un primer renderizado rápido y la interactividad completa. Hecha bien, los usuarios ven el contenido de inmediato y pueden interactuar con él casi al instante. Hecha mal, retrasa la interactividad, envía paquetes sobredimensionados y produce un comportamiento tosco en el que la página parece lista pero todavía no responde a la interacción.

Variantes modernas

Los frameworks recientes introducen hidratación parcial, hidratación progresiva y la arquitectura de islas, en la que solo las partes interactivas de la página reciben JavaScript. La resumabilidad y los componentes de servidor llevan esta idea aún más lejos, retrasando o incluso eliminando la hidratación para el contenido que no la necesita. Para los storefronts de comercio, estas técnicas reducen el tiempo hasta la interactividad y mejoran los Core Web Vitals sin sacrificar experiencias ricas.

Relacionado

Explora Composable Headless Frontend · Performance and Core Web Vitals.