El bloque defer es una característica de las vistas diferibles de Angular que permite aplazar la carga de ciertos contenidos o componentes grandes hasta que se necesiten. Sirve como contenedor para el contenido diferido y proporciona varios disparadores para controlar cuándo y cómo se carga el contenido.
Con el bloque defer, puedes optimizar el tiempo de carga inicial de tu aplicación aplazando la carga de componentes, módulos o dependencias no críticos o a los que se accede con menos frecuencia. Esto puede ayudar a mejorar el rendimiento, acelerar el renderizado inicial de tu página, e incluso obtener mejores resultados de Core Web Vitals, mejorando específicamente métricas como Largest Contentful Paint (LCP) y Time to First Contentful Paint (FCP) al diferir cuándo se cargan las cosas.
Los nuevos bloques
Hay tres bloques disponibles que forman parte del bloque @defer y que puedes utilizar para gestionar las diferentes etapas del proceso de carga:
@placeholder : Este bloque se muestra mientras se carga el contenido diferido. Sirve como marcador de posición temporal para el contenido diferido.
⭐ Utiliza este bloque para mostrar loading o placeholders para indicar que el contenido se está cargando ⭐
@loading : Este bloque se renderiza cuando se está cargando el contenido diferido.
⭐ Utilízalo para mostrar indicadores o mensajes de carga personalizados ⭐
@error: Este bloque se renderiza si hay un error cargando el contenido diferido.
⭐ Utilízalo para gestionar y mostrar mensajes de error o contenido alternativo cuando pasa un error ⭐
Triggers
Por otro lado, podrá utilizar los siguientes disparadores dentro de los bloques de aplazamiento:
on idle: Esta condición de disparo se cumple cuando el estado del navegador pasa a ser idle. Se suele utilizar para aplazar la carga hasta que el navegador no esté ocupado con otras tareas.
on viewport: Esta condición se cumple cuando el contenido aplazado entra en la ventana gráfica, es decir, se hace visible para el usuario. Es útil para la carga diferida de contenido que está por debajo del pliegue o que no es visible inmediatamente.
on interaction: Esta condición se cumple cuando el usuario interactúa con el marcador de posición o con los elementos que lo rodean. Resulta útil cuando se desea cargar el contenido diferido tras la interacción del usuario, como al hacer clic o al pasar el ratón por encima.
on hover: Esta condición de activación se cumple cuando el usuario pasa el ratón por encima del marcador de posición o de los elementos que lo rodean. Es útil para la carga diferida de contenido que debe cargarse cuando el usuario pasa el ratón por encima.
on immediate: Esta condición de activación se cumple inmediatamente, sin ningún retraso. Es útil para situaciones en las que se desea cargar el contenido diferido inmediatamente sin esperar.
on timer: Esta condición de activación se cumple después de un retardo especificado. Permite establecer un temporizador y cargar el contenido diferido una vez transcurrido el tiempo especificado.
Ahora pasemos a la parte buena y veamos un ejemplo de cómo podemos utilizar bloques y disparadores juntos para mejorar el rendimiento de la aplicación.
Mejorando la carga inicial
https://medium.com/media/70d8b5690226f8af5caa037ba39436ec/href
Este primer ejemplo muestra cómo mejorar el tiempo de carga inicial de una aplicación de carga infinita (como Facebook o Instagram) renderizando sólo los componentes que son visibles en la ventana gráfica.
Para evitar cargar todas las imágenes y datos de cada subcomponente, definimos el bloque defer para que se cargue sólo si el componente está dentro visible o en el viewport. Además, lo configuramos para que realice una precarga siempre que esté inactivo.
Dado que estamos retrasando la carga de los componentes y cargando sólo lo que el usuario necesita, estas dos configuraciones nos ayudarán a mejorar los resultados de Largest Content Paint (LCP) de Core Web Vitals.
Además, estamos utilizando los sub-bloques @loading y @placeholder para garantizar que el proceso de carga de datos sea lo más fluido posible. Se puede utilizar el sub-bloque @placeholder para evitar el parpadeo de la pantalla al cargar los componentes reales, proporcionando un componente de dimensiones similares al que se mostrará al final. El sub-bloque @loading puede utilizarse para añadir otro componente, como un component esqueleto o un remplazo para representar el estado de carga.
Aquí, en el GIF de abajo, puedes ver cómo en el OnInit del componente post es llamado después de que bajamos en la pagina, y el componente se hace visible.
Mejorar la carga de los sub-componentes
https://medium.com/media/1a3fd688bfb0a97de5f8b25edf90fd1c/href
En tus aplicaciones, puede haber casos en los que un componente contenga sub-componentes hijos que requieran datos o imágenes adicionales, y en el ejemplo anterior, puedes ver cómo el uso del bloque @defer hará que esto sea más eficiente.
Lo primero que tenemos es el bloque @defer que está configurado para cargarse sólo cuando la sección con el nombre de #commentsSection esta visible y también cuando tenemos comentarios en ese post. Esto nos asegurará que no empezamos a cargar datos para componentes que no están realmente visibles o que no necesitamos realmente cargar datos.
Los sub-bloques que usamos aquí son similares a los del primer ejemplo, pero en este caso, el sub-bloque @loading tiene alguna configuración para que sólo se muestre cuando la carga del componente esté tardando más de 100 ms y vamos a mostrarlo durante un mínimo de 500 ms. Esto ayudará a evitar parpadeos o mostrar componentes demasiado rápido, lo que puede confundir al usuario.
El último sub-bloque que estamos usando aquí es el @error y este puede ser mostrado en casos donde quieras presentar un componente específico cuando hubo un error recuperando datos.
En el GIF de abajo, se puede ver que el componente de comentarios se muestra cuando se desplaza hacia abajo, pero también es sólo aplicable a los mensajes que tienen comentarios.
TL;DR;
En este artículo hablaremos de la función de bloque @defer de Angular, que permite optimizar el tiempo de carga inicial de la aplicación aplazando la carga de determinados contenidos o componentes hasta que sea necesario. Exploramos los tres bloques disponibles — @placeholder, @loading y @error — y los distintos disparadores, como on idle, on viewport y on interaction.
En los ejemplos o casos de uso podrás ver cómo se pueden utilizar los bloques de aplazamiento para mejorar el rendimiento de la aplicación, concretamente mejorando los resultados de Largest Contentful Paint (LCP) de Core Web Vitals y proporcionando un proceso de carga de datos sin interrupciones.
Mejorando los tiempos de carga con el @defer block en Angular was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.