{"id":1878,"date":"2023-12-13T05:00:00","date_gmt":"2023-12-13T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1878"},"modified":"2023-12-12T11:28:52","modified_gmt":"2023-12-12T19:28:52","slug":"prefetching-with-the-defer-block","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/prefetching-with-the-defer-block\/","title":{"rendered":"Prefetching with the @defer block"},"content":{"rendered":"\n

We’ve covered how to use @defer<\/a><\/code> to lazy-load blocks of code in our Angular v17+ applications. We also touched on the different trigger options<\/a> as well as the ability to create custom triggers with when<\/code><\/a>.<\/p>\n\n\n\n

Yet there’s more to uncover with the prefetch<\/code> option<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above code would display my-component<\/code> when the user interacts with the web page, but it would prefetch the code on idle<\/code>, meaning as soon as the browser isn’t busy doing anything else. That way, when the user starts interacting with the page, the component has already been downloaded (or is currently downloading) from the server, which speeds things up.<\/p>\n\n\n\n

The nice thing about prefetch is that it supports the same triggers<\/a> (idle<\/code>, viewport<\/code>, interaction<\/code>, hover<\/code>, immediate<\/code>, timer<\/code>) as the @defer<\/code> block, which allows for lots of different possible customizations.<\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve covered how to use @defer to lazy-load blocks of code in our Angular v17+ applications. We also touched on the different trigger options as well as the ability to create custom triggers with when. Yet there’s more to uncover with the prefetch option: The above code would display my-component when the user interacts with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,7],"tags":[],"class_list":["post-1878","post","type-post","status-publish","format-standard","hentry","category-angular","category-template-syntax"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t