Cómo resolver el error de Hydration failed

1. Descubrimiento del problema

Mientras veía el sitio de comidas que hice, de repente encontré el siguiente problema.

Ah... No puedo soportar este tipo de problemas...

Al hacer clic, decía Hydration failed.

En resumen, significa que la página renderizada por el servidor y la página visible para el cliente son diferentes.

Se dice que las causas son diversas.

2. Documentación oficial

Documentación oficial de Nextjs señala las siguientes causas para el error de hydration:

1. Uso incorrecto de etiquetas HTML

   1. Anidación de etiqueta <p> dentro de otra <p>

   2. Anidación de etiqueta <div> dentro de <p>

   3. Anidación de <ul> o <ol> dentro de <p>

2. Uso de lógica como typeof window !== 'undefined'

3. Uso de API de navegador como window o localStorage en la lógica de renderizado

4. Uso de API dependiente del tiempo como Date() en la lógica de renderizado

5. Extensiones del navegador que modifican HTML

6. Biblioteca de CSS in JS incorrecta

7. Edge/CDN mal configurado que intenta modificar la respuesta de HTML como la minimización automática de Cloudflare

Sin embargo, por más que miraba, no encontraba ninguno de estos casos aplicables a mí.

Así que decidí depurar desde el principio.

3. Proceso de depuración

Fui comentando y guardando cada línea de código para encontrar cuál causaba el error.

Oh, por esto desarrollan en entorno dev.

Así descubrí que el error ocurría en el componente Lunch...

Lo entendí...

Así que fui al componente Lunch y comencé a comentar uno por uno nuevamente.

Resulta que la etiqueta input era la causa del hydration failed.

Probé diferentes métodos y todas las className que ocultaban elementos como scale-0, opacity-0, ¡causaban el error!

No me gustó la idea de cambiarlo y me daba pereza.

4. Solución

Ignorar este tipo de errores inútiles es la respuesta.

No es gran cosa.

Agrega el atributo suppressHydrationWarning al elemento.

Ahora, no aparece ningún error.

5. Conclusión

No había ningún caso similar al mío, por lo que pasé mucho tiempo perdido.

Al aprender a programar de forma autodidacta, a veces los problemas simples parecen dar muchas vueltas.

Espero que este artículo sea de ayuda.