Use Angular’s New Deferrable Views Now
The Angular community has asked for an intuitive, built-in method to lazy load components, directives, and pipes. In Angular v17, we’ve created Deferrable Views, a new feature that will make the process of defer loading dependencies significantly more intuitive. We built the deferrable views feature alongside the new control flow syntax using the same “@-syntax”. Our goal is for it to be ergonomic and familiar when using this new syntax in your component templates.
Deferrable views help you optimize your initial bundle size and improve the initial load of your application by allowing you to declaratively lazy load portions of your template until they are needed later. For example, you may need to lazy load a large component that is below the fold and want it to load once it enters the viewport. Or maybe you’d like to load a component based on a click interaction. Both cases and more are possible natively in a template using deferrable views in v17. This means that component code will be in a separate bundle that’s loaded when it is convenient for your application.
Lazy loaded routes still work just as they did before. Lazy loading at the route level offers a great way to break up your application chunks on a per-route basis. You can combine lazy loaded routes with deferrable views to maximize chunk optimization for your application. This is the best route to an optimized app.
Quick highlights
We are excited about deferrable views offering a declarative experience allowing developers to express their clear intent in the template. No need to manage verbose dynamic imports, use intersection observers, or add event handlers. Deferrable views have this entirely built-in and managed for you. We created a set of integrated triggers that can be used by themselves, together, or combined with a custom condition to specify exactly how and when you’d like the deferred loading to occur. Here’s an example:
<blog-post-cmp />
@defer (on viewport) {
<comments />
} @placeholder {
<img src=”placeholder.png” alt=”placeholder” />
}This example also uses the built-in placeholder block to customize what is presented before deferred loading occurs. There’s also a loading and error block to further customize what is displayed, offering the flexibility to provide the best user experience with your application.
Prefetching
Deferrable views offer more than just lazy loading. It also has native support for prefetching, so the resources will be available faster than if they were solely defer loaded. Prefetching supports all the same triggers and custom conditions and enables you to fully customize your application deferred loading experience. Consider the following example:
<blog-post-cmp />
@defer (on viewport; prefetch on idle) {
<comments />
} @placeholder {
<img src=”placeholder.png” alt=”placeholder” />
}The comments component will render right away when it enters the viewport instead of waiting to fetch first. Isn’t that awesome? We think so.
Less Boilerplate
You don’t have to worry about managing dependencies when using deferrable views. All of that dependency management work happens behind the scenes. All you have to do is write your @defer block and use your components like you normally would inside that block. Angular is automatically extracting the dependencies under the hood and creating dynamic imports for you. This means less boilerplate to write to make deferred loading work in your application.
Looking to the future
Deferrable views are a strong foundation for us to build upon. One of the first things we’re exploring is how we can teach defer blocks to wait for component async initialization. The community has expressed interest in how we can make deferrable views more integrated with a data fetching story. Specifically, having defer blocks trigger once data has finished fetching. We’re currently fetching more data on the best solution to this problem. In addition to that, deferrable views are a great building block for progressive hydration.
Deferrables views are currently in developer preview. As developers adopt this new feature, we’ll be collecting feedback and improving it along the way with a plan to exit developer preview in a future release.
If you’d like to learn more, check out the deferrable views guide on angular.dev and visit the tutorial to learn right in your browser.
Andrew Kushnir from the Angular Team co-authored this blog post.
