I joined Gatsby in January of 2022. As of the publish time of this blog post, that’s still pretty recent! I had used Gatsby v2 in my previous role and knew it as a neat Javascript framework. We homerolled a deployment process and hosted it in AWS. From my perspective, Gatsby was a simple SSG framework that handled compilation of static assets, and I would handle the publishing of the assets. Prior to working here, I liked using Gatsby as a framework. I decided to research more about Gatsby and found that it has an entire suite of Cloud and Hosting offerings. (Which, seeing how cool it was, led me to apply!) It’s so much more than a framework and the team has been doing some incredible work.
Over the past year, I’ve been working on the framework squad, and one of the streams of questions we often receive is about the benefits of updating to Gatsby v4 (and soon, v5!). We often see user complaints about the experience on older versions, which motivated me to write this blog post walking everybody through all of the changes that we’ve made since then and what I wish I knew more about in my previous role. Through this writing, I hope to show the Gatsby of two years ago is not the same Gatsby we know today.
2021: The Year of Features, Content Workflows, Integrations
2021 was a year with pretty rapid velocity, and one of our internal rallying cries was “to make Gatsby Cloud the best and obvious choice [for Gatsby sites].” We did that primarily by launching some pretty powerful features, including our global CDN powered by Fastly, and the best version of Gatsby ever, Gatsby 4, with support for more flexible and powerful rendering modes like SSR (Server Side Rendering) and DSG (Deferred Static Generation). But, we did even more than that, and there are a number of launches to highlight. Let’s go quarter-by-quarter and review.
January – March: Gatsby Cloud Hosting
Hosting: In March 2021, alongside Gatsby v3, we launched Gatsby Cloud Hosting. Our goal was to minimize build times and make creating and editing content on Gatsby sites feel practically instant. It was time to own the full website workflow. To create a seamless end-to-end platform for the ultimate Gatsby experience, we’d need a Hosting platform.
Gatsby Cloud is custom-architected to deliver a fully performant Gatsby experience like no other platform can. Adding a secure global edge network powered by Fastly was the way to experience the speed at both deployment time and when serving content to our end users. We are proud to say that hosting your Gatsby website on Gatsby Cloud gives you the fastest and most reliable way to go from idea to production.
April – June: Routing and Starters
File System Routes: Since its earliest days Gatsby created individual routes for files inside the pages folder and programmatically created pages via APIs that are exposed inside gatsby-node.js. With the introduction of our new File System Route API you’re now able to move this route creation logic out of gatsby-node.js and into the file name of a file inside the pages folder. This means that for most route creation use cases you won’t need a gatsby-node.js file anymore!
This new method for creating pages and routes makes getting started with Gatsby dramatically faster and simpler, whether as an individual developer or as a team. To learn more about File System routes and see code examples, check out our blog post announcement and our reference guide.
Shopify Starter: The Shopify starter creates a store with a custom landing page, individual filtered views for each product, detailed product pages, advanced instant search and a shopping cart. All styled with CSS Modules. We’ve tried to accomplish most of what you need without getting overly opinionated and making it necessary to rip a lot of stuff out. Check it out on GitHub!
July – September: The New Gatsby Image
Gatsby Image: Built from the ground up for speed and best practices, the Gatsby Image plugin is the most performant way to use images in React. We simplified the GraphQL API for images to make it easier than ever to use. By automatically executing image optimizations for your site, your users will be able to view your content-rich sites with speed. The new plugin includes two components to display responsive images on your site. One is used for static and the other for dynamic images:
- StaticImage: Use this if the image is the same every time the component is used. Examples: site logo, index page hero image
- GatsbyImage: Use this if the image is passed into the component as a prop, or otherwise changes. Examples: Blog post hero image, author avatar
If you would like to learn how to set up the image plugins and use these components on your site, see the how-to guide.
October – December: Gatsby 4, Different Render Options, Edge Functions
Gatsby 4: In Q4 2021 we were excited to announce support for Gatsby 4, combining the control and scalability of server-side rendering with the performance of static-site generation – and creating a whole new web of possibilities. Check out our blog post to learn more about Gatsby 4.
Rendering Modes: 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.
Server Side Rendering (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.
The benefits of statically generated websites – performance, security, reliability – are now available to websites of all shapes and sizes, giving teams a new way to build and deliver digital experiences at scale.
Gatsby Functions: Functions on Gatsby Cloud are serverless functions that enable developers to easily build dynamic functionality and integrations into their site without the hassle of maintaining extra infrastructure and secrets. Now, developers can simply write their code in their Gatsby project, deploy it, and Gatsby Cloud will execute their functions on our edge network.
Writing an API method becomes as simple as:
# src/api/hello-world.js export default function handler(req, res) { return res.status(200).json({ message: "Hello, world!" }) }
Read about our launch of Gatsby Functions in our blog.
2022: The Year of Performance and Optimization
2022 has, thus far, been pretty focused on performance, quality improvements to both developers and content editors, and continuing to improve and innovate on our framework. Our goal is in 2022 to make Gatsby the fastest frontend for the headless web. While the year is not over (and we have more exciting updates coming soon), we have plenty of exciting updates to review!
January – March: Content Editors, Developer Experience, and Images
CMS Preview: When you’re building a website backed by a headless CMS, a key part of your website’s success is the day-to-day experience of content editors. One thing content editors working in headless CMSs often request is a “preview content” workflow that works as well as WordPress – where you can just click a button and see whether your content, on the page, looks like you’d expect.
We built CMS Preview into Gatsby Cloud to recreate the live preview functionality baked into coupled CMSs like WordPress and Drupal. It is the only out-of-the-box and seamless experience for headless CMSs in the Jamstack space.
How does it work? Think about Gatsby Cloud’s CMS Preview as an automatic staging environment for draft content. When content editors can easily review changes, they are more productive. Gatsby 4 has reconstructed the way our data layer connects to your favorite headless Content Management Systems to make the connection between Previews and drafted content components more reliable.
To learn more, check out a recorded demo from Gatsby’s VP of Engineering, Dustin Schau and see how CMS Preview would fit into your content workflows in our blog!
TypeScript & TypeGen: TypeScript continues to rise in popularity and satisfaction among developers as it gives them among other things type-safety for their code and better IDE completion. While Gatsby had support for writing pages with TypeScript since 2020, in Q1 2022 we added the ability to author gatsby-config and gatsby-node with TypeScript instead of CommonJS. And then – we shipped support for automatically generating TypeScript types from your GraphQL queries. Check out our How-To guides for getting started with TypesScript and how to generate TypeScript types.
Image CDN: Gatsby has always been the best front-end for your CMS. A piece of this success is Gatsby’s relentless focus on delivering content to users as quickly and seamlessly as possible. Images are usually the largest files on a site and delay page load significantly while they are pulled over the network.
We’ve built Gatsby Cloud to offer the fastest builds for Gatsby sites, and we’ve already shipped features like parallel image processing to speed up this step, but we noticed that image processing still accounted for 40% to 50% of build time. Today with Image CDN, this trade-off is no more. Users get the benefit of speedy page loads from optimized Gatsby images while developers and content editors can work faster by eliminating image processing from builds.
Compared to alternative frameworks, Gatsby sites load faster. Today, 40% of Gatsby sites pass Google’s Core Web Vitals thresholds on mobile, compared to only 23% of Next.js sites and 18% of Nuxt.js sites. Why? In large part due to optimizations in Gatsby’s image plugin. Read more in our blog post about Image CDN.
April – June: Better Starters, Faster Sites
Starters: Gatsby Starters help users get up and running in their environment as fast as possible. We want new users to have the best experience in the headless web. During Q2, our starters have been redesigned to better suit the needs of our users, and we added a Gatsby Starter Library to quickly locate a starter that suits your needs.
Site Performance: Blazing fast site performance has been a hallmark of Gatsby since its conception. Through efforts like Gatsby Cloud Hosting and the recent Gatsby Script component, we’ve been able to iterate on that performance to make it… blazing-er? Our co-founder Sam Bhagwat recently posted a comparison between Gatsby and other tooling. Gatsby is continuously on the top of the stack!
July – September: Search Engine Optimization
Gatsby Head API: To continue the trend of shipping fundamental website building blocks as part of Gatsby, we launched the Gatsby Head API. Search engines ensure that websites are found by the intended users by inspecting websites for specific bits of metadata, like title, description, and keywords. With the launch of the Gatsby Head API, it’s never been easier to improve your Search Engine Optimization game with Gatsby.
Bonus: Build Performance
Build performance has been an ongoing project and large focus of Gatsby since v1. It’s difficult to place it in a quarter, but we wanted to highlight a few of our improvements over the last couple years.
On top of Incremental Builds, which we shipped in 2020, we’ve added a number of specific updates:
- Deferred Static Generation helps defer page builds for low-priority views
- Parallel Query Running speeds up running GraphQL queries significantly
- Constant iteration behind the scenes to make improvements
In February 2022, PixelPoint CEO Alex Barashkov published a blog post measuring Gatsby projects build time using paid plans of popular hosting platforms. He found that Gatsby Cloud published content builds in 20 seconds, compared to up to 20 minutes on other platforms.
We aren’t satisfied, though – and we keep pushing on. Since that article published, we’ve launched Incremental Deploys, which would speed up deploy times another 10x (see how!). Last month our CTO and co-founder Kyle Mathews shipped a blog post: (Re-) Introducing Gatsby, A Reactive Site Generator – capturing the new paradigm.
Further Reading
There are a ton of resources within the Gatsby Blog and How-to Guides. However, if you’re interested in reading further about Gatsby’s features and use cases, here are a few recommended articles:
- Four Things People Get Wrong About Gatsby
- Six Scenarios Where Gatsby Cloud Enterprise Makes Sense
- Gatsby Case Studies
- Launch of Gatsby 3.0
- Launch of Gatsby 4.0
What’s next?
Whew. That was a lot. Surely Gatsby’s taking a break, right?
NOPE.
On top of our bi-weekly releases with consistent updates, we have a lot of very exciting things coming down the pipeline for ✨ Gatsby 5 ✨, including Partial Hydration and the Gatsby Slices API. I also hear talks of a mysterious project called “Valhalla”?
Exciting stuff! Be on the lookout in our blog for updates about what’s happening soon at Gatsby.