Hidratación
¿Qué significa hidratar en React?
La hidratación es el proceso por el que React toma control del HTML generado en el servidor. En lugar de recrear el DOM, adjunta event listeners al HTML existente — el usuario ve contenido de inmediato mientras React lo hace interactivo.
El flujo SSR + hydration
Servidor → genera HTML estático que el navegador muestra al instante. Cliente → descarga el JS y React llama a hydrateRoot en lugar de createRoot. React recorre el HTML existente, lo compara con el árbol que generaría, y adjunta los handlers — sin repintar el DOM si todo coincide.
Hydration mismatch
Si el HTML del servidor no coincide con lo que React renderizaría en el cliente (por ejemplo, una fecha con new Date(), un valor de localStorage, o un número aleatorio), React lanza una advertencia y reconstruye ese subárbol desde cero. La solución es diferir ese contenido a un useEffect o marcar el nodo con suppressHydrationWarning.
Tropiezos comunes
- 01En Next.js App Router, los Server Components no se hidratan — solo los Client Components ('use client') necesitan hidratación.
- 02suppressHydrationWarning solo suprime el warning en el nodo marcado, no resuelve el mismatch real. Úsalo solo cuando el contenido dinámico sea esperado (timestamps, ads).
- 03Un mismatch de hydration puede provocar un flash visual si React tiene que reconstruir parte del DOM en el cliente.