Gatsby Version Four

Gatsby Version Four with SSR Server-Side Rendering and DSG Deferred Static Generation, JAMstack coolness.
Profile picture
Developed and Written by: Donald Boulton🎉 0
1 min read

Gatsby Version 4.24.4 React Version 18.2.0
Gatsby Version 4.24.4 React Version 18.2.0

Gatsby Coolness

Static Site Generation

Static Site Generation

One downside of SSG is longer build times.

As the number of pages of your site grows, so does the build time.

Gatsby supports incremental builds to make sure the 2nd and subsequent builds only rebuild the parts of your site that changed, but for the initial build (the build without the cache), build times may become an issue.

Differed Static Generation

That’s where Deferred Static Generation could be beneficial.

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

Deferred Static Generation

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.

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

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

Let's keep in touch!

Find us on any of these platforms, we respond 1-2 business days.
Profile picture
D.W.B's Website


Get exclusive newsletter-only content now and then

© 2023 Publiuslogic by Visualizer