Hydration & Hydration Mismatch
Hydration: tornar o HTML estático (SSR) interativo. Mismatch: HTML server diferente do que client renderiza.
Definição
Hydration é o processo de 'attachar' os event listeners do React ao HTML pré-renderizado pelo servidor. Hydration Mismatch ocorre quando o HTML do servidor difere do que o client renderizaria — React precisa descartar e re-renderizar, perdendo a vantagem do SSR.
Problema → Solução
Problema
new Date(), Math.random(), window/document, valores que dependem do horário do client → HTML diferente entre server e client = mismatch.Solução
useEffect para código client-only. suppressHydrationWarning em casos pontuais. Em RSC, cookies()/headers() para valores dinâmicos. dynamic({ ssr: false }) para componentes 100% client.Dica de entrevista
Tip
Sempre que ver 'Hydration failed' no console: identifique o que difere entre server e client. Datas, IDs aleatórios e localStorage são as causas mais comuns.Código
// ❌ Hydration mismatch
function Comp() {
return <div>{new Date().toLocaleTimeString()}</div>;
// server: 14:23:01
// client: 14:23:02 (diferente)
}
// ✅ Solução: useEffect
function Comp() {
const [time, setTime] = useState(null);
useEffect(() => setTime(new Date().toLocaleTimeString()), []);
return <div>{time}</div>; // server: vazio, client: hora
}
// ✅ Solução: dynamic import sem SSR
const ClientOnly = dynamic(() => import('./Comp'), { ssr: false });Perguntas de entrevista
Q.Como debugar hydration mismatch?▾
A.Console mostra qual elemento difere. Causas comuns: 1) new Date() inline. 2) typeof window check incorreto. 3) localStorage no render. 4) Componentes que dependem de viewport. 5) Math.random() para keys.
Q.useId resolve mismatch de IDs?▾
A.Sim. useId gera IDs estáveis entre server e client (sequência baseada na árvore React), evitando mismatch ao usar IDs em labels, ARIA, etc.
Q.Selective Hydration ajuda como?▾
A.Com Suspense + Streaming, partes podem ser hidratadas independentemente. Mismatch em uma parte não quebra a página inteira — apenas aquele boundary é re-renderizado client-side.
Termos relacionados
29/122← →