Angular 21 de Cero a Experto / Nivel producción

@defer: cargar partes de la vista bajo demanda

Teoría20 min20 XP

El lazy loading de rutas carga PÁGINAS bajo demanda. Pero ¿qué pasa con una parte pesada DENTRO de una página que ya estás viendo —un gráfico costoso, un mapa, un editor enriquecido—? Para eso está @defer: un bloque de template que carga su contenido solo cuando hace falta (al entrar en viewport, al interactuar, tras un tiempo). Es una de las joyas de Angular moderno para el rendimiento de carga. Hoy la dominas.

Cargar la maleta cuando la necesitas

Un bloque @defer con sus estados

@defer viene con bloques auxiliares para cubrir todo el ciclo de carga:

defer.ts

@Component({
template: `
  @defer (on viewport) {
    <app-grafico-gastos [datos]="gastos()" />   <!-- pesado: solo carga al verse -->
  } @placeholder {
    <div class="placeholder">Gráfico de gastos</div>   <!-- antes de empezar a cargar -->
  } @loading (minimum 200ms) {
    <app-spinner />                              <!-- mientras descarga el código -->
  } @error {
    <p>No se pudo cargar el gráfico.</p>         <!-- si la carga falla -->
  }
`,
})
export class DashboardComponent {}

@defer — el contenido pesado, que se carga bajo demanda según el disparador.
@placeholder — qué mostrar ANTES de que empiece la carga (ligero, siempre presente).
@loading — qué mostrar MIENTRAS descarga (con minimum para evitar parpadeos).
@error — qué mostrar si la carga falla.

El componente pesado (app-grafico-gastos) y su código quedan FUERA del bundle inicial: se descargan solo cuando el disparador se cumple. La página arranca sin ese peso.

Los disparadores

Cuándo se dispara la carga

on viewport — cuando el bloque entra en el área visible (el usuario se desplaza hasta él). El más común: no cargues lo que está abajo hasta que se acerque.
on interaction — cuando el usuario interactúa con el placeholder (clic, foco). Para algo que se abre bajo demanda, como un editor o un panel de detalles.
on hover — al pasar el cursor. Para precargar justo antes de un clic probable.
on idle — cuando el navegador está inactivo (el default si no especificas). Carga oportunista sin competir con lo importante.
on timer(2s) — tras un tiempo. Para contenido secundario que puede esperar.

También puedes disparar por una condición (when laCondicion()) o precargar por adelantado con prefetch on hover. Eliges según cuándo el usuario probablemente necesitará ese contenido.

@defer vs lazy loading de rutas

¿Cuándo usarías `@defer` en lugar de lazy loading de rutas (`loadComponent`)?

Mini-reto

Diseña la página de estadísticas de "Mi Bolsillo" con @defer: 1) un gráfico pesado que cargue on viewport; 2) un panel de "análisis avanzado" que cargue on interaction cuando el usuario haga clic en un botón; 3) sus bloques @placeholder y @loading. Explica qué código queda fuera del bundle inicial y cuándo se descarga cada parte.

Qué sigue

Tu app carga solo lo necesario, cuando lo necesita. Falta asegurar que FUNCIONA y que seguirá funcionando: los tests. La próxima lección es el testing en Angular —con TestBed y Angular Testing Library— para probar tus componentes como los usa un usuario real, y lo consolidas con un mini-verificador en vivo.