Building upon the success of previous Gatsby features, Gatsby 5 boasts impressive, bleeding-edge technology to supercharge your sites. Over the past year (like every other), we have been obsessed with build and site performance. We recently reviewed our most impactful major changes over the past seven quarters in our Gatsby’s Greatest Hits post, and we’re not slowing down as we enter the final stretch of 2022. In this post, we’ll provide a high level overview of all the impressive features we’ve cooked up for Gatsby 5. If you’d like a deeper dive into the details, check out our Gatsby 5 release notes.
Want to get started right away? Here’s our Gatsby 4 to Gatsby 5 migration guide!
Our VP of Engineering, Dustin Schau, is fond of saying “Make it Work. Make it Right. Make it Fast.” Gatsby 5 is all of those things, but what we’re most proud of is the improvements to “Make it Fast.”. Fast to build with Slices and fast to run with a number of innovations, such as Partial Hydration, the Script component, and many others. In this post, we’ll dive into a few of them, so that you can continue to be confident that you’re choosing the fastest frontend for the headless web in Gatsby.
With that, let’s check out what’s new in Gatsby 5!
Gatsby Cloud also offers an optimization for Enterprise plans that speeds up Slice builds significantly. We proved the benefit of Slices in our tests of a 10,000 page site backed by Contentful. Our data here is just measuring Gatsby Cloud to show the impact of Slices, since other cloud solutions were upwards of twenty minutes and visually minimized the impact. On Gatsby Cloud, we saw an improvement of two whole minutes for code changes to a shared header.
— Nikan Shahidi, CEO at Webstacks
With a site of our size, minor changes like updating a footer or marketing banner used to result in a complete rebuild of our site. With Slices in Gatsby 5 speeding up Incremental Builds, we’re expecting to save hours of time waiting for builds every week.
Partial Hydration (Beta)
— Justin Smith, Developer at Intralox
It’s always been a challenge to performantly add scripts to websites. Script execution in the browser is blocking by default, and we as developers are responsible for implementing many useful scripts in our web pages without degrading the experience for the end-user.
In Gatsby 5, a built-in Script component can be used that aids in loading scripts performantly. The Script component offers a convenient way to declare different loading strategies, and a default loading strategy that gives Gatsby users strong performance out of the box. Whether you want to leave the heavy lifting of managing scripts to Gatsby or you want maximum flexibility and control, the Gatsby Script component is a great tool for the job.
To ensure that websites are found by the intended users, search engines inspect websites for specific bits of metadata, like title, description, and keywords. Historically, Gatsby developers have been instructed to rely on third-party libraries like react-helmet to do this. Gatsby has built-in solutions for most things like Images or Scripts that our users have come to love. Gatsby 5 includes the Head API, which offers native support for SEO, as well.
GraphiQL is the GraphQL integrated development environment (IDE). It’s a powerful (and all-around awesome) tool you’ll use often while building Gatsby websites. When running
gatsby develop, you can use GraphiQL to run queries, get code samples, and preview your data by going to
localhost:8000/___graphql. GraphiQL released a major version earlier this year, and Gatsby ships with GraphiQL v2 by default. With a polished UI, query tabs, dark mode, and Gatsby-specific code samples, developers can work with Gatsby’s data layer in brand new ways.
Incremental Builds and Deploys
Speed is critical to maintaining a healthy developer and content editor experience in a framework. Behind the Scenes of the new Slice API are two pieces of incredibly fast technology: Incremental Builds and Incremental Deploys. By knowing exactly what changed in your site, Gatsby can build only what changed to save you time. After the build is finished, we can also only deploy what changed. We’ve seen savings on these build times as much as 1000x and 10x, respectively. We’re so confident in these changes being hugely important to teams and their workflows that we even feel that these kinds of changes move Gatsby into a new category of building, that of Reactive Site Generation, or RSG for short.
Gatsby 4 to Gatsby 5 is our easiest major upgrade yet (we’re serious). While we’ve reviewed our high level features for this release, if you’d like a more detailed list, check out our Gatsby 5 release notes.
Thank you to our wonderful community for supporting us and each other. If you’ve written a blog, recorded a podcast, or directed a video production about the new features in Gatsby 5, please reach out to me on Twitter (@0xJ05H) with a link to your coverage, and I’ll add it to these list of resources!