Hidratação incremental com @defer
Hidrate partes da página sob demanda.
Hidratação incremental com @defer é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 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.
O custo da hidratação completa
A hidratação completa inicializa todos os componentes antecipadamente. A hidratação incremental, por outro lado, hidrata partes da página sob demanda, adiando o JavaScript de cada seção até que ele seja necessário.
Baseada em defer
A hidratação incremental usa o bloco @defer com os gatilhos especiais hydrate. O servidor continua a renderizar o conteúdo, mas o cliente só o hidrata quando um gatilho é acionado.
@defer (hydrate on viewport) {
<app-comments />
}Ativando-a
Opte por ela com withIncrementalHydration() no provedor de hidratação. Isso disponibiliza os gatilhos hydrate nos modelos.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
O gatilho mais comum hidrata um bloco quando ele entra na área visível. O conteúdo abaixo da dobra permanece inativo, economizando trabalho de JavaScript até que o utilizador chegue a ele.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
Hidrate quando o utilizador interagir (clique, pressionamento de tecla) com o bloco. É ideal para componentes visíveis, mas raramente utilizados, como um painel expansível.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle and timer
Use hydrate on idle para hidratar quando o navegador estiver livre ou hydrate on timer(2s) para hidratar após um atraso. É adequado para regiões não críticas.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never mantém estático o HTML renderizado pelo servidor: ele é exibido, mas nunca envia JS para esse bloco. É ideal para conteúdo puramente visual e não interativo.
@defer (hydrate never) {
<app-footer-links />
}Diferença em relação a defer simples
Um @defer normal em um contexto de CSR mostra um espaço reservado até ser carregado. Com a hidratação incremental, o conteúdo já foi renderizado pelo servidor e está visível; o gatilho apenas controla quando a interatividade (hidratação) é iniciada.
Combinando gatilhos
É possível combinar gatilhos para que um bloco seja hidratado quando ocorrer o primeiro deles, equilibrando prontidão e economia de recursos.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Menos JS inicial
Ao adiar a hidratação de componentes pesados ou abaixo da dobra, diminui a quantidade inicial de JavaScript necessária para a interatividade, melhorando o tempo até a interatividade e o INP no caminho crítico.
Escolhendo os gatilhos com cuidado
Hidrate ansiosamente ou quando o navegador estiver ocioso os elementos interativos acima da dobra; adie os componentes abaixo da dobra e os utilizados raramente para a entrada na área visível ou a interação. Faça medições para confirmar os ganhos.
Verificação rápida
Verifique o seu conhecimento sobre hidratação incremental.
Resumo
Usou @defer (hydrate ...) com withIncrementalHydration() para hidratar ao entrar na área visível, ao interagir, quando o navegador estiver ocioso, após um temporizador ou nunca. Isso reduz o JS inicial e melhora a interatividade ao adiar a hidratação de blocos abaixo da dobra e utilizados raramente.
Perguntas Frequentes
A aula “Hidratação incremental com @defer” é grátis?
Sim — o texto completo de “Hidratação incremental com @defer” é 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 “Hidratação incremental com @defer”?
Hidrate partes da página sob demanda. 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 3 de 4.
Quanto tempo leva a aula “Hidratação incremental com @defer”?
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