What Is Gatsby and How It Works

Powering over 200 thousand websites worldwide, Gatsby is an excellent framework for building static websites. It’s among the many tools supporting the Jamstack web development approach, enabling sites and apps to run without a web server.

This tutorial will cover everything related to Gatsby, from static site generators and the Jamstack approach to the Gatsby core components and use cases.

Download Website Launch Checklist

Gatsby JS is an open-source static site generator built on the latest technology inventions, React.JS, GraphQL, and webpack. In other words, Gatsby enables developers to build a static website with React and source data from a content management system’s database or markdown files.

Understanding Static Site Generators

A static site is typically built on static content containing HTML, CSS, and JavaScript code. Static pages use server-side rendering to deliver pre-built code, ensuring the content will stay the same every time the site loads.

In contrast, a dynamic website uses browser-side rendering. Its web pages load differently every time users refresh them, which can be due to the time zone, locations, and users’ behavior.

On static websites, each page element is part of the design. Therefore, developers need to create separate versions for each page element, which can be a hassle.

A static site generator is a great content management system (CMS) alternative to building static sites with ease. Developers don’t have to hard-code each of the static page elements, as it allows them to use pre-built themes.

Besides automation, a static site generator offers the following advantages:

  • Improved performance. Static site generators use the pre-render technique to generate pages in advance.
  • Flexible customization. While hundreds of pre-built themes and plugins are available, developers can create their own from the ground up using their preferred languages and frameworks.
  • Technological advancements. Modern developer tools, including languages, frameworks, and libraries, are some of the reasons behind static site migration. They enable developers to optimize performance beyond the traditional web app stack’s limits.
  • Lighter back-end. Static site generators don’t require an active back-end, as they only use it to source data during build time. Also, they don’t need much server-side code as there’s no need to constantly query the server for data fetching.
  • Enhanced security. Static site generators enable developers to use a headless CMS system, separating the front-end from the back-end. Therefore, static sites are more secure as they don’t have that many entry points.

At build time, a static site generator reads content from markup files before it reaches a content delivery network (CDN). It will then create static content based on a set of templates and deliver it to the CDN.

On the CDN, content is stored and kept available whenever users need it.

Gatsby homepage

Gatsby or Gatsby JS is an open-source framework based on React, one of the most widely-used static site generators in the market. A Gatsby site processes data using the GraphQL application programming interface (API) and merges them to generate static HTML files.

Other than Gatsby, some excellent static site generators include Next.JS, Jekyll, 11ty, and Pelican.

What Is Jamstack?

Jamstack is the key component of modern software architecture. Based on client-side JavaScript, reusable API, and pre-built Markup, the Jamstack architecture helps improve a website’s performance, security, and scalability.

Let’s learn about each component of the Jamstack architecture:

  • JavaScript. A programming language that lets developers create interactive web elements, such as clickable buttons, interactive maps, animated graphics, and scrolling video effects.
  • API. A set of programming code that enables data transmission between two or more software programs. For example, an API allows users to log in to an application using Google, LinkedIn, and Facebook.
  • Markup. Consisting of HTML and CSS, markup code provides formatting information to the browsers. The former structures the web content, defining the title, headings, and paragraphs. Meanwhile, CSS styles the HTML content with fonts, colors, and columns.

Jamstack, providing an approach to client-side web development, has become a popular architecture choice for static site generators.

What is more, Jamstack websites don’t require a database, unlike websites built using Drupal or a WordPress site. Developers can also host a GatsbyJS site using an Object Storage Service (OSS) and a CDN, eliminating the need for a web server.

How Does Gatsby Work?

Gatsby’s revolutionary features, like code splitting and content mesh, allow developers to utilize static files and build blazing-fast websites easily.

The gatsby build command automatically code-splits JavaScript bundles. This enables Gatsby to load only the critical HTML, CSS, and JavaScript code instead of delivering the entire app. That’s why a Gatsby site feels incredibly fast.

Content mesh describes the relationship among Gatsby’s three main features:

  • CMS services. They may include Contentful, WordPress, and Shopify. CMS services enable content creation and provide a content hub to pull data from.
  • Development frameworks. Referring to modern developer tools, the development frameworks in Gatsby are React and GraphQL.
  • Deployment tools. Integrated with Netflify, Vercel, or AWS Amplify, Gatsby creates the static files ready for deployment.
Content Mesh - one of Gatsby's features that consist of modern tools, headless CMS, and website performance

Gatsby prefetches resources from a CMS or markdown files and each of them will have its own designated folders.

For example, Gatsby creates individual folders to store each web page sourced from a CMS. If a user types /FAQ to their browser, Gatsby will fetch the page and display it as it’s stored.

Once it’s entirely rendered, Gatsby will prefetch other pages’ resources for faster page loads.

The Gatsby ecosystem also offers thousands of plugins, from image optimization and lazy loading to social media, eCommerce, and analytics.

For instance, a Gatsby application using dynamic images can use gatsby-plugin-image and set up the Gatsby image component to lazy load them. A Gatsby project can also utilize the gatsby-source-filesystem plugin to enable developers source content from the local computer.

Gatsby also provides CMS plugins, such as gatsby-source-wordpress, gatsby-plugin-netlify-cms, and gatsby-source-contentful. Such plugins enable Gatsby sites to fetch files from the CMS’s database.

If you’re planning to use Gatsby, make sure to go with a high-performing VPS hosting that supports this framework.

Let’s dig further into Gatsby’s main components – React, GraphQL, and webpack.

React

React Js homepage

React is an open-source, JavaScript-based library for creating interactive mobile and web application user interfaces (UI). Here are some of the best React features that make web development more user-friendly:

  • JSX. PHP developers may feel at ease using React as the JSX file format lets them combine HTML with scripting code, like the typical PHP development.
  • Component-based layout. React utilizes the components that are a set of reusable JavaScript code snippets for UI development. They enable the library to assemble web pages from pre-built elements quickly.
  • Declarative programming. Instead of telling how a program should execute a task, React describes what it does without controlling its flow. Apart from ensuring the right components to render, declarative programming also makes it easier to find bugs.
  • Virtual Document Object Model (DOM). React creates a local copy of the HTML DOM, enabling it to remove excessive re-rendering and make the application speed incredibly fast.

An app built on React is often a single-page application. However, due to its revolutionary approach to front-end development, developers can also use React to build large web applications, including eCommerce sites, storage services, and streaming apps.

GraphQL

GraphQL homepage

GraphQL is a query language used to retrieve and modify files from databases.

GraphQL works similarly to SQL, yet its syntax is simpler and more declarative. Additionally, React, and GraphQL were invented on Facebook, making GraphQL one of the most powerful query languages for embedding data in the React components.

Gatsby makes data available to users via the GraphQL API. It allows websites and applications to source data from virtually anywhere, including content management systems, markdown files, local computers, and JSON.

Webpack

Webpack homepage

Webpack is a module bundler – it collects JavaScripts modules and compiles them into one or more optimized bundles, enabling an app to run.

Webpack utilizes the dependency graph to determine the JavaScript modules dependent on others to make sure that a website runs as it should. For that, webpack uses the webpack.config.js content to find starting points.

Webpack also uses webpack.config.js to store its configuration settings. Therefore, fetching markup files in Gatsby can be done by embedding files supporting HTML and CSS.

Additionally, webpack allows code-splitting, allowing developers to divide code across a few bundles so that they can load as requested.

To sum up, here’s how Gatsby works:

  1. Gatsby sources data using a GraphQL API.
  2. It then creates bundles and splits code with webpack.
  3. Finally, the HTML, CSS, and React pre-rendered pages are deployed to a server.

Gatsby Use Cases

In short, Gatsby is best used for websites that don’t need frequent changes. Thanks to content mesh, developers can now use Gatsby to build more complex websites, including static eCommerce, B2B, SaaS, financial services, and progressive web apps.

Let’s look at four Gatsby use cases to better understand how it works.

eCommerce

Speed is a crucial factor determining an eCommerce store’s success. Websites that take only one second to load have a three-times higher conversion rate than those loading in five seconds.

The good news is that developers can integrate Gatsby into an eCommerce platform and build a static storefront for a headless eCommerce. Apart from ensuring excellent performance, Gatsby’s customization is highly flexible. Therefore, it can help to:

  • Provide clear navigation. eCommerce sites should be easy to browse, as clear navigation helps smoothen the customer journey.
  • Set competitive advantage. Flexible customization enables business owners to get unique web designs, helping an eCommerce website stand out amongst the competitors.
  • Improve user experience (UX). All the above benefits combined with excellent page load time can result in a flawless UX.
raleigh.co.uk homepage

Ever since Raleigh moved to Gatsby, it has seen significant improvements in overall website performance. Here are some of the areas Raleigh benefits from Gatsby:

  • Speed. After moving to Gatsby, Raleigh received positive feedback about the website’s loading time.
  • Design flexibility. As Gatsby gives more freedom for developers to create a unique design, Raleigh has been taking advantage of it to ensure the website doesn’t look old-fashioned.
  • Cost-effectiveness. Gatsby’s static pre-rendering helps Raleigh lower hosting costs.

Business-to-Business (B2B) and Software as a Service (SaaS)

Like eCommerce sites, B2B and SaaS websites aim to convert visitors into customers. Therefore, page speed and crawlability are crucial factors.

Housecall Pro SaaS homepage

Housecall Pro, needing the website to be SEO-friendly, scalable, and blazing-fast, migrated to Gatsby.

The result was instantly noticeable. Housecall Pro successfully increased its organic blog traffic and the number of times the marketing site landed on Google’s first page for various search terms.

Financial Services

As Gatsby is more secure than a traditional CMS, opting for it is a great way to boost a site’s security. The decoupled website architecture minimizes entry points, making it harder to steal client data.

On top of that, Gatsby helps reduce bounce rate and increase conversions, as it greatly improves the overall performance as well.

MagMutual homepage

MagMutual integrated Gatsby with Drupal 8 to solve its data pulling problems. The healthcare liability insurer needed a solution to help it source and organize data from multiple services and APIs.

Here are the results of MagMutual’s decoupled Drupal 8 with Gatsby solution:

  • The powerful back-end and robust UI flexibility. Drupal 8 offers an extensive capacity for content modeling, while Gatsby takes care of all things client-side.
  • Improved page load time. The integration accelerated the homepage load time by 82% and the Learning page by 25%.
  • More lightweight homepage. The page weight was reduced by 90%.
  • Next-level security. Keeping member data on its source locations, MagMutual did an excellent job reducing vulnerability and exposure to cyberattacks.

Progressive Web Apps (PWA)

PWA is a web app built on HTML, CSS, and JavaScript. It provides similar experiences to the native app in reference, for example, Twitter, Spotify, Pinterest, and Uber.

Let’s take Spotify as an example.

When users visit Spotify.com from their browsers, they will encounter the “Download Spotify” banner for the Spotify app. Clicking the download link and proceeding with installation, they will get the app on their home screens.

Users will notice that both the site and native app versions look and perform exactly the same. In that case, the Spotify web app version is a PWA.

Unsurprisingly, creating a PWA is feasible with Gatsby. That said, the environment must satisfy these three factors:

  • Running the web app under HTTPS. As HTTP is required for PWA to work, don’t forget to install a Secure Socket Layer (SSL) certificate.
  • Including a web application manifest. It’s a JSON file providing browsers with information about a website or web application.
  • Adding a service worker. Containing specialized JavaScript assets, social workers offer offline access to a website.

Is Gatsby Difficult to Learn?

Generally, Gatsby is relatively easy to learn.

For people new to web development, some knowledge is required to help smoothen the process of learning how to use Gatsby, especially with HTML, CSS, JavaScript, and the command line.

If you are familiar with the web development fundamentals but don’t know React and GraphQL, using Gatsby is one of the best ways to understand them better. Furthermore, Gatsby has an active community with ample documentation because it is an open-source project.

Therefore, don’t hesitate to give Gatsby a try.

Conclusion

As a static site generator, Gatsby has a lot to offer.

Excellent speed, enhanced security, and flexible customization are among Gatsby’s best advantages to ensure a well-performing site. Also, its ability to integrate with headless CMS services results in a more organized back-end.

Gatsby is relatively easy to learn. As an open-source project, Gatsby has an active community with extensive documentation. Additionally, learning Gatsby is a great way to get started with React and GraphQL.

Was this tutorial helpful?

Author
The author

Linda D.

Linda is a Digital Content Writer at Hostinger. She's passionate in all things website development and keen to share her knowledge to help others build success online. Linda spends her free time listening to music, watching films, and enjoying nature.