Ativando a hidratação completa
Ative a hidratação para evitar uma nova renderização.
Ativando a hidratação completa é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Ativando a hidratação
A hidratação completa é ativada adicionando provideClientHydration() aos provedores da aplicação. O esquema ng add @angular/ssr faz isso por si.
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};Onde isso fica
Isso deve ficar nos provedores de appConfig do navegador, a mesma configuração usada para inicializar o cliente. A configuração do servidor é mesclada sobre ela com provideServerRendering().
O que significa completa
A hidratação completa (ansiosa) hidrata toda a árvore de componentes assim que o JavaScript é carregado e o Angular é inicializado. Todos os componentes se tornam interativos ao mesmo tempo.
Reprodução de eventos
Ative withEventReplay() para que as interações do utilizador ocorridas antes da conclusão da hidratação sejam capturadas e reproduzidas depois, evitando cliques perdidos em dispositivos lentos.
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
providers: [provideClientHydration(withEventReplay())]Cache de transferência HTTP
Com a hidratação ativada, as respostas GET do HttpClient provenientes do servidor são armazenadas em cache no TransferState por padrão, para que o cliente não busque os mesmos dados novamente após a inicialização.
provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))Verificando a hidratação
Abra o console no modo de desenvolvimento. O Angular registra estatísticas da hidratação (componentes hidratados e nós reutilizados). A ausência de avisos de incompatibilidade significa que a hidratação foi concluída corretamente.
// Angular hydrated 24 component(s) and 187 node(s)Corrigindo incompatibilidades
Se vir erros de incompatibilidade NG0500, procure modelos não determinísticos ou edições manuais do DOM. Torne a marcação determinística para que as saídas do servidor e do cliente coincidam.
Protegendo APIs do navegador
O código que acessa window ou localStorage durante a renderização inicial pode alterar a marcação entre o servidor e o cliente. Proteja-o com isPlatformBrowser ou execute-o após a inicialização da visualização.
if (isPlatformBrowser(this.platformId)) {
this.width = window.innerWidth;
}Contrapartida da hidratação completa
A hidratação completa é simples, mas baixa e executa antecipadamente o JavaScript de todos os componentes. Em aplicações grandes, isso pode atrasar a interatividade, um problema que a hidratação incremental resolve.
i18n e hidratação
A hidratação funciona com o i18n do Angular, mas certifique-se de que o conteúdo traduzido seja determinístico. Localidades diferentes entre o servidor e o cliente causam erros de hidratação.
Verificação de produção
Antes de publicar, compile para produção, sirva a saída de SSR e confirme na rede e no console que a hidratação é executada sem incompatibilidades e que o cache de transferência impede novas buscas duplicadas.
Verificação rápida
Verifique o seu conhecimento sobre hidratação completa.
Resumo
Ativou a hidratação completa com provideClientHydration(), adicionou withEventReplay() para cliques anteriores à hidratação, utilizou o cache de transferência HTTP, protegeu as APIs do navegador e verificou uma hidratação sem problemas. A hidratação completa é simples, mas carrega todo o JS antecipadamente.
Perguntas Frequentes
A aula “Ativando a hidratação completa” é grátis?
Sim — o texto completo de “Ativando a hidratação completa” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Ativando a hidratação completa”?
Ative a hidratação para evitar uma nova renderização. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Ativando a hidratação completa”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O que é hidratação
- Ativando a hidratação completa
- Hidratação incremental com @defer
- Medindo os principais indicadores da Web