¿Qué son las Deferrable Views? – Angular 19

En el desarrollo de aplicaciones web modernas, la optimización del rendimiento es esencial para ofrecer una experiencia de usuario fluida y eficiente. Con la introducción de Angular 19, se ha incorporado una característica innovadora: las Deferrable Views. Esta funcionalidad permite diferir la carga de componentes hasta que sean realmente necesarios, mejorando significativamente el rendimiento de la aplicación.

¿Qué son las Deferrable Views?

Las Deferrable Views, implementadas mediante el bloque @defer, permiten a los desarrolladores especificar secciones del template que se cargarán de forma diferida. Esto significa que ciertos componentes, directivas o pipes se cargarán solo cuando se cumplan condiciones específicas, reduciendo el tamaño inicial del paquete y mejorando métricas clave como el Largest Contentful Paint (LCP) y el Time to First Byte (TTFB).

 

Requisitos para Utilizar defer

Para implementar @defer correctamente, es necesario cumplir con los siguientes requisitos:

• Componentes Standalone: Tanto el componente que contiene el bloque @defer como el contenido diferido deben ser componentes standalone. Esto facilita la carga diferida y la gestión de dependencias.
• Sin Importaciones Adicionales: El uso de @defer no requiere importar módulos adicionales, ya que es una funcionalidad integrada en Angular 19.

 

Bloques Opcionales en defer

Para mejorar la experiencia del usuario durante la carga diferida, @defer permite definir bloques opcionales:

• @placeholder: Contenido mostrado antes de que se inicie la carga diferida.
• @loading: Contenido mostrado mientras el componente diferido se está cargando.
• @error: Contenido mostrado si ocurre un error durante la carga diferida.

 

Triggers Disponibles en defer

Los triggers determinan cuándo se debe cargar el contenido diferido. Angular 19 ofrece varios triggers:

• on idle: Carga el contenido cuando el navegador está inactivo. Es el trigger predeterminado.
• on viewport: Carga el contenido cuando el elemento entra en el viewport, utilizando la API IntersectionObserver.
• on interaction: Carga el contenido tras una interacción del usuario, como un clic o una pulsación de tecla.
• on hover: Carga el contenido cuando el usuario pasa el cursor sobre el elemento o lo enfoca.
• on timer: Carga el contenido después de un tiempo especificado.
• on immediate: Carga el contenido inmediatamente después de que el cliente ha terminado de renderizar.

Estos triggers pueden combinarse utilizando condiciones OR para mayor flexibilidad.

Uso de la Opción when en defer

La opción when permite definir una expresión booleana que, al evaluarse como verdadera, activa la carga del contenido diferido. Esta opción puede combinarse con otros triggers para crear condiciones más complejas.

Implementación de Prefetch en defer

El prefetching permite precargar el código del contenido diferido antes de que se active el trigger principal, mejorando la rapidez de carga cuando el contenido es finalmente requerido. Por ejemplo, se puede configurar el prefetch para que ocurra cuando el navegador esté inactivo y la carga completa cuando el usuario interactúe con un elemento.

Limitaciones de las Deferrable Views

Aunque las Deferrable Views ofrecen ventajas significativas, presentan algunas limitaciones:

• Elementos Proyectados: Los elementos proyectados como contenido no funcionan como triggers.
• Proveedores en Inyectores de Entorno: Los componentes diferidos no pueden inicializar proveedores en los inyectores de entorno.

 

Ejemplo Práctico

A continuación, se presenta un ejemplo de cómo implementar @defer en un componente Angular:

@defer (on viewport) {
  <post-comments />
}
@placeholder {
  <p>Placeholder for comments</p>
}
@loading {
  <p>Loading comments...</p>
}
@error {
  <p>Failed to load comments</p>
}

 

En este ejemplo:

• @defer (on viewport): El componente <post-comments /> se cargará cuando entre en el viewport.
• @placeholder: Se muestra mientras el componente aún no se ha activado.
• @loading: Se muestra mientras el componente se está cargando.
• @error: Se muestra si ocurre un error durante la carga del componente.

Conclusión

Las Deferrable Views en Angular 19 representan un avance significativo en la optimización del rendimiento de las aplicaciones web. Al permitir la carga diferida de componentes y ofrecer una variedad de triggers y opciones de prefetching, los desarrolladores pueden crear aplicaciones más eficientes y con una mejor experiencia de usuario.

Para profundizar en este y otros temas avanzados de Angular, te invito a explorar mi curso en Udemy: Angular 19.
En este curso, cubrimos desde los fundamentos hasta características avanzadas, incluyendo el uso de @defer y otras técnicas para optimizar tus aplicaciones Angular.