Qué es la hidratación
Hidratación es el proceso por el cual el JavaScript de cliente activa la interactividad sobre HTML pre-renderizado. El término viene de la metáfora: el HTML seco se vuelve interactivo al añadirle JavaScript agua.
Cómo funciona típicamente
- Servidor (o build) genera HTML estático
- Navegador descarga el HTML y lo muestra inmediatamente (rápido)
- Navegador descarga el bundle JS
- JavaScript hidrata: añade event listeners, conecta state, etc.
- La página ahora es interactiva
Problema clásico de hidratación
En React/Next.js tradicional (Pages Router), TODA la página se hidrata aunque solo un componente sea interactivo. Si tu página es 95% texto estático + 5% formulario:
- Sin hidratación: HTML carga rápido (0,3s LCP)
- Con hidratación full: JavaScript baja (200KB+) y bloquea el thread
Resultado: una landing que debería cargar en 0,3s tarda 2-3s en ser interactiva.
Soluciones modernas
Astro: Islands architecture
Solo hidratas los componentes que necesitan interactividad (islas). El resto queda como HTML estático.
<MyStaticComponent /> <!-- HTML, sin hidratación -->
<MyInteractiveForm client:load /> <!-- Hidratado al cargar -->
<MyChat client:visible /> <!-- Hidratado al hacer scroll -->
<MyAds client:idle /> <!-- Hidratado en idle -->React Server Components (RSC)
Next.js App Router introduce componentes que se ejecutan solo en servidor, sin JavaScript en cliente. Solo se hidratan los componentes marcados con 'use client'.
Qwik
Framework con resumability en vez de hidratación: el HTML incluye marcadores que permiten al JS arrancar exactamente donde lo dejó el servidor, sin re-ejecutar todo.
Directivas de hidratación en Astro
| Directiva | Cuándo se hidrata | Uso típico |
|---|---|---|
client:load | Al cargar la página | Solo si es crítico inmediato (menú principal) |
client:idle | Cuando el navegador está libre | Chat, widgets secundarios |
client:visible | Cuando el componente entra en viewport | Formularios bajo el pliegue, herramientas |
client:media | Según media query | Solo desktop, solo móvil |
client:only | Sin SSR, solo cliente | Componentes que requieren window/document |
Mejor práctica
Por defecto, NO hidratar. Solo añadir client:* cuando un componente realmente necesite interactividad. El resto debe quedar como HTML estático.
Cómo afecta a Core Web Vitals
- Hidratación pesada al cargar: mata LCP e INP
- Hidratación bajo demanda (visible/idle): LCP excelente
En IMPERO, todas las herramientas usan client:visible para no impactar LCP de la landing.