¿Cómo solucionar el error "Hydration failed because the initial UI does not match" en React?

Nunca uses valores que cambian entre servidor y cliente (Date, Math.random, window, localStorage) directamente en el render — muévelos a useEffect. No anides elementos HTML de forma inválida ( dentro de , dentro de ). En Next.js App Router, marca con 'use client' cualquier componente que use hooks de React. Revisa el HTML generado por IA: suele mezclar Server y Client Components.

Solución: Error Hydration Mismatch en React / Next.js

¿Por qué ocurre?

El HTML generado en el servidor (SSR) no coincide con el HTML que React genera en el cliente. React espera que ambos sean idénticos. Las causas más comunes son: usar `Date.now()` o `Math.random()` en el render, acceder a `window` o `localStorage` sin comprobar el entorno, extensiones del navegador que inyectan HTML, y código generado por IA que mezcla Server Components y Client Components sin las directivas correctas.

Solución paso a paso

Solución rápida — Envuelve el código que depende del cliente:

'use client';
import { useState, useEffect } from 'react';export function ClientOnly({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return <>{children};
}

// Úsalo así:

Si el error viene de Date, Math.random u otros valores dinámicos:

// ❌ Esto genera valores diferentes en servidor y cliente
function Greeting() {
  return Hora: {new Date().toLocaleTimeString()};
}
// ✅ Muévelo a un useEffect
function Greeting() {
  const [time, setTime] = useState('');
  useEffect(() => {
    setTime(new Date().toLocaleTimeString());
  }, []);
  return 
Hora: {time || 'Cargando...'};
}

Si el error viene de HTML inválido (muy común con IA):

// ❌ La IA suele generar esto —  no puede contener 
Texto 
bloque
 más texto
// ✅ Correcto
Texto bloque más texto

Si ocurre con Next.js App Router y Server/Client Components:

// ❌ Importar un Client Component sin 'use client'
// Este archivo ES un server component por defecto
import { useState } from 'react'; // 💥 Error// ✅ Añade la directiva al principio del archivo
'use client';
import { useState } from 'react';

Si nada funciona — suprime el warning temporalmente para depurar:

// Solo para depuración, NO en producción
{contenidoDinámico}

Cómo evitarlo en el futuro

Nunca uses valores que cambian entre servidor y cliente (Date, Math.random, window, localStorage) directamente en el render — muévelos a useEffect. No anides elementos HTML de forma inválida (<p> dentro de <p>, <div> dentro de <p>). En Next.js App Router, marca con 'use client' cualquier componente que use hooks de React. Revisa el HTML generado por IA: suele mezclar Server y Client Components.