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 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 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, to build certain pages on the fly and cache them at the edge, dramatically reducing build times for large sites. Deferred Static Generation (DSG) seems to be Gatsby’s implementation of this same DPR 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, 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, 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.
