Hydration & Hydration Mismatch
Hydration: tornar o HTML estático (SSR) interativo. Mismatch: HTML server diferente do que client renderiza.
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.
new Date(), Math.random(), window/document, valores que dependem do horário do client → HTML diferente entre server e client = mismatch.
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.
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.