Gatsby is best known for being a React based graphQL-powered static website generator that has a rich data plug-in system for managing systems, apis and databases. Gatsby also has several plug-ins that extend its functionality beyond the normal static web site generator.

The Gatsby V4.0 framework was released in September 2021, offering huge improvements to the developer and user experience while also entering the world of server-side rendering, a first for the framework. We’ll cover all of the new features in this article, including.

  • Parallel query running
  • Improve content management with a preview user interface
  • Deferred static generation
  • Use the Gatsby Cloud’s mainframe
  • A Shopify source plugin and the new Gatsby launcher
  • Server-side rendering (and how to implement it)
  • New and improved documentation and tutorial experience

Let’s review these below and cover a few of them with relevant examples.

Introduce parallel query running

In previous Versions of Gatsby, a unified data layer was used to simplify the handling of content from multiple content management systems. Gatsby V2.0 and V3.0 were designed to make it easier for developers to launch websites; They enable new capabilities to build pages or process images only when requested by the development server.

In version 4.0, Gatsby further reduced build time by introducing parallel query running, which is usually the largest part of the build process. Parallel query running is the first step towards a fully decoupled future, meaning faster builds.

Gatsby has historically been single-threaded; Gatsby uses only one thread to perform tasks, no matter how many cores there are on the machine. However, the parallel query run utilizes multiple cores, which means that slower builds will now be done in parallel on more and more powerful machines — a 40% build speed increase.

Improve content management by previewing the user interface

The new Preview UI provides an improved content visualization and editing experience that helps content editors stay informed and very effective. As an editor, you can see the changes you make on your CMS in real time with one click.

Here’s a little demo of previewing the user interface.

When developers use Gatsby’s headless system on their sites, no matter what CMS they choose, their content editors won’t be put on hold while making changes. As a content editor, if you use Contentful as the CMS example, you can make changes in the editor. When you click the Open preview button, it will display a create a new preview button, right in the left corner.

Delayed static generation

Delayed static generation (DSG) is a technique that speeds up build times by postponing the generation of non-critical pages and producing only what is needed in real time.

Only the key parts of your Gatsby website are generated at build time, while the rest are generated and made available to users upon request. This triggers the build when the user accesses the live page, rather than generating everything up front.

DSG can reduce build times by as much as 10 times, especially for large web pages that have content that can be generated in the background.

For content types like older sites or some infrequently visited content types, you can take advantage of static web page generators, where you wait for builds to complete.

To enable DSG, you can follow the instructions in the official documentation.

Hosted with the Gatsby Cloud

The Gatsby Cloud is a new platform that uses modern developer toolsets and workflows for a better Gatsby experience.

Gatsby uses incremental builds to reduce build time or deployment. When you make a change to your website, Gatsby calculates how long it will take from the time you make the change to when it goes live via CDN to users around the world.

In addition, the appearance of Gatsby hosting was Gatsby’s turn to a more dynamic field to meet the needs of the team. It addresses the issue of publishing updates to the site and has now moved to deployment time.

In addition to this feature on the Gatsby cloud, the Gatsby – plugin-Gatsby – Cloud has also been updated. This plugin helps you control titles and redirect your projects on the Gatsby Cloud.

The Gatsby Shopify source plugin and launcher

Gatsby is now offering its own Shopify storefront launcher to further convince content creators to choose Gatsby as the front end of their e-commerce sites.

While it’s still in beta, the new launcher lets you get started with Gatsby faster than before and offers a wide range of easily customizable options for your builds, most of which are built with CSS modules.

Server-side rendering

One of the biggest changes in this release was Gatsby’s new support for server-side rendering (SSR). Server-side rendering is done on a pre-user and pre-request basis. SSR will enable you to build your website if you want to extend your real-time data requirements or get details in testing based on server-side conditions.

These technologies and rendering models are new features of Gatsby. Collectively, these tools and apis drive build times down by as much as 10 times.

Use Gatsby to implement SSR

To illustrate SSR, we’ll use getServerMethod() to get data from Rocktim Saikia’s Animechan API, which is a simple API that returns random anime quotes, the name of the source anime, and the name of the character who spoke them. We will then dynamically render the data from the getServerData() method in our page.

If you don’t have an existing Gatsby website, you can follow this guide to get started.

Here is an example of our request.

fetch('https://animechan.vercel.app/api/random')
.then(response => response.json())
.then(quote => console.log(quote))

Copy the code

Here’s our sample response.

{
anime: 'Tengen Toppa Gurren Lagann',
character: 'Kamina',
quote: 'Don\'t believe in the you that believes in me and don\'t believe in the me that believes in you. Believe in the you that believes in yourself.'
}

Copy the code

Create a simple React component that hardcodes the animation name, quotes, and characters. We’ll render this dynamically soon.

Import the React from "React"; const AnimeQ = () => ( < main> < h1> Anime Quote Of The Day< /h1> < h3> Anime< /h3> < p> Anime Quotes< /p> < p> Anime Character< /p> < /mani> export default AnimeQ;Copy the code

Request data from getServerData(). AsyncgetServerData () is a method that instructs Gatsby to select the SSR render option for us.

This data must be returned as an object with only one property, props, whose value is the API response.

export async function getServerData() { try { const res = await fetch(https://animechan.vercel.app/api/random) if (! Res.ok) throw new Error(' Couldn't get response! `) return { props: await res.json(), } } catch (err) { return { headers: { status: 500, }, props: {} } } }Copy the code

Whenever the user visits the page, the API is invoked and the response returned can be used as serverData for the page, which we will accept as a prop. Let’s dynamically render this data and pull out the hard-coded values.

const AnimeQ = ({serverData}) => ( < h1> Anime Quote Of The Day< /h1> < h3> {serverData.message.anime}< /h3> < p> {serverData.message.quote}< /p> < p> {serverData.message.character}< /p> ) export default AnimeQ; export async function getServerData() { try { const res = await fetch(https://animechan.vercel.app/api/random) if (! Res.ok) throw new Error(' Couldn't get response! `) return { props: await res.json(), } } catch (err) { return { headers: { status: 500, }, props: {} } } }Copy the code

Improve the documentation and tutorial experience

Finally, if any of these new features interest you, Gatsby offers a new tutorial and overall documentation experience to help you get started quickly. This tutorial shows you how to build a blog and use the latest API for Gatsby≥ V3.

conclusion

The main purpose of Gatsby has always been to enable developers to build websites with fast page loading, fast image loading, and fast data prefetching. With the release of Gatsby V4, there was a noticeable increase in speed due to DSG implementation — and, they plan to release a new, open source Version of Gatsby every two weeks, and if you update your Gatsby version with each incremental point release, you’ll see some real improvements in the overall Gatsby user experience, This is calculated by building speed.

Now, updates will happen more often, and we’ll see more Of Gatsby with updated features to make the best experience for developers and editors. What are you waiting for? Upgrade to Gatsby version 4.0!

The postWhat’s new in Gatsby v4appeared first onLogRocket Blog.