O que é hidratação

Hidratação é o processo no qual o app Angular do lado do cliente reutiliza o HTML renderizado pelo servidor, anexando ouvintes de eventos e estado ao DOM existente em vez de descartá-lo e renderizá-lo novamente.

O SSR legado usava hidratação destrutiva: o cliente apagava o DOM do servidor e fazia a renderização novamente do zero. Isso causava uma oscilação visível e descartava o trabalho do servidor.

O Angular moderno realiza hidratação não destrutiva: percorre o DOM existente, associa-o à árvore de componentes e reutiliza os nós. Sem oscilação, com menos trabalho e melhor desempenho.

Reutilizar o HTML do servidor mantém o maior conteúdo visível, ajudando o LCP, e evita mudanças de layout causadas por uma nova renderização, ajudando o CLS. O app se torna interativo sem redesenhar a página.

Fase um: o servidor renderiza o HTML e o envia. Fase dois: o navegador baixa o JS, inicializa o Angular e hidrata a marcação existente para que ela se torne interativa.

A hidratação pressupõe que a árvore de componentes do cliente produza a mesma estrutura gerada pelo servidor. Se elas divergirem, o Angular informará uma incompatibilidade de hidratação.

Manipulação direta do DOM, ramificações exclusivas do navegador que alteram a marcação, aninhamento inválido de HTML e conteúdo não determinístico (como Math.random() ou Date.now() em modelos) causam incompatibilidades.

Não manipule o DOM imperativamente (por exemplo, com innerHTML fora do Angular) durante o SSR. Deixe o Angular controlar o DOM para que cliente e servidor permaneçam em concordância.

Para um componente que realmente não possa ser hidratado (como um widget de terceiros que altera o DOM), desative a hidratação dele com ngSkipHydration; o Angular renderizará novamente apenas essa subárvore.

A hidratação só se aplica quando há HTML renderizado no servidor para reutilizar. Uma aplicação CSR pura não tem nada para hidratar; a hidratação é a parte do cliente na arquitetura de SSR.

A hidratação pode ser completa (a aplicação inteira é hidratada no carregamento) ou incremental (as partes são hidratadas sob demanda). Escolher a estratégia correta é fundamental para o desempenho, como veremos nas próximas lições.

Verifique se compreendeu a hidratação.

A hidratação reutiliza o HTML do servidor no cliente sem destruí-lo, melhorando o LCP e o CLS. Surgem incompatibilidades devido a edições manuais do DOM ou a marcações não determinísticas; use ngSkipHydration como alternativa de escape. A hidratação é a parte do cliente na arquitetura de SSR.