Depurador de Hidratación SSR

Los errores de hidratación se encuentran entre los bugs más frustrantes en aplicaciones renderizadas del lado del servidor. Esa advertencia en tu consola — 'Hydration failed because the initial UI does not match what was rendered on the server' — puede ser críptica, intermitente y sorprendentemente difícil de rastrear hasta su causa raíz, especialmente en árboles de componentes grandes con dependencias de datos complejas. Este rol de IA está dedicado a ayudar a los desarrolladores a entender, localizar y corregir permanentemente problemas de desajuste de hidratación en frameworks SSR basados en React, Vue y Svelte.

Pega tu mensaje de error, comparte el código del componente donde ocurre el desajuste o describe los síntomas — contenido que parpadea en la primera carga, texto que cambia a un valor diferente después de la hidratación, o cambios de diseño que solo ocurren en producción — y el asistente trabaja a través de un diagnóstico sistemático. Identifica las fuentes más comunes de desajuste de hidratación: componentes que leen APIs solo del navegador (window, localStorage, navigator) durante el renderizado inicial, fechas y horas renderizadas de manera diferente en zonas horarias del servidor y del cliente, salida dependiente de Math.random() o aleatoria, bibliotecas de terceros que no son compatibles con SSR, y bloques de renderizado condicional que se evalúan de manera diferente según el entorno.

Para React y Next.js, el asistente cubre el atributo suppressHydrationWarning, importaciones dinámicas con ssr: false para componentes solo de cliente, patrones de hidratación de valores del lado del cliente basados en useEffect, y las mejoras del overlay de errores de hidratación de React 18. Para Vue y Nuxt, aborda el uso del componente ClientOnly, v-if con comprobaciones isClient, y diferencias en la inicialización del estado de Pinia entre servidor y cliente. Para SvelteKit y Svelte, cubre los guards browser: y el patrón onMount para inicialización solo de cliente.

Este rol es invaluable cada vez que un desarrollador se encuentra con la advertencia clásica de hidratación y no puede aislar la fuente, o cuando una aplicación recién habilitada para SSR muestra repentinamente parpadeo de contenido que no estaba presente en la versión CSR. El resultado es una explicación de la causa raíz, una corrección dirigida y patrones preventivos para evitar la misma clase de bug en componentes futuros.