runtime
Tu página se dibuja dos veces: una en el servidor, para que llegue rápido, y otra en el navegador, para que sea interactiva. Este error dice que las dos versiones no coinciden. El navegador esperaba encontrar una cosa y se ha encontrado otra, así que descarta lo que llegó y lo vuelve a dibujar entero.
Revisado en agosto de 2026
De paso
Analízala gratis mientras lees. Tarda treinta segundos y no toca nada.
Solo leemos lo que tu app ya le entrega a cualquier visitante.
Diagnóstico
La causa más común son los datos que cambian entre un dibujado y otro. Una fecha, una hora, un número aleatorio: el servidor pone un valor y milisegundos después el navegador calcula otro distinto. También pasa con cualquier cosa que dependa de la zona horaria del visitante, porque el servidor no la conoce.
La segunda es leer cosas que solo existen en el navegador. Si tu código consulta el ancho de la ventana o algo guardado en el navegador durante el primer dibujado, en el servidor eso no existe y el resultado es distinto por definición.
La tercera es HTML mal anidado, y es la que más despista porque el mensaje no lo dice claro. Poner un bloque dentro de un párrafo, por ejemplo, hace que el navegador reorganice la estructura por su cuenta al leerla. Entonces lo que hay en pantalla ya no es lo que el servidor mandó, y la comprobación falla.
Y un caso frecuente que no es culpa tuya: alguna extensión del navegador del visitante que modifica la página antes de que termine de cargar. Si el error solo te sale a ti y no en incógnito, es eso.
Solución
Lo primero es descartar que sea cosa de tu navegador, y lo segundo acotar qué parte de la página falla. El resto es código.
En desarrollo este error aparece de forma mucho más aparatosa que en producción, con pantallas rojas incluidas. No te asustes por la forma: mira si en la web publicada tus usuarios notan algo.
Pégaselo tal cual al agente que escribió tu app. Está redactado para que te diga lo que ha hecho, no solo para que lo haga.
Prompt para tu agente
Mi app da el error "Hydration failed". El mensaje completo de la consola es: [PEGA AQUÍ EL MENSAJE, INCLUYENDO LA DIFERENCIA QUE SEÑALA]. Necesito que hagas esto: 1. Identifica qué componente provoca el desajuste y explícame en dos frases qué está dibujando distinto el servidor y el navegador. 2. Si la causa es una fecha, una hora, un valor aleatorio o algo que dependa de la zona horaria, arréglalo de forma que el primer dibujado sea idéntico en los dos sitios y el valor dependiente del cliente se aplique después. 3. Si la causa es leer algo que solo existe en el navegador durante el primer dibujado, muévelo a después de que la página esté montada. 4. Revisa el HTML de esa zona en busca de anidamientos inválidos, como bloques dentro de párrafos, y corrígelos. 5. Comprueba si el mismo patrón se repite en otros componentes del proyecto y dime cuáles. No desactives el dibujado en servidor para toda la página ni silencies el aviso: quiero el desajuste arreglado, no escondido.
Si no sale
O el escáner de arriba ha encontrado algo y prefieres no tocarlo solo. En cualquiera de los dos casos esto ya es de los gordos y merece un humano: no es que no hayas sabido, es que has llegado al punto en que hace falta alguien que entre y lo vea por dentro.
Las 10 primeras apps son gratis. Estoy empezando y necesito casos reales. A cambio te pido permiso para contar después qué me encontré, sin decir de quién era la app ni enseñar tus datos. Sin tarjeta y sin suscripción: cuando se acaben las plazas empezaré a cobrar y lo diré aquí.
Cita a partir de mañana
Gratis
durante el lanzamiento
Elegimos hueco, miro tu app con calma y te digo qué pasa y cómo se arregla.
Hoy, en cola prioritaria
Gratis
durante el lanzamiento
Entras en la cola de hoy. Reservas hueco y lo dejamos resuelto en el día.
Quién
Marc Sala
IT Manager
No es un rating anónimo de un marketplace: es la persona que va a entrar en tu app. Reviso el código, encuentro qué falla y lo arreglo contigo delante, explicándote qué ha pasado sin jerga.
Relacionados