Hydration

O que é

Hydration é o momento em que o JavaScript assume uma interface que já veio renderizada do servidor.

O HTML já está na tela.

O passo que falta é ligar eventos, estado e comportamento.

Quando importa

Isso importa quando você usa SSR ou qualquer estratégia em que a primeira pintura vem pronta antes do app rodar no cliente.

Sem entender hydration, é fácil olhar para a página e achar que “já carregou tudo”.

Nem sempre.

Erro comum

O erro clássico é confundir HTML visível com interface interativa.

A página pode parecer pronta e ainda assim:

• botão não responder
• estado não bater
• componente quebrar ao montar

Exemplo curto

O servidor entrega um carrinho com o total renderizado.

O usuário vê a página.

Mas só depois que o bundle carrega e faz hydration é que o botão de remover item realmente funciona.

Por que ajuda

Entender hydration ajuda a separar três coisas que muita gente mistura:

• conteúdo visível
• JavaScript carregado
• interatividade funcionando

SSR melhora a chegada. Hydration decide quando a interface realmente ganha vida.