{"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<p>We&#8217;ve covered how to use <code><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-lazy-loading-with-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">@defer<\/a><\/code> to lazy-load blocks of code in our Angular v17+ applications. We also touched on the different <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-trigger-options-for-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">trigger options<\/a> as well as the ability to create <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/customized-deferred-loading-with-when\/\" target=\"_blank\" rel=\"noopener\" title=\"\">custom triggers with <code>when<\/code><\/a>.<\/p>\n\n\n\n<p>Yet there&#8217;s more to uncover with the <a href=\"https:\/\/angular.dev\/guide\/defer#prefetching\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>prefetch<\/code> option<\/a>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-13-1024x330.png\" alt=\"\" class=\"wp-image-1879\" style=\"width:658px;height:auto\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-13-1024x330.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-13-300x97.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-13-768x248.png 768w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-13.png 1190w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The above code would display <code>my-component<\/code> when the user interacts with the web page, but it would prefetch the code on <code>idle<\/code>, meaning as soon as the browser isn&#8217;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<p>The nice thing about prefetch is that it supports the same <a href=\"https:\/\/angular.dev\/guide\/defer#triggers\" target=\"_blank\" rel=\"noopener\" title=\"\">triggers<\/a> (<code>idle<\/code>, <code>viewport<\/code>, <code>interaction<\/code>, <code>hover<\/code>, <code>immediate<\/code>, <code>timer<\/code>) as the <code>@defer<\/code> block, which allows for lots of different possible customizations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;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&#8217;s more to uncover with the prefetch option: The above code would display my-component when the user interacts with [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1878"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1878\/revisions"}],"predecessor-version":[{"id":1880,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1878\/revisions\/1880"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}