A principal vantagem é otimizar o tamanho do bundle inicial da sua aplicação, isso já acontecia quando usamos lazy loading nas rotas, você pode perceber que ao entrar em uma rota usando lazy loading o navegador irá carregar aquela parte de javascript somente quando for a hora, essa possibilidade se amplia com o @defer
, e ai está a maior diferença, antes usando apenas uma condição *ngIf
o seu componente ainda sim iria fazer parte do bundle.
Além disso, com defer você possui maior controle do seu template, pois só será carregado o conteúdo quando um gatilho for disparado, o framework oferece vários gatilhos já prontos: on idle, on viewport, on interaction, on hover, on immediate, on timer:
@defer (on hover) {
<app-my-component></app-my-component>
}
Mas você também pode criar o seu customizado usando when:
@defer (when condicaoBollean) {
<app-my-component></app-my-component>
}
Junto ao @defer
, você pode usar também algumas condições especiais como @placeholder
, @loading
, @error
, esse blocos especiais ajudam a você dar um feedback adequado enquando a condição e o carregamento não forem concluídos.
when
e oon
, que inclusive podem ser utilizados juntos, dando um maior poder e controle quanto a renderização dos elementos no template de uma forma tardia.