Inicio › Tecnología › Hidratación
La hidratación es el proceso mediante el cual una página web qué llegó al navegador ya renderizada como HTML estático, generada en el servidor para qué se vea rápido y sea indexable, se activa en el cliente: el framework de JavaScript, ya sea React, Vue o Svelte, toma ese HTML existente, reconstruye internamente el mismo árbol de componentes y le añade los manejadores de eventos y el estado interactivo, sin volver a generar el HTML desde cero. El objetivo es combinar lo mejor de dos mundos: una primera pantalla visible casi al instante gracias al renderizado en servidor, y una aplicación totalmente interactiva después. Cuando la hidratación tarda o bloquea el hilo principal, aparece un problema típico: la página se ve lista pero los clics no responden todavía.
Cuando una página se genera ya montada en el servidor y llega al navegador con todo el texto visible, pero los botones aún no funcionan, la hidratación es el momento en qué el código JavaScript despierta esa página y hace qué los clics, formularios y menús empiecen a responder de verdad.
Una tienda online qué usa Next.js genera cada página de producto en el servidor para qué aparezca en Google indexada con todo su contenido y cargue rápido en el primer pantallazo; en el navegador, React hidrata esa página añadiendo la funcionalidad del botón de añadir al carrito y los filtros interactivos. Si el JavaScript tarda en cargar en una conexión lenta, el usuario puede ver el botón pero notar qué no responde durante uno o dos segundos, justo el intervalo entre el HTML visible y la hidratación completa.
Porque el HTML llegó ya renderizado desde el servidor y se muestra de inmediato, pero el JavaScript necesario para qué los elementos sean interactivos aún se está descargando o ejecutando en segundo plano.
Es una técnica donde solo los componentes qué realmente necesitan interactividad se hidratan, por ejemplo un carrusel o un formulario, dejando el resto de la página como HTML puro sin JavaScript asociado, lo qué reduce el trabajo del navegador y acelera el tiempo hasta qué la página responde.
Un desajuste de hidratación ocurre cuando el HTML generado en el servidor no coincide exactamente con lo qué el framework espera renderizar en el cliente, por ejemplo por una fecha formateada de forma distinta en cada lado, y el framework muestra un aviso o reconstruye ese fragmento desde cero.