Gatsby 5: An Upgrade Worth the Hype

With the release of Gatsby 5 just over a month ago, hearing praise like this from our users is music to our ears! At Gatsby, we’re extremely proud of what we’ve launched and have been loving seeing the tweets pour in over your excitement  of updating your site to the fastest Gatsby yet. After our blog posts, webinars, and full releases, I figured this would be a great time to recap what you, the community, have thought about the release so far!

Gatsby 5 in a Nutshell

Gatsby is already jam(stack)-packed with features. As the fastest framework for content-rich sites, we enable you to build faster, deploy faster, and engage faster. With the launch of Gatsby 5, we have been focusing on a few notable pieces. Let’s review!

Slice API

First off, we launched the Slice API. Gatsby can build and ship individual pieces (or Slices) of your site and only deploy those that changed. Headers, footers, and layouts no longer need a full rebuild! This means your builds to change a marketing banner can update in seconds for one component, rather than minutes for tens of thousands of pages. For a real-world scenario, read through Kassian Wren’s recent publishing on using Slices to help with i18n.

Partial Hydration

Secondly, we kicked off the beta of Partial Hydration! By utilizing bleeding-edge React technology, Gatsby can send only the necessary JavaScript to your user’s browsers, making their experience faster than ever. We’re closely following React’s Server Components feature to drive this to General Availability. While Server Components are experimental, we’ll keep this in beta. Thank you to all who have tried it out!

Head API and Script Component

Gatsby 5 also ships with two features that help you engage with your users as best as you can: the Head API and the Script Component. The Head API brings native and intuitive SEO to your site—no longer requiring third-party plugins! This helps you bring users to the right parts of your site faster. With the Script Component, your site can load faster by prioritizing the JavaScript that matters.

Speed Like No Other

On top of key, interactive features of the Gatsby framework, we’ve been hard at work making incremental improvements behind the scenes. Our CTO, Kyle Mathews, recently wrote a blog post describing How We’re Scaling Gatsby to Millions of Pages, which only happens by making a few big and a lot of small improvements over time. When Paul Scanlon upgraded his site, local builds went from 4 minutes to 3 minutes, and Gatsby Cloud builds were down to 2.5 minutes. Gatsby 5 brings the fastest Gatsby yet!

Gatsby 5 and Beyond

One of our top priorities for Gatsby 5 was to make the upgrade process as seamless as possible. We’re glad you noticed!

If you haven’t upgraded yet, head over to our Migration Guide. We believe the upgrade from Gatsby 4 to Gatsby 5 has been the easiest upgrade yet. After updating to Node 18 and React 18, the only major breaking change is a GraphQL syntax change, but we’ve provided a script to handle that update for you!

Paul Scanlon even wrote about his walkthrough of upgrading his site to Gatsby 5. Check it out.

We’re extremely excited to see the support from the community, and we’re looking forward to seeing more of what you create in the future. For many site maintainers (like Sophia Andren of candycode.com), Gatsby 5 marks a new beginning!

Shortly after Gatsby 5, we also launched the Valhalla Content Hub! One of our biggest and most loved features of Gatsby is our unified data layer, and we’re pushing it to the cloud. Soon, you’ll be able to use Gatsby plugins to source data for any app, on any platform, using any framework. Read more about the Valhalla Content Hub in our recent blog post.

If you’d like to know more about what we’ve been up to, check out my recap of Gatsby in 2021 and (pre-Gatsby 5) 2022. Want to share any projects you’ve created? Reach out to me on Twitter! I’d love to hear what crazy awesome things you create with our platform.

Until next time!