O que é hidratação? Tornando o HTML do servidor interativo
A hidratação é a etapa em que o JavaScript do lado do cliente se conecta ao HTML já renderizado, transformando uma página estática renderizada no servidor em um app interativo.
Com SSR ou SSG, o navegador primeiro recebe um HTML finalizado que pode exibir imediatamente. Mas esse HTML ainda não tem comportamento. A hidratação é o processo em que o framework JavaScript percorre o DOM existente, reconecta sua árvore de componentes a ele e configura os manipuladores de eventos. Se você errar, obtém o temido descompasso de hidratação (hydration mismatch).
Por que a hidratação é necessária
O HTML renderizado no servidor exibe conteúdo, mas não tem listeners de eventos. A hidratação permite que o framework adote a marcação existente em vez de reconstruí-la, anexando interatividade para que botões, formulários e navegação comecem a funcionar.
Descompassos de hidratação
Se o HTML produzido pelo servidor diferir do que o cliente renderizaria, a hidratação quebra. Causas comuns são o uso de valores aleatórios, timestamps ou APIs exclusivas do navegador durante a renderização. A correção é fazer com que o servidor e o cliente renderizem a mesma saída.
O custo da hidratação
- A árvore completa de componentes precisa ser executada novamente no navegador.
- Apps grandes podem parecer lentos para se tornar interativos, mesmo que pareçam prontos.
- Enviar mais JavaScript significa mais trabalho de hidratação.
Abordagens mais recentes
A hidratação parcial e progressiva hidrata apenas as partes interativas, e a arquitetura de islands hidrata componentes isolados em vez da página inteira. Isso reduz o JavaScript que precisa ser executado antes de a página ser utilizável.
Hidratação e CI/CD
A hidratação é um comportamento de runtime do navegador, mas depende de o build produzir bundles de servidor e cliente correspondentes. O CI pode se proteger contra descompassos executando o build de produção e um teste ponta a ponta que carrega uma página renderizada e confirma que ela se torna interativa sem erros de hidratação no console.
Principais conclusões
- A hidratação anexa comportamento JavaScript ao HTML renderizado no servidor.
- Descompassos entre a saída do servidor e do cliente quebram a hidratação; mantenha a saída de renderização idêntica.
- O CI pode detectar erros de hidratação com um teste ponta a ponta contra o build de produção.