Hydration
¿Qué es Hydration?
Hydration es el proceso de activar una interfaz ya renderizada en HTML para que pase a ser interactiva en el navegador. Primero se genera el contenido visible y después JavaScript “conecta” eventos, estado y comportamiento.
¿Para qué sirve Hydration?
Hydration sirve para:
- Mostrar contenido rápido desde el primer render.
- Añadir interactividad sin esperar a reconstruir toda la página.
- Combinar SSR o SSG con experiencia dinámica.
- Mejorar percepción de rendimiento.
Ejemplo básico
Una página puede llegar al navegador ya renderizada con un botón visible, pero ese botón no responde hasta que el JavaScript se hidrata y conecta el evento click.
Características de Hydration
- Suele aparecer en frameworks modernos.
- Relaciona HTML generado en servidor con JavaScript en cliente.
- Puede tener coste si se hidratan demasiados componentes.
- Es clave en SSR, SSG e islands architecture.
¿Dónde se usa?
- En React, Next.js, Astro, Vue o Nuxt.
- En aplicaciones con renderizado híbrido.
- En sitios donde importan rendimiento e interactividad.
Conclusión
Hydration permite que una interfaz rápida de cargar también pueda volverse interactiva después. Entenderla ayuda a tomar mejores decisiones de rendimiento en frontend moderno.