📊 Capítulo 19: Deferrable Views (@defer)

Especialização em Frontend com Angular

🗺️ O Carregamento Sob Demanda Granular com @defer

flowchart TD
    PAGE["Página Principal Carregada (Bundle Inicial Leve de < 50KB)"]
    --> DEFER{"@defer (on viewport / on interaction / on idle)"}
    DEFER --> |"Condição NÃO atingida"| PLACEHOLDER["@placeholder { <div class='skeleton'>Carregando...</div> }"]
    DEFER --> |"Usuário rola a tela e atinge o viewport!"| DOWNLOAD["Baixa o chunk JS do componente pesado sob demanda"]
    DOWNLOAD --> LOADING["@loading (minimum 200ms) { <app-spinner /> }"]
    DOWNLOAD --> SUCCESS["Renderiza @Composable / Componente Pesado com Sucesso!"]
    DOWNLOAD --> |"Falha de rede"| ERROR["@error { <p>Falha ao carregar componente.</p> }"]

    style PAGE fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style DEFER fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style PLACEHOLDER fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style DOWNLOAD fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style LOADING fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style SUCCESS fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
    style ERROR fill:#ffebee,stroke:#d32f2f,stroke-width:2px

🎯 Slide 1: A Sintaxe Completa do @defer

@defer (on viewport; prefetch on idle) {
  <app-grafico-pesado [dados]="relatorio()" />
} @placeholder {
  <div class="skeleton-chart">Aguarde...</div>
} @loading (after 100ms; minimum 300ms) {
  <app-spinner />
} @error {
  <p>Erro ao carregar o gráfico. Verifique sua conexão.</p>
}

🎯 Slide 2: Gatilhos (Triggers) Disponíveis

• on viewport: Baixa e renderiza quando o elemento entrar na área visível da tela.
• on interaction: Baixa quando o usuário clicar ou focar no placeholder.
• on hover: Baixa quando o mouse passar por cima.
• on timer(5s): Baixa após 5 segundos.
• when condicao(): Gatilho booleano reativo baseado em um Signal!

🎯 Slide 3: Impacto nos Core Web Vitals

• O @defer reduz o tamanho do bundle inicial em mais de 60%, disparando a pontuação do Google Lighthouse (LCP e INP) para 100!