Nov 22, 2022
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.
What Is Gatsby?
Gatsby or Gatsby JS is an open-source framework based on 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
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 JS is built on the latest technology inventions, 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.
What Is Jamstack?
Let’s learn about each component of the Jamstack architecture:
- 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.
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.
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.
If you’re planning to use Gatsby, make sure to go with a high-performing VPS web hosting that supports this framework.
Let’s dig further into Gatsby’s main components – React, GraphQL, and webpack.
- 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.
- 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 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.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:
- Gatsby sources data using a GraphQL API.
- It then creates bundles and splits code with webpack.
- 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.
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.
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, 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.
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 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)
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.
Is Gatsby Difficult to Learn?
Generally, Gatsby is relatively easy to learn.
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.
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.