Hydration

Definição

Hydration é o processo em que o navegador recebe uma página HTML já renderizada pelo servidor (via SSR ou SSG) e a transforma em uma aplicação interativa ao executar o JavaScript associado.
Ou seja, o conteúdo já está visível ao usuário, e o JavaScript entra em ação para reativar os componentes, adicionando funcionalidades como eventos, estado e navegação.

Esse processo é comum em frameworks como React, Next.js, Vue e SvelteKit.

Objetivos da Hydration

Permitir que páginas pré-renderizadas se tornem interativas no navegador.
Combinar os benefícios do SSR ou SSG (conteúdo visível rapidamente e SEO) com interfaces ricas e dinâmicas.
Reaproveitar o HTML renderizado, evitando a reconstrução completa da interface.
Evitar flickering (piscadas visuais) e reprocessamentos desnecessários.

Exemplo conceitual

O servidor gera e envia um HTML completo com conteúdo visível.
O navegador exibe esse HTML imediatamente.
O JavaScript da aplicação é carregado em segundo plano.
O framework "conecta" os componentes interativos ao HTML existente.
A página se torna responsiva a interações do usuário (cliques, navegação, formulários, etc.).

Esse processo difere do CSR puro, onde o HTML inicial é vazio ou mínimo, e todo o conteúdo é montado do zero via JavaScript.

Quando a Hydration acontece?

Hydration é ativada automaticamente quando se usa:

SSR com interatividade, como no Next.js com getServerSideProps.
SSG com componentes dinâmicos, como páginas estáticas geradas com getStaticProps.
Frameworks reativos com renderização híbrida, que combinam HTML estático e lógica reativa.

⚠️ A hydration pode impactar a performance se o bundle de JavaScript for muito grande ou carregado de forma ineficiente.

Estratégias de otimização

Hydration parcial: aplicar hydration apenas nos componentes que precisam.
Hydration progressiva: hidratar por prioridade ou por seção (ex: cabeçalho antes do rodapé).
Evitar rehydration: manter componentes puramente estáticos sem reativação desnecessária.