¿Qué significa Hydration Failed?

El error de hidratación de React 18 ocurre cuando el HTML enviado desde el servidor no coincide con el árbol de componentes que React intenta renderizar en el cliente. React espera que el renderizado inicial del cliente sea idéntico al renderizado del servidor para poder 'adoptar' los nodos DOM existentes.

Por qué ocurre

• •Renderizar valores dinámicos como new Date() o Math.random() que difieren entre servidor y cliente.
• •Leer APIs solo del navegador como window o localStorage durante el renderizado inicial.
• •Renderizar contenido basado en cookies o estado de autenticación que difiere entre entornos.
• •Usar un componente de terceros que no es seguro para SSR.

Ejemplos

function Timestamp() {
  // Different on server vs client
  return <p>{new Date().toLocaleTimeString()}</p>;
}

Error: Hydration failed because the initial UI does not match what was rendered on the server.

"use client";
import { useEffect, useState } from "react";

function Timestamp() {
  const [time, setTime] = useState<string | null>(null);
  useEffect(() => {
    setTime(new Date().toLocaleTimeString());
  }, []);
  return <p>{time ?? "Loading..."}</p>;
}

Errores relacionados

• Invalid Hook Call
• Too many re-renders
• useEffect con dependencia faltante