Hidratação

A hidratação é a ponte entre a Renderização no Lado do Servidor (SSR) e a Renderização no Lado do Cliente (CSR). O servidor envia uma casca HTML estática para que o usuário veja a página imediatamente, e então o navegador baixa e executa um pacote JavaScript para “hidratar” essa casca, tornando os botões clicáveis e os formulários enviáveis.

Por Que Importa

A hidratação é um imposto. Enquanto o navegador está hidratando o DOM, a thread principal é bloqueada. Em um laptop de ponta, isso acontece em milissegundos. Em um dispositivo móvel de baixo custo em uma rede lenta, a página parecerá totalmente carregada, mas se o usuário tocar em um botão, a página parecerá congelada até que a hidratação seja concluída.

Hidratação vs. Resumibilidade

• Hidratação: O navegador deve baixar o framework, reconstruir toda a árvore de componentes na memória e reexecutar as funções dos componentes para descobrir onde anexar os ouvintes de eventos.
• Resumibilidade: O servidor serializa o estado exato da aplicação no próprio HTML. O navegador não precisa reexecutar nenhum código de componente; ele simplesmente “resume” a execução exatamente de onde o servidor parou.

Conceitos Relacionados

• Leia o guia completo: Desempenho Web como Arquitetura
• Veja também: Arquitetura de Ilhas, Estratégia de Renderização