Gatsby has come a long way since its first release. For those who may be unfamiliar, Gatsby is a static site generator that serves the static HTML content from the server instead of using databases for every request.
Gatsby reduces the database latency as it generates the required HTML files during the build time, so everything required to load the page is already there. Each of the previous releases were focused on a specific addition to the Gatsby platform, but with version 3.0, things have gone to the next level. In this post, we will discuss the new features that have come with the new version.
The Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
In the previous versions of Gatsby, the site content was generated at the start of the development session. If your site had a lot of images, things tended to be a lot slower on the development end. This was a huge problem for complex and large projects.
In the newer version of Gatsby, it will only build the pages that are needed by the development server. This feature is enabled by default so you do not have to manually configure it.
The incremental builds feature previously introduced in the Gatsby cloud service was a popular feature among content editors for speeding up the workflow of making an edit to site content and seeing it instantly on the website. With incremental builds enabled on the cloud, Gatsby looked for the changes in the content and only built the changed parts instead of rebuilding the whole website. Because of this feature, the build times for the website were reduced to a matter of seconds.
As mentioned, the incremental builds feature was only available on Gatsby Cloud. Due to the common request from the community, this feature has now been included in the open-source version of Gatsby as well. Now every content creator can enjoy fast build times on the CI/CD service of their choice. You do not have to enable it as the new Gatsby comes with this feature by default! Let us see this feature in action.
We have the following project on Gatsby and deploying it on Netlify. Before Gatsby version 3, the incremental builds only worked for Gatsby cloud, but now, it works everywhere.
Now if you change any of the content in any part of your website, you can expect an instant update to your website without a complete rebuild. This is the power of incremental builds which is also included in Gatsby version 3.
Gatsby sites are very fast when it comes to first page loading time, but were still lacking some performance issues due to how images were handled. In the previous versions, community members started to see lower lighthouse scores for their websites. This was mainly due to the Gatsby image plugin which used a different implementation under the hood, which was not ideal for the modern web.
In this version of Gatsby, this plugin has been rewritten entirely to restore the lighthouse scores. The images will be used in the best way possible to boost the speed of your website and increase the lighthouse score in a meaningful way.
The beta status of gatsby-plugin-image has been removed and now it is available for general use. Hence, this new plugin provides you the most performant way of serving the images in your Gatsby project.
// this is less performant compared to the plugin below
import Img from "gatsby-image"
export function Image() {
return <Img src="https://image.com /image.png" alt="image" />
}
// this is more performant compared to the plugin above
import { GatsbyImage } from "gatsby-plugin-image”
export function Image() {
return <GatsbyImage src="https://image.com /image.png" alt="image" />
}
GraphQL fragments are removed in the new version of Gatsby and the resolver directly accepts arguments. This is a nicer code syntax to work with that is available in the new version of Gatsby.
import { graphql } from "gatsby"
export const query = graphql`
{
file(relativePath: { eq: "images/example.jpg" }) {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
}
import { graphql } from "gatsby"
export const query = graphql`
{
file(relativePath: { eq: "images/example.jpg" }) {
childImageSharp {
gatsbyImageData(layout: FIXED)
}
}
}
After the introduction of the Gatsby cloud, users’ saw a major bottleneck. The sites with the new updates took a huge amount of time in the deployment time. The deployment time for medium to large sites increased up to 30 minutes. To solve this problem, the team has launched the new Gatsby hosting which enables the fastest time-to-live for the websites using the Gatsby cloud. The users who are currently using the new Gatsby Hosting saw an increase up to 50% in deployment time. After deploying the website on Gatsby cloud, you will see the hosting option as follows:
To check the performance of Gatsby Hosting, a sample project was deployed on it and Netlify for the sake of comparison:
The results show Gatsby being 5x faster when it comes to deploying projects! In addition to this, Gatsby has released a new plugin gatsby-plugin-gatsby-cloud which helps to redirect the Gatsby projects directly into the cloud. It generates the _header.json and _redirect.json automatically which does the required job.
For the users that are not using the new update, they are advised to use the gatsby-plugin-gatsby-cloud@^1.0.0 while Gatsby 3.0 projects will be using the 2.0 version of the plugin. The plugin can be installed like this:
npm install --save gatsby-plugin-gatsby-cloud
Adding the following line in gatsby.config.js:
plugins: [`gatsby-plugin-gatsby-cloud`]
Now run Gatsby build and you will see the header file in the root of your public folder:
In the newer Gatsby versions, the core dependencies have been updated to the latest stable versions so that you do not have to manually update them while migrating to the new Gatsby 3.0. Here are the updated dependencies:
Some of these plugins might not be compatible with the newer version of Gatsby. In case you find a compatibility issue, you can report the plugin on the GitHub page.
[email protected] and [email protected]Gatsby’s WordPress plugin has now been rewritten from version v4 to v5. You do not have to follow a migration guide in order to use the new WordPress plugin. You just have to update and start using the new plugin. It will not break anything. This new plugin has features like improved and faster fetching of data from WordPress improved security, etc.
Similarly, the plugin for the Contentful also sees a major update in this release. The plugin has enables support for the latest Contentful SDK. Moreover, the compatibility for gatsby-plugin-image is also there in the update. Last but not least, network errors and asset downloading will trigger retries.
Gatsby’s philosophy has been straightforward, enabling a fast and high-end development experience. With each update, new features are being introduced making things better than before. For static-site generation, Gatsby comes to mind without a second thought.
corner-shapeLearn about CSS’s corner-shape property and how to use it, as well as the more advanced side of border-radius and why it’s crucial to using corner-shape effectively.
An AI reality check, Prisma v7, and “caveman compression”: discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the November 26th issue.
RippleJS takes a fresh approach to UI development with no re-renders and TypeScript built in. Here’s why it’s gaining attention.
As a developer, it’s easy to feel like you need to integrate AI into every feature and deploy agents for every task. But what if the smartest move isn’t to use AI, but to know when not to?
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
One Reply to "What’s new in Gatsby 3.0"
Thanks for the write up! The current gatsby-plugin-image example won’t actually work. It’s using src in GatsbyImage rather than StaticImage. For the example you have you’d need StaticImage. When using the result of the graphQL query, you’d reach for the GatsbyImage component.