react 18+ · JavaScript
El mensaje
Hydration failed because the initial UI does not match what was rendered on the server
Qué significa
El HTML que envió el servidor y lo que el navegador produjo en su primer render son distintos, así que React no pudo unir uno con otro. Usar new Date() o Math.random() durante el render, leer localStorage o dibujar según el ancho de window garantiza dos respuestas diferentes; y también lo hace un marcado que el navegador repara en silencio, como un <div> dentro de un <p>. La regla es renderizar en la primera pasada exactamente lo que renderizó el servidor y cambiarlo después de que useEffect se ejecute; el precio es que esa parte aparece un instante más tarde y no está en el HTML del servidor. React 19 expresa lo mismo como "the server rendered HTML didn't match the client" e imprime un diff de lo que difería.
El arreglo
No hay un comando de una línea. La explicación dice qué revisar.
- Lo imprime
- react 18+
- JavaScript
- 15
Los errores del navegador y de Node suelen decirte qué se rompió y no por qué el valor llegó a ser así —leíste undefined, no era una función, no era JSON—, así que el lugar del arreglo está aguas arriba de la línea que lanzó el error, y silenciar solo esa línea con ?. y valores por defecto hace que el mismo problema reaparezca más lejos y con una forma más difícil de reconocer.
Cómo leer un mensaje de error
- Lee desde la primera línea. Cuanto más abajo, más son las tripas de la herramienta; la causa suele estar arriba.
- Si hay un archivo y un número de línea, empieza ahí: no el marco superior de la pila, sino la línea más alta que nombre un archivo tuyo.
- Busca el mensaje literal, pero quita antes tus rutas y nombres de variables: eso es lo que impide que la búsqueda coincida.
- La misma condición se redacta distinto según la versión. Si los resultados no cuadran, añade el número de versión.
- Antes de pegar un arreglo, comprueba qué descarta. Algunos no se pueden deshacer.
Preguntas frecuentes
Q. ¿Qué significa «Hydration failed because the initial UI does not match what was rendered on the server»?
El HTML que envió el servidor y lo que el navegador produjo en su primer render son distintos, así que React no pudo unir uno con otro. Usar new Date() o Math.random() durante el render, leer localStorage o dibujar según el ancho de window garantiza dos respuestas diferentes; y también lo hace un marcado que el navegador repara en silencio, como un <div> dentro de un <p>. La regla es renderizar en la primera pasada exactamente lo que renderizó el servidor y cambiarlo después de que useEffect se ejecute; el precio es que esa parte aparece un instante más tarde y no está en el HTML del servidor. React 19 expresa lo mismo como "the server rendered HTML didn't match the client" e imprime un diff de lo que difería.
Q. ¿Cómo se arregla?
No hay comando de una línea. La explicación de arriba dice qué revisar.
Q. ¿Qué herramienta lo imprime?
react 18+. Está en JavaScript y el mensaje tiene 15 palabras.