Qué es y cómo funciona
Cuando una página se renderiza en servidor o se genera de forma estática, el navegador recibe HTML y lo muestra enseguida. Pero ese HTML, por sí solo, es una fotografía: un botón se ve, pero pulsarlo no ejecuta nada. La hidratación es el paso en el que el JavaScript de la página se descarga, recorre ese HTML ya existente y le conecta el estado y los manejadores de eventos para que responda.
Durante la hidratación, el framework reconstruye en memoria el árbol de componentes y comprueba que coincide con el HTML que llegó. Si no coincide, por ejemplo porque un componente pinta una fecha o un valor aleatorio distinto en servidor y en cliente, aparece un error de desajuste de hidratación.
El coste es proporcional a la cantidad de JavaScript que hay que descargar, analizar y ejecutar. Por eso se han desarrollado técnicas para hidratar menos: componentes de servidor que no envían su código al navegador, carga diferida de los componentes pesados o arquitecturas de islas, en las que solo se hidratan las zonas realmente interactivas.
Por qué importa
Es la razón por la que una web puede parecer rápida y comportarse como lenta. El contenido aparece pronto, pero si el navegador está ocupado hidratando, los primeros clics tardan en responder. Eso empeora la interacción que perciben los usuarios, que es lo que mide la métrica INP de Core Web Vitals, aunque el tiempo de carga visual sea bueno.
Para una empresa, el efecto se nota sobre todo en móviles de gama media, donde el procesador tarda más en ejecutar JavaScript. Controlar cuánto código se hidrata, qué librerías de terceros se cargan y qué componentes necesitan realmente interactividad suele ser más eficaz que optimizar imágenes cuando el problema es la respuesta a los toques.
Un ejemplo
Una página de producto muestra galería, descripción, reseñas y un botón de añadir al carrito. Si todo es un único componente cliente, el navegador hidrata la página entera, incluida la descripción, que es texto fijo. Si solo el botón y la galería son interactivos y el resto se queda como componente de servidor, se envía mucho menos JavaScript y el botón responde antes tras la carga.
Errores y confusiones frecuentes
- Confundir hidratación con renderizado. El renderizado produce el HTML; la hidratación lo activa en el cliente. Son pasos distintos con costes distintos.
- Marcar como componente cliente todo el árbol por comodidad. Cada componente cliente añade JavaScript que hay que descargar y ejecutar.
- Generar contenido distinto en servidor y cliente, como fechas locales, aleatorios o lectura del almacenamiento del navegador, lo que provoca errores de desajuste.