How does React work on Gatsby (Statically Generated?)

Question

Recently I learned that I can statically generate React apps with Gatsby but I have a difficult time understanding what this actually means.

React is a library that lets us have dynamically changing UI, right? And we achieve it by having JS file rendered on the browser (JS draws the DOM on the browser on the client-side) and react updates the page when there are changes made by users or data fetching on the browser.

My question is if I use Gatsby, every content is built statically... So does it mean that react doesn't run on a statically generated site? So I can't click the button and make changes on the website? In other words, can we manipulate DOM with the VDOM feature of React on a statically built site?

Answer 1

Gatsby can be used to build fully dynamic sites, which surprises some people because of it’s label as a “static site generator”. It’s fully equipped to be a powerful alternative to create-react-app and other similar solutions with the addition of easy pre-rendering and perf baked in. — biscarch ^1

Your site should be as dynamic as you need it to be, but no more. ^1

Hydration is term for attaching React to already created DOM nodes.

This means you can do client side rendering (CSR) with Gatsby. For example, after a page load, you could fetch data from the browser, display that list, sort/filter it, all that without ever requesting another page made by Gatsby.

If you wanted to, you could pre-render that list, and each variation with sort/filter with Gatsby, making a page for each variation. That may be heavy and not worth it.

A confusing point, may be that Gatsby use traditional server side routing by default, when CRA (create-react-app) use client side routing. However it is possible to use both in Gatsby.

Another difference, is code-splitting done automatically in Gatsby. It is manual in CRA.

Answer 2

Gatsby is a Static Site Generator, this means that the HTML is already built when you enter a Gatsby site, avoiding unnecessary requests, parsing, and compiling time for the server as you generally experience in any server-interpreted language (PHP for example). This is achieved by generating an HTML, bundling dependencies, and fetching all the data sources when the compilation occurs (markdown files, CMS, JSON files, etc) via GraphQL, at the build time. Based on those data sources, you can generate dynamic pages based on a slug or any desired field. As you may guess, this has huge SEO benefits and that's why the sites are so fast.

Among all generated HTML, you have the React ecosystem bundled and of course, you can manipulate the DOM and the virtual DOM with React as you wish, and you still have the lifecycle methods or hooks from React if desired. You can also use CSS modules or styled-components for styling, the routing (<Link> component) from @reach/router (from React) is extended by Gatsby so you have all the benefits/features from React plus some additional ones, etc. So, all that can be done with pure React, can be done with Gatsby.

The term "static" when you talk about Gatsby sites stands for this process of fetching data at the build time and generating the respective HTML, no because you cannot play using JS or React making a dynamic site for the user experience, where things happen as long as the user moves through it.

The following schema shows the workflow of Gatsby:

As a curiosity, React's site is built with Gatsby.

Answer 3

Gatsby is a hybrid framework that allows you to build pages that are hydrated with data at build-time, run-time, or both. This paradigm is based on WHEN data is available e.g. the title of your website will be available at build-time while its contents may change at run-time.

You can create an entirely static website with Gatsby, meanwhile you can also create an entirely dynamic one, although there's probably some static data in there somewhere. This is when Gatsby shines because it will deliver that static data fast while it waits on run-time data, making your site's first-paint and time-to-interaction very low.

Considering that Gatsby uses React then you have all of the capabilities of React in a Gatsby application. So depending on the page, yes you can manipulate the DOM via the VDOM.

As a React developer, I have a rule of thumb for selecting which framework I use to build what I need, which is - if I need a "website" I use Gatsby. If I need "web-app" I use Next.js, and if I need a dashboard I use Create-React-App.