What is Gatsby JS?

Gatsby is a platform to build websites.

It separates a website's visuals from their Content Management Systems. It allows you to mix-and-match content from different sources - something the team behind Gatsby has dubbed "the content mesh". This means you can bring in content from a CMS, products from Shopify, and updates from social media and use them on your pages as if they were all from the same place.

Because it's decoupled from a CMS, it typically leans on cloud services to provide functionality that a monolithic CMS may have done in the past. This change is usually for the best, because you can use first-in-class dedicated services. For instance, a search engine might be provided by Algolia and eCommerce powered by Shopify.

This is familiar territory for most developers who have used cloud services like Google Analytics. One caveat is that it requires a bit more consideration as many services have paid tiers and may impact the cost of running the website — but that is almost certainly balanced by the savings elsewhere.

Gatsby sites are React sites. Gatsby provides scaffolding for React, providing development environments, performance gains, connects you to the content mesh, etc. Gatsby, at its core, is a helping hand for making better React sites faster.

It also means that if it can be done in React, it can be done in Gatsby — and if it's available for React, it's available for Gatsby.

Perhaps the biggest impact Gatsby has for most websites is that it is capable of 'building' pages and hosting them as static files on services like AWS, Google Cloud, or Netlify. With Netlify in particular, it's possible to effectively host a website for free. These built pages are highly optimised and often score 100% on Google's Lighthouse reports. This means you can provide better SEO, UX, and conversion rates with less work.

In this way, Gatsby has some similarities to Static Site Generators like Hugo or Jekyll, but it's important to note that it's not just a static site generator.

As soon as a user loads a built Gatsby page it "rehydrates" back into a React app where you can do anything React'y on top of it. Because of this, you can have pages that are entirely dynamic or pages that are partially built and partially dynamic. Unlike SSG's, Gatsby puts the developers in control and has a much higher capability ceiling.

The downside of building pages is that they need to be built. That means content editors have to wait before they can preview their content, and again before they can publish. This is more of a problem on particularly large websites because it can take a while to get through all of the content to rebuild each time.

This downside is being solved in two parts by the commercial arm of Gatsby, who are launching cloud services:-

• Gatsby Preview allows editors to see changes as they make them and supports a growing list of CMS'
• Gatsby Build provides fast build times in the cloud and has an exclusive "incremental builds" feature where it only builds what has been changed, allowing for build times to be reduced considerably