{"id":340106,"date":"2021-05-11T07:33:10","date_gmt":"2021-05-11T14:33:10","guid":{"rendered":"https:\/\/css-tricks.com\/?p=340106"},"modified":"2021-05-14T05:28:14","modified_gmt":"2021-05-14T12:28:14","slug":"distributed-persistent-rendering-dpr","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/distributed-persistent-rendering-dpr\/","title":{"rendered":"Distributed Persistent Rendering (DPR)"},"content":{"rendered":"\n<p>Like Jamstack, Netlify is coining this term.<\/p>\n\n\n\n<p>If your reaction is: <em>great, a new thing I need to know about and learn<\/em>, know that while Distributed Persistent Rendering (DPR) does involve some new things, this is actually a push toward simplification and leverages ideas as old as the web is, just like Jamstack.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>It&#8217;s probably helpful to hear it right from Matt Biilmann, CEO of Netlify:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Keeping It Simple \u2013 Mathias Biilman, React Summit Remote Edition 2021\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/p-ZWytPX1fo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In that short video, he makes the point that React started out very simple and solved a lot of clear problems with JavaScript architecture and, as time goes on and it tries to solve more use-cases, it&#8217;s getting a lot more complicated and risks losing the appeal it once had in its simplicity. <\/p>\n\n\n\n<p>Jamstack, too, faces this problem. The original simplicity of it was extremely appealing, but as it grows to accommodate more use-cases, things get complicated.<\/p>\n\n\n\n<p>One of those complications are sites with many-thousands of pages. Sites like that can have really slow build times. It&#8217;s nice to see frameworks tackle that (Google &#8220;Incremental Builds {Your Favorite Framework}&#8221;), but heck, if you change one link in a site footer, you&#8217;re re-building the whole site based on that one change. <\/p>\n\n\n\n<p>So instead of building many-thousands of pages during a build, say you just&#8230; didn&#8217;t. Until that page is requested once, anyway. That&#8217;s <def>DPR<\/def>. <\/p>\n\n\n\n<p><a href=\"https:\/\/www.zachleat.com\/web\/eleventy-cloud-authors-pages\/\" rel=\"noopener\">Here&#8217;s Zach Leatherman<\/a> doing that. He finds a spot on his site that generates some 400 pages on each build and tells Eleventy that instead of building it during the normal build process, defer it to the cloud (literally a lambda will run and build the page when needed).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Let\u2019s defer generating 400+ pages in our build using Eleventy Cloud and On-demand Builders\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/bENDCw9aLV0?start=412&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Deferring those 400 pages saves seven seconds in the build. Say your site is more dramatic, like 16,000 pages. Scratch pad math says you are saving four minutes there. It&#8217;s not just time either, although that&#8217;s a biggie. I think of all the electricity and long-term storage you save building this way.<\/p>\n\n\n\n<p>Here&#8217;s <a href=\"https:\/\/www.netlify.com\/blog\/2021\/04\/29\/keeping-it-simple-at-react-summit\/\" rel=\"noopener\">the Netlify blog post<\/a>: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>Just like coining the term \u201cJamstack\u201d didn\u2019t mean inventing an entirely new architecture from scratch, naming this concept of \u201cDistributed Persistent Rendering\u201d doesn\u2019t mean we\u2019re creating a brand new solution.<\/p><p>The term \u201cDPR\u201d is new to us, but in a lot of ways, we\u2019re taking inspiration from solutions that have worked in the past. We\u2019re simply reworking them to fit with modern Jamstack best practices.<\/p><\/blockquote>\n\n\n\n<p>I like that it&#8217;s not like this entirely new thing. I&#8217;m sure Netlify&#8217;s implementation of it is no joke, but for us, it&#8217;s very easy to think about:<\/p>\n\n\n\n<ul><li>Some pages are pre-built as usual<\/li><li>Some pages are not built (deferred)<\/li><li>When the non-built pages are requested for the first time, <em>then<\/em> they are built and cached so they don&#8217;t need to be built again.<\/li><\/ul>\n\n\n\n<p>That&#8217;s it, really. <\/p>\n\n\n\n<p>It reminds me of how old WordPress caching plugins used to work. When a page was requested for the first time it would run the PHP and MySQL queries and all that, then save the result as an <code>.html<\/code> file to the disk to serve subsequent requests. Not new, but still efficient. <\/p>\n\n\n\n<p>The trick to a DPR architecture on Netlify is using their (beta) On-Demand Builders, so <a href=\"https:\/\/www.netlify.com\/blog\/2021\/04\/14\/faster-builds-for-large-sites-on-netlify-with-on-demand-builders-now-in-early-access\/\" rel=\"noopener\">here&#8217;s the blog post <\/a>that explains everything and will get you to the docs and such.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like Jamstack, Netlify is coining this term. If your reaction is: great, a new thing I need to know about and learn, know that while Distributed Persistent Rendering (DPR) does involve some new things, this is actually a push toward simplification and leverages ideas as old as the web is, just like Jamstack.<\/p>\n","protected":false},"author":3,"featured_media":340339,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[579,18938,1401,1415],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/dpr-blog-post-top-graphic.jpg?fit=1600%2C400&ssl=1","jetpack-related-posts":[{"id":284137,"url":"https:\/\/css-tricks.com\/stackbit\/","url_meta":{"origin":340106,"position":0},"title":"Stackbit","date":"March 12, 2019","format":false,"excerpt":"This is not a sponsored post. I requested a beta access for this site called Stackbit a while back, got my invite the other day, and thought it was a darn fine idea that's relevant to us web nerds \u2014 particularly those of us who spin up a lot of\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/stackbit.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295944,"url":"https:\/\/css-tricks.com\/random-notes-from-a-jamstack-roundtable\/","url_meta":{"origin":340106,"position":1},"title":"Random Notes from a JAMstack Roundtable","date":"September 23, 2019","format":false,"excerpt":"I hosted a JAMstack roundtable discussion at Web Unleashed this past weekend. Just a few random notes from that experience. I was surprised at first that there really is confusion that the \"M\" in Jamstack stands for \"Markdown\" (the language that compiles to HTML) rather than \"Markup\" (the \"M\" in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":277080,"url":"https:\/\/css-tricks.com\/netlify\/","url_meta":{"origin":340106,"position":2},"title":"Netlify","date":"October 2, 2018","format":false,"excerpt":"It's always fun to watch developers discover Netlify for the first time. It's so easy. One way to do it is to just literally drag and drop a folder onto them and it will be online. Even better, connect a Git repo to a Netlify site and tell it what\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/netlify.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298412,"url":"https:\/\/css-tricks.com\/jamstack-cmss-have-finally-grown-up\/","url_meta":{"origin":340106,"position":3},"title":"JAMstack CMSs Have Finally Grown Up!","date":"November 15, 2019","format":false,"excerpt":"This article is based on Brian's presentation at Connect.Tech 2019. Slides with speaker notes from that presentation are available to download. In my experience, developers generally find the benefits of the JAMstack easy to comprehend. Sites are faster because the resources are static and served from a CDN. Sites are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/connecttech-artwork.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286226,"url":"https:\/\/css-tricks.com\/netlify-functions-for-sending-emails\/","url_meta":{"origin":340106,"position":4},"title":"Netlify Functions for Sending Emails","date":"April 23, 2019","format":false,"excerpt":"Let's say you're rocking a JAMstack-style site (no server-side languages in use), but you want to do something rather dynamic like send an email. Not a problem! That's the whole point of JAMstack. It's not just static hosting. It's that plus doing anything else you wanna do through JavaScript and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/email-open-cloe.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":293262,"url":"https:\/\/css-tricks.com\/my-favorite-netlify-features\/","url_meta":{"origin":340106,"position":5},"title":"My Favorite Netlify Features","date":"July 25, 2019","format":false,"excerpt":"\ud83d\udc4b Hey folks! Silvestar pitched this post to us because he is genuinely enthusiastic about JAMstack and all of the opportunities it opens up for front-end development. We wanted to call that out because, although some of the points in here might come across as sponsored content and Netlify is\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/netlify-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/dpr-blog-post-top-graphic.jpg?fit=1024%2C256&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340106"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=340106"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340106\/revisions"}],"predecessor-version":[{"id":340587,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340106\/revisions\/340587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/340339"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=340106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=340106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=340106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}