Gatsby Version Four

Gatsby Version Four with SSR Server-Side Rendering and DSG Deferred Static Generation, JAMstack coolness.

2021-11-23
1 min read
Profile picture
👋
Developed and Written by: Donald Boulton🎉 0
|

Gatsby Version 4.14.0
Gatsby Version 4.14.0

Gatsby Coolness

Differed Static Generation

The performance of static sites without all of those long build times

DSG
Statically Generated Websites

Dsg Example

DSG Example Page

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.

Server Side Rendering

Request and render data at run-time with Gatsby

SSR
Render Data At Run-time

Ssr Example

SSR Example Page

Gatsby 4 now supports Server-Side Rendering, giving developers the choice of generating content at either build time, as with static-site generation, or at run time. With Server-Side Rendering, teams can now run more effective A/B tests, personalize content, and more all while still using the Gatsby framework.

My Ssr Page

Node fetch was killing this so to isomorphic-fetch, and it worked perfect.

Lowered my LightHouse Performance score from 99 to 95. It goes up and down???

Gatsby Cloud Build Pic
Gatsby Cloud Build Pic

Isomorphic Fetch

SSR Example on GatsbyJs Site needs a change to isomorphic-fetch

Node-Fetch-Issue-src/pages/ssr.tsx
diff

Excerpt From Medium

Medium by Eduardo Valencia

With static generation or deferred static generation, Gatsby builds the website’s files only once. With server-side rendering, however, a server builds each page each time the user visits it.

Server-side rendering is useful when your pages update frequently. For example, you might build an e-commerce application where products’ prices and descriptions update frequently. In Gatsby 4, you would have to rebuild the application each time you wanted to update the product data.

In contrast, server-side rendering can rebuild the product page each time a user visits it, so the page will always show the latest product information. By using server-side rendering, you can update pages automatically without needing to rebuild your entire website.

Build Output

(SSG) Generated at build time ,

D (DSG) Deferred static generation - page generated at runtime

∞ (SSR) Server-side renders at runtime (uses getServerData)

λ (Function) Gatsby function

Four Cool Things

You Can Build with Gatsby v4

See More About Gatsby Version Four