Updated To Gatsby v4

gatsby logo

The site is now running Gatsby v4 🎉

Gatsby v4 pull request on github

New Features

  • Parallel Query Running
  • Deferred Static Generation
  • Server-side Rendering
Gatsby 4 combines the control and scalability of server-side rendering with the performance of static-site generation, creating a whole new web of possibilities.

Introducing Gatsby 4

Parallel Query Running

graphql logo

Page queries and static queries to occur in parallel, leading to a 40% reduction in build times for some sites

Reducing Build Times In Gatsby 4 With Parallel Query Running

Deferred Static Generation

Deferred Static Generation (DSG) allows you to defer non-critical page generation to the first user request, speeding up build times. Instead of generating every page up front, you can decide to generate certain pages at build time and others only when a user accesses the page for the first time.

Deferred Static Generation API

Server-side Rendering

Server-side Rendering (SSR) is one of Gatsby’s rendering options and allows you to pre-render a page with data that is fetched when a user visits the page.

Using Server-side Rendering

Upgrade Process

Upgrading to Gatsby v4 was relatively simple.
I didn't run in to any issues & no code changes were required.

Migrating from v3 to v4

Build times seem to take longer than v3 on netlify for some reason.

Netlify Build Times

Gatsby v3

11:58:04 AM: info Done building in 103.589830513 sec
11:58:05 AM:11:58:05 AM: (build.command completed in 1m 50.8s)

Gatsby v4

3:36:39 PM: info Done building in 136.966769022 sec
3:36:39 PM:3:36:39 PM: (build.command completed in 2m 39s)

Source Code

You can find the full pull request for Gatsby v4 update on github.

Gatsby v4 pull request on github

The source for the site is available on github.