How To Add Dynamic Content To Your Gatsby JS Website

بمس الله الرحمن الرحيم

Hi, As you can see, this site is using "Gatsby JS" framework.

Gatsby JS is just another reactJS framework that allows you to create a static website with ease.

What is a "Static Website" ?

Static website is website that has a fixed number of pages composed from HTML, CSS, and/or Javascript [1]. It has no server-side processing & database.

So, when you're creating a website using HTML & then serving it on the cloud, then congratulations! you just built a static website.

Why Static Website ?

Well, I agree that a static website has some limitations.

The biggest limitation is "hard to change the content".

You need to deploy the site every time you want to change the content.

Imagine, when you want to add a new blog post, you have to code it yourself, build the whole site & then deploy it manually. It's Tedious.

But if we look at the advantages, a static site is blazingly FAST. It doesn't need to connect to a backend server. Whenever you open a page, it just appears.

And Gatsby JS really mitigates that limitation. We can actually make "dynamic content" works in static website without the hassle of manual coding, manual build, and manual deployment.

How to Add Gatsby JS Dynamic Content Then?

As you can see, this website has "Blog" page which serves "dynamic content".

Well, actually these dynamic contents are not actually 100% dynamic. Cos when they are fetched by gatsby, gatsby will transform them into a bunch of static pages.

So, Gatsby JS has a plugin that able to connect to a 3rd party "Content Management System" (CMS). The popular term is "Headless CMS".

So that process happens when we "build" the static pages.

Here's how it looks

You can see that gatsby will try to make a network request to 3rd party headless CMS & process the data returned from it accordingly.

Headless CMS ?

You might wonder what is "Headless CMS". Well, simply put, you should have known about Wordpress, right ?

Well, in wordpress there's an admin page that allows you to manage the content of your wordpress site.

Headless CMS is the same as Wordpress's admin page, except it doesn't have a front page that can be shown into public users.

Here's the list of headless CMS that are supported by Gatsby.

FYI, I'm using Strapi as my headless CMS & I host it separately on my VPS (Virtual Private Server).

How does the "Rebuild" Flow work?

Ok, now we know how gatsby build the website. Then we need to figure out how to automatically rebuild the website after we publish / update a content on the headless CMS.

In general, here's how it works:

Usually, headless CMS has a "webhook" feature that triggers when a certain event happens. In this case, we set the trigger to "new content publish" or "edit a published content".

Here's how it looks

And yes, I'm using Netlify as the Deployment Tool.

With this setup, every time I modify a content, Strapi will send a network request to Netlify, telling it to rebuild the Gatsby site I hosted there.

Final Words

And that's how to display "Dynamic Content" in a Gatsby JS project.

Note that this article only covers the high-level part.

So I'm not recommending you to use Strapi & Netlify. You can use other tools and the flow would mostly be similar.

I hope this article will help you with your work.

See you next time, Bye.

References

1. What is a Static Website https://kinsta.com/knowledgebase/what-is-a-static-website/