As the most impactful release of the Gatsby web framework to date, Gatsby 4 introduces a host of new features that will not only make building and deploying your websites faster, but provide blazing speed (and an enhanced user experience) for your site visitors. You can find an exhaustive, point-by-point list of absolutely everything new and updated in the official Gatsby 4 release notes, but I thought it would be helpful to present an overview of just a few of the Gatsby 4 features that will have the biggest impact on your web development efforts.
I’ll add links to other Gatsby 4 content by my colleagues throughout this post, and also continue to update this post as new content becomes available. There’s also been some excellent content from the Gatsby and Jamstack community about Gatsby 4, so I link to those content sources at the end of this post as well.
Gatsby 4 is a massive release for us, with Gatsby co-founder Kyle Mathews perhaps putting it best:
“Gatsby 4 is the most powerful version of Gatsby yet. We’ve made Gatsby 10x faster to build and deploy by opening up two new rendering modes, adding support for Parallel Query Processing, and making a host of other optimizations and improvements.”
With my preamble and scene-setting out of the way, let’s get started with our quick overview of the new features in Gatsby 4!
Deferred Static Generation (DSG)
Introduced in Gatsby 4, Deferred Static Generation (DSG) is a new page rendering option in the Jamstack world that cuts down long build times. DSG gives developers more options to perfectly balance developer experience and user experience. With Deferred Static Generation, Gatsby defers non-critical page generation until a user requests it, allowing the most important pages to be built and deployed to the edge instantly. This is especially effective with larger sites that have lots of infrequently accessed content (i.e., like old blog pages, rarely-accessed reference pages, and other infrequently accessed content). Learn more about Deferred Static Generation and how Deferred Static Generation can affect SEO.
Server-Side Rendering (SSR)
One of the most significant new features in Gatsby 4 is that it now supports rendering pages at run-time, or Server-Side Rendering (SSR). SSR generates requests from the server during run-time, with every page request sent to the web server returned to the site visitor’s browser with the latest page data. Gatsby supporting SSR means that developers can now choose how content is generated, opening up new possibilities for what Gatsby can help build. Learn more about server-side rendering.
Parallel Query Running
Gatsby 4 also introduces support for Parallel Query Processing, which introduces a multithreaded approach to one of the most compute-intensive parts of the website build process. In essence, Gatsby 4 now takes advantage of all of those extra processor cores in the latest CPUs to help you crush lethargic build times and make them beg for mercy. (Well, to at least make them finish faster so your content producers and site visitors are happy!) Learn more about Parallel Query Running.
Rebuilt Deploy Infrastructure
We’ve also made a host of other improvements under the hood of Gatsby 4, particularly when it comes to our deploy infrastructure. Adding support for new features like SSR and DSG to Gatsby Cloud required us so make a number of changes that help speed up build and deploy times, which can translate into a significant reduction in deploy times for larger websites with thousands (and tens of thousands) of pages, with some tests reducing deployment times by up to 90%.
New CMS Integration APIs
We’re excited to announce updates to the way content is sourced in the framework and previewed in Gatsby Cloud. Gatsby 4 makes it more reliable to view preview content from your headless CMS and gives you a better UI to understand when and where your draft content is in the build lifecycle.
React 18 Future-Proofing
We’ve always worked closely with the React team and framework, and that extends to support for React 18. (Find out more about the React 18 release in a post entitled “The Plan for React 18” on the React community site.) We’ve already started adding support for React 18 features in earlier releases of the Gatsby framework — for example, Gatsby 3.9 introduced support for React 18’s new SSR architecture — and we’ll keep adding more React 18 support in future releases.
More Coverage of New Features in Gatsby 4
Gatsby VP of Development Dustin Schau gives his take on many of the new features in his “What’s New and What’s Coming” video presentation for GatsbyCamp, and I have it on good authority that Gatsby co-founder Kyle Mathews (@kylemathews) will be publishing a blog post with more details behind the big deployment speed-ups in Gatsby 4 in the very near future.
In the meantime, you can also catch Gatsby experts Ward Peeters (@wardpeet), Patrick Sullivan (@pragmaticpat), and Dan Giordano (@itemprop_DannyG) live on Twitch as they discuss some of the latest Gatsby 4 features on Oct. 21st at 10am ET (and in the Gatsby Twitch channel afterwards).
If you’ve written a blog, recorded a podcast, or directed a video production about the new features in Gatsby 4, please reach out to me on Twitter (@jeffjames3) with a link to your coverage, and I’ll add it to the community coverage section below.
Gatsby 4 Coverage from the Community
- Blog Post | What’s New in Gatsby v4 – by Deborah Emeni (@DeborahEmeni)
- Video Podcast | Abhi Aiyer & Ward Peeters: Gatsby 4 and the Jamstack Endgame – by Shawn Wang (@swyx)
- Blog Post | What Gatsby v4 brings to your static site? – by Ondrej Polesny (@ondrabus)