How Does Gatsby Work ?

Before jumping into how Gatsby works, let us address why Gatsby JS and what problem it solves in the existing JS world with a plethora of JS libraries and frameworks.

What problem does Gatsby address ?

Static sites have been around for a very long time. In fact, they are probably the original websites: just HTML, CSS, and JavaScript. It also involved inefficient manual duplication of the same code for creating multiple web pages.

Another issue with conventional static websites was that they were server-driven and generated on demand once the page was requested, making the whole process slow.

If you are wondering what a static site is a static site is a website where HTML is pre-built and not generated dynamically by some server when requested`

But recently, since the React era, we have been flooded with frameworks and libraries that implement SSG (Static Site Generators) & SSR (Server Side Rendering), We'll look at what is SSG and how Gatsby implements it.

We'll look at what an SSG is and how Gatsby uses it.

A static site generator is a programme that generates HTML pages using templates, components and a content source. JS frameworks and libraries, in theory, generate HTML content on the client side during runtime, but static site generators generate pages during build time, then on load hydration kicks in, and react takes over, changing the output page into a single-page application!

In this blog, we will explore at a high level how Gatsby generates static pages.

Working of Gatsby

So what is Gatsby ?

Gatsby is a free and open source React framework that helps developers to create fast, secure, and powerful websites by utilising an innovative data layer. This data layer simplifies the integration of various information, APIs, and services into a single web experience.

Gatsby has two modes to compile a site:

Develop: Use gatsby develop command to initiate develop mode
Build : Use gatsby build command to initiate build mode

Gatsby at work in development environment:

We can utilise graphQL queries to produce the pages for our website after we get the necessary data from our selected data sources, such as headless CMS or file systems.

When we use development environment to build our website, we may check our local development server (open at port localhost: 8000) for warnings, errors, and the state of our pages rendered.

We can preview our pages in our local environment by using the command 'gatsby develop'. In this case, previewing our pages will be rendered on the browser as a javascript runtime, allowing us to use the global 'window' object and all other browser APIs.

When we run the gatsby develop command, gatsby will load all of the plugins utilised in our project and create the appropriate data.

NOTE: Beware that the HTML pages are not actually generated here to be deployed.

Gatsby at work in production environment:

Once, after vigorous testing and making lots of tweaks for our website to be blazing fast and production ready, we can deploy our website.

There are a few differences between gatsby develop and gatsby build:

When we use the gatsby develop command, the number of graphql queries executed by gatsby is only for 3 pages: the index page, the 404 page, and a custom 404 page. For all other pages we view on the browser, Gatsby will process the queries when required or use the cached results if the page has already been viewed previously.

When we use gatsby build Gatsby will execute the page queries for each and every page that is up to date and production ready with all the CSS and JS files bundled by webpack.

Finally, with all the CSS and JS ready for our static pages, the HTML files are generated and ready to be served once our website is deployed on our domain.

Advantages of using Gatsby

Speed as it pre-builds the static pages and serve them once the request is made instead of generating them on the fly.
Security is implicit since there is no database or server to manage and secure, hence the entrypoints are limited.
SEO is made easier since crawlers can find the content due to the fact that the page is generated during build time and on load we do not have a blank white screen like traditional React applications (SPAs).