O que é Hydration?
Definição
Hydration é o processo pelo qual o React 'anima' um HTML estático gerado no servidor, anexando event listeners e reconstruindo a árvore de componentes no cliente sem re-renderizar o DOM.
No Next.js, ocorre automaticamente após o SSR/SSG. Se o HTML do servidor divergir do cliente, o React emite warnings de mismatch e pode re-renderizar trechos inteiros.
Exemplo Prático
TypeScript
// pages/index.tsx
export default function Home({ data }: { data: string }) {
return <div suppressHydrationWarning>{data}</div>;
}
export async function getServerSideProps() {
return { props: { data: 'Servidor' } };
}Quer ver Hydration em ação em projetos reais?
Ver artigos sobre Hydration