--- title: "Run Gatsby 4 with DSG and SSR on Netlify today | Netlify" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/2021/09/16/run-gatsby-4-with-dsg-and-ssr-on-netlify-today/" last_updated: "2026-07-14T21:02:23.000Z" --- Along with the Gatsby community, we’ve been watching the news and announcements from GatsbyCamp Fall edition with starry-eyed anticipation. On our side of the Gatsbyverse, we’ve been doing the work to ensure that Gatsby 4 will work “out of the box” on Netlify. Here’s what you need to know about [Gatsby 4](https://www.gatsbyjs.com/gatsby-4/) and how to try it out on Netlify today! ## Gatsby 4 introduces new render modes It seems that Gatsby has broken free of its static-site generator (SSG) roots and is embracing server-side rendering. In addition to SSG, Gatsby 4 introduces two new render modes—DSG and SSR—letting you balance fresh content alongside fast build and render times. ### Static Site Generation (SSG) [SSG](https://v4.gatsbyjs.com/docs/conceptual/rendering-options/#static-site-generation-ssg) is the original render mode used in all previous versions of Gatsby: every page is generated at build time. Pages are served super-fast, but for large numbers of pages build times can be slow. _Best used for: your most popular pages that don’t change often._ ### Deferred Static Generation (DSG) Many sites have lots of pages that don’t get much traffic, whether that’s old blog posts or niche reference docs. But building all of those infrequently visited pages can add substantial time to the build process. That’s when, at Netlify, we tend to recommend [Distributed Persistent Rendering](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/), to build certain pages on the fly and cache them at the edge, dramatically reducing build times for large sites. [Deferred Static Generation (DSG)](https://v4.gatsbyjs.com/docs/conceptual/rendering-options/#deferred-static-generation-dsg) seems to be Gatsby’s implementation of this same [DPR](https://github.com/jamstack/jamstack.org/discussions/549) concept! Add `defer: true` to the arguments when you create the page and it will hold off on rendering until the first user requests the page. The data is still sourced at build time and saved as a snapshot, so it doesn’t need to hit any APIs when rendering and every user will see the same page. The first user may need to wait a little longer for the page, but the rendered page is then stored so future requests are speedy. _Best used for: long-tail content and archives._ ### Server-Side Rendering (SSR) Some pages change often and need to always be up to date. Others need custom content for each user. For these types of pages, Gatsby’s old model of data sourcing at build time was not a great choice. In Gatsby 4, you now have a way to skip the Gatsby data layer for these rapidly-changing pages and hit your APIs at render time. Adding a getServerData function to the page enables [SSR mode](https://v4.gatsbyjs.com/docs/conceptual/rendering-options/#server-side-rendering-ssr), letting you deliver a unique page to each user. _Best used for: custom pages, A/B testing, and pages that change often._ ## Get started with Gatsby 4 on Netlify If you’re familiar with Netlify’s [Essential Gatsby plugin](https://www.netlify.com/blog/2021/08/18/try-the-essential-gatsby-pluginnow-with-auto-install/), you know it typically installs automatically and makes Gatsby work out of the box on Netlify with zero configuration. To support Gatsby 4, we’ve created a separate beta version of this plugin which you can manually install. To find more information and all the instructions you need, [visit the README on GitHub](https://github.com/netlify/netlify-plugin-gatsby/#readme). ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Run Gatsby 4 with DSG and SSR on Netlify today&url=https://www.netlify.com/blog/2021/09/16/run-gatsby-4-with-dsg-and-ssr-on-netlify-today//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F09%2F16%2Frun-gatsby-4-with-dsg-and-ssr-on-netlify-today%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/09/16/run-gatsby-4-with-dsg-and-ssr-on-netlify-today//) - [Bluesky](https://bsky.app/intent/compose?text=Run Gatsby 4 with DSG and SSR on Netlify today+https://www.netlify.com/blog/2021/09/16/run-gatsby-4-with-dsg-and-ssr-on-netlify-today//) * * * ### Tags - [Gatsby](/blog/tags/gatsby/) - [DPR](/blog/tags/dpr/) - [SSR](/blog/tags/ssr/) ## Keep reading ![](/_astro/d0354fe52c160a3abdfdeff297a1baf090302a3d-1600x900_Z1eDdJG.webp) News & Announcements July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz ![](/_astro/8cc710924ebf8880283553465808eac2611fd379-1600x900_Z2eTTQe.webp) News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts ## Recent posts News & Announcements July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)