Angular Defer View

Deferrable views, also known as @defer blocks, reduce the initial bundle size of your application by deferring the loading of code that is not strictly necessary for the initial rendering of a page. This often results in a faster initial load and improvement in Core Web Vitals (CWV), primarily Largest Contentful Paint (LCP) and Time to First Byte (TTFB).

With Angular's defer view, developers can wrap a section of a template within a @defer block to defer its loading:

@defer {
  <large-component />
}

This ensures that the code for any components, directives, or pipes inside the @defer block is split into a separate JavaScript file and loaded only when needed, allowing the main template to render more quickly.

Key Features and Triggers of Angular Defer View

Angular defer view provides various triggers, prefetching options, and sub-blocks to manage placeholders, loading states, and error handling effectively.

Triggers
The rendering of deferred content can be controlled using specific triggers:

• idle: Renders the view when the browser is idle (default behavior).

• immediate: Renders the view immediately after the main content is loaded.

• timer(...): Delays rendering by a specified time (e.g., on timer(500ms)).

• viewport(...): Renders the view when it becomes visible in the viewport.

• interaction(...): Renders the view after user interaction, such as a click or key press.

• hover(...): Renders the view when the user hovers over an element.

• when(...): Renders the view based on a custom condition.

Managing Different Stages of Deferred Loading

Angular's @defer blocks allow developers to define sub-blocks for different stages of content loading:

• @placeholder: Displays content before the deferred section is triggered.

@defer {
  <large-component />
} @placeholder {
  <p>Loading content...</p>
}

• @loading: Shows content while deferred dependencies are loading

@defer {
  <large-component />
} @loading {
  <img alt="loading..." src="loading.gif" />
}

• @error: Provides fallback content if deferred loading fails

@defer {
  <large-component />
} @error {
  <p>Failed to load component.</p>
}

Prefetching

Angular allows prefetching to load deferred JavaScript files before the content is rendered. This can be specified using the prefetch option:

@defer (on interaction; prefetch on idle) {
  <large-component />
} @placeholder {
  <div>Placeholder content</div>
}

Best Practices for @defer Blocks

Avoid Nested Loads: Use different triggers for nested @defer blocks to prevent simultaneous loading spikes.

Minimize Layout Shifts: Ensure deferred components visible in the initial viewport do not disrupt layout stability.

To dive deeper into Angular defer view, check out the official Angular guide and start streamlining your web applications today!