tl;dr: We are excited to announce Gatsby v3.0.0! This new version of Gatsby’s core framework introduces massive improvement to the developer and user experience. Upgrade now using our v2 to v3 migration guide.
Meet the latest Gatsby
Ever since the very first version of Gatsby we’ve simplified the building of performant React sites for web developers. Optimized loading, prefetching, responsive images, accessible routing, webpack configuration – we made hard problems easier so you can focus on delivering the unique requirements of your website.
Then Gatsby v1.0 brought a unified data layer that simplified working with content from multiple CMS’s. Suddenly you were launching fast sites that could charm website users as well win over content editors. But we knew there was so much more speed to be captured. We did what we could with incremental improvements throughout v2, but achieving the speed we aimed for required a bigger, bolder move. It was time for Gatsby v3.
We believe that you should have a fast development experience, whether you’re working on your personal blog or a 10,000 page client site. And we believe it’s critical that your content editors and website visitors should have an equally great experience, too. A modern website framework should solve your team’s problems, not force you into unnecessary tradeoffs.
That’s why we focused on making Gatsby v3 faster in every way that matters, for everybody – web developers, content editors, and site visitors! Read more about our new features below.
V3 for Developers: 80% speed improvement in local development experience
Previous versions of Gatsby made you wait for every image and page to be processed for your site at the start of your development session. This problem was especially painful for large, complex, or media-rich sites.
Gatsby v3 now enables by default new features that will only build pages or process images when your development server requests them. Gatsby only builds the parts of your site that have changed! No more waiting out rebuilds of your full site, including everything unrelated to an edit you’ve just made.
If you’ve worked with Gatsby on a large site in the past, this upgrade will delight you. Gatsby v3’s rapid development experience invites more tinkering, more exploration, and more creativity. Local development with Gatsby is fun again.
V3 for Content Editors: Faster build times on any service
Last year Gatsby introduced a breakthrough in static site generation with Incremental Builds. Instead of a content update kicking off a full rebuild of your entire site, we enabled a new feature that only updated pages that had new content to display. This dropped build times for sites from multiple minutes to under 10 seconds in many cases.
Content editors were especially excited. With Incremental Builds, a Gatsby project now enabled the same rapid workflow and seamless feedback loop as the all-in-one CMSs they were familiar with using. An editor could fix or add content to a page and see change live in less than a minute.
However, Incremental Builds was initially only available in Gatsby Cloud. We heard from the community that you wanted this key feature to be enabled in Gatsby open source, so the content editors you support could enjoy fast builds no matter what CI/CD service you choose.
Today, with Gatsby v3 we’re thrilled that Gatsby open-source now has Incremental Builds enabled by default, anywhere you decide to run your project!
V3 for Site Visitors: Stronger core web vitals and higher Lighthouse scores
Websites built with Gatsby have a well-earned reputation for being the fastest sites on the web. A primary reason for that is because Gatsby’s feature set simplifies image optimization.
To capture the fastest possible performance with Gatsby v3, we decided that an overhaul of Gatsby Image was necessary. There were a couple of reasons driving this. First, feedback from our community indicated that, while Gatsby Image is powerful, the API can be difficult to learn. Also, new updates to Lighthouse — the tool that measures the core web vitals of a webpage — began showing lower scores for the default implementation of Gatsby Image.
We decided that there was an opportunity to release a new version of Gatsby Image that will be easier to use and make sites more performant.
Today we’re proud to announce that gatsby-plugin-image has graduated from BETA to general availability, and can now be used with your Gatsby v3 projects.
This plugin is a complete rewrite of our old implementation, and takes advantage of the latest improvements in browser technology and image file formats. The API is simpler to learn and use, with sensible configuration defaults. Read more about what’s new in our v3 release notes.
To make migration from older versions of Gatsby Image easy for you, we’ve included a codemod (see step-by-step instructions).
Put it to the test: the new gatsby-plugin-image is the most performant way to use images in React. Your site visitors will love it!
Fewer Bugs and Faster Updates
Gatsby v3 also bumps our core dependencies to the latest stable versions. That includes:
- Node 12
- webpack 5
- React 17
- GraphQL 15
- ESLint 7
This upgrade eliminates bugs you may encounter with older versions of these projects, and also unlocks new features Gatsby can leverage in future updates. For a list of specific benefits, see the detailed release notes for v3.
Gatsby has a vast community plugin ecosystem. As we release Gatsby Version 3, it’s inevitable that some plugins may not be fully compatible with the latest version. If you encounter a compatibility issue with a plugin you use, please contribute your findings to the open discussion on this topic in the Gatsby open source project discussions here in Github. We plan to squash these bugs as fast as we can identify them, so your help here is essential!
Faster builds, meet faster deploys
After we introduced Incremental Builds in Gatsby Cloud, our users let us know that the new bottleneck for publishing updates to a site now shifted to deploy times. To solve that problem we unveiled Gatsby Hosting. So now your Gatsby sites have the fastest time-to-live for when you use Gatsby Cloud.
In addition to this new feature on Gatsby Cloud, we’ve updated gatsby-plugin-gatsby-cloud, our plugin that helps you control headers and and redirects for your Gatsby v3 projects on Gatsby Cloud.
How to get started with Gatsby v3
Gatsby v3 delivers for everybody involved in creating, maintaining and enjoying a website: A faster local development experience, a faster publishing experience, and a faster site browsing experience.
We’ve worked hard to make upgrading to Gatsby v3 as seamless as possible. Follow this v2 to v3 migration guide. And if you have any questions, please ask us on our GitHub Discussion.
We think your entire team will love Gatsby v3. Now go forth and build — we can’t wait to see what you create!
Wait, there’s more! We have more exciting product announcements and launches today as part of our first-ever GatsbyConf, including brand new Gatsby Cloud Hosting.
To learn more about the newest Gatsby Cloud capabilities, register for our upcoming webinar “Achieving the Optimal Web Experience by Hosting in Gatsby Cloud” on March 23, 2021.