Cómo solucionar el error \"Text content does not match server-rendered HTML\" en Next.js App Router

Cuando Next.js App Router genera HTML en el servidor y React construye el árbol de React durante la primera renderización en el navegador, puede ocurrir un error si el HTML del servidor no coincide con el HTML de React. Este error de consistencia de estado rompe la experiencia del usuario y provoca comportamientos inesperados. La causa principal es el uso de lógica no determinista como Date(), Math.random(), localStorage, window o APIs del navegador directamente en el renderizado.

Además, el uso de typeof window !== undefined como condición de renderizado también puede causar el problema. Otras causas incluyen detección automática de iOS mediante metaetiquetas, extensiones del navegador y configuraciones de Edge/CDN que modifican el HTML. Para solucionar el error "Text content does not match server-rendered HTML" en Next.js App Router, se deben seguir estos pasos: 1.

Eliminar toda lógica no determinista del renderizado, utilizando useEffect para actualizar el estado en lugar de determinar el render inicial. 2. Desactivar la detección automática de iOS mediante la adición de la metaetiqueta format-detection en head. 3. Utilizar suppressHydrationWarning únicamente como último recurso para contenido que debe cambiar, pero solo en el nodo inmediato.

4. Verificar configuraciones de Edge/CDN para asegurar que no modifiquen el HTML. Una vez aplicados estos pasos, el HTML generado tanto en el servidor como en el cliente será idéntico en la primera renderización, resolviendo el error.