Ecommerce Technology

What is Gatsby JS, and How Are Ecommerce Developers Using it to Make Blazing-Fast Stores?

Victoria Fryer / 7 min read
collage-graph-person-smiling-generic-blue-gatsby

What is Gatsby JS, and How Are Ecommerce Developers Using it to Make Blazing-Fast Stores?

Get The Print Version

Tired of scrolling? Download a PDF version for easier offline reading and sharing with coworkers.

Add your info below to have the PDF sent to your inbox.
A link to download the PDF will arrive in your inbox shortly.

Scott Fitzgerald wrote a letter to his editor in 1922 announcing his intention to begin writing a new novel he described as: 

[S]omething new — something extraordinary and beautiful and simple and intricately patterned.”

Three years later, he published “The Great Gatsby.”

It’s this beautiful simplicity, as opposed to the character Jay Gatsby’s lavish extravagance, that the GatsbyJS open source framework brings to mind. Created in May 2015 by Kyle Mathews, Gatsby is, at its most basic, a simple way to build a website with React.

Fitzgerald passed away before “The Great Gatsby” earned wide acclaim, but Mathews had better luck. Just over half a year after it launched, when Mathews spoke at the React conference in January 2016, people were already using it.

“I had assumed people just used static sites for markdown or JSON-driven sites, but as it turned out, there was a large group of developers interested in pushing the boundaries of what static sites can do,” said Mathews.

Popularity grew so much that in 2018, Mathews and several core contributors formed Gatsby Inc. to help development teams build “CMS-powered websites with modern tooling.”

Today, there are more than 107,000 live sites on the internet using Gatsby JS.

What is Gatsby?

Gatsby is an open-source static website generator (SSG) that is based on the frontend development framework React and makes use of Webpack and GraphQL technology. It can be used to build static sites that are progressive web apps, follow the latest web standards, and optimized for speed and security.

In an article on the BigCommerce Developer Blog from Karen White, notes the perception that SSGs can only be used for content-focused sites, not those with dynamic elements. But she says with React alongside it, Gatsby can build app-like sites even for ecommerce.

“All that is to say that Gatsby brings the speed of a statically generated site as well as the functionality of a framework,” she writes.

LEARN MORE ABOUT GATSBY + BIGCOMMERCE

For more information about how Gatsby and BigCommerce work together, check out our developer blog.

Read Now

1. Static site generator.

In a way, “static site generators” are exactly what they sound like. But what does that really mean? Whether a site is static or dynamic depends upon whether the page is hand-coded as a static page and then accessed by a user, or if the page is dynamically generated on-demand via a content management system as users access it. The latter requires server-side processing.

A static site generator delivers a compromise between the two by enabling developers essentially to “write dynamically and publish statically.” With SSGs, developers create a static site deployed to an HTTP server. There are only files and folders — no databases, no server-side rendering. When a user requests a page, then, the server returns the matching file.

SSGs also have cybersecurity benefits. Cyber attackers use methods like scripting, SQL database injections, or server-side database vulnerabilities — but SSGs circumvent that because they’re composed only of static files and do not reference databases.

2. React.

React is an efficient, flexible JavaScript library for building user interfaces, according to Reactjs.org. This component-based framework provides developers with a set of lightweight, broadly applicable core functionality they can use to build single-page or mobile applications.

One of the advantages of using React components is that a modular build helps keep everything consistent when you have complicated user interfaces.

3. GraphQL.

GraphQL is a query language for APIs and runtime for fulfilling those queries with your existing data. This has become popular among developers for a few reasons. First, your data requests can be structured declaratively, which means you can query the API for the exact fields you want without having to deal with a response that includes extra properties.

Then, GraphQL queries can encompass multiple resources in one request. “A GraphQL API essentially has a single endpoint that can query any of the data available to it,” said White.

It redefines API design and client-server interaction to improve the developer experience, enabling seamless user experiences even cross-platform and on mobile.

4. Webpack.

Webpack is an open source module bundler for JavaScript. It “puts all of your assets — including JavaScript, images, fonts, and CSS, in a dependency graph.” There are several advantages to using Webpack, including easier styling, code splitting, more control in how assets are processed, stable production deploys, and faster page load speed.

The Gatsby Ecosystem: Plugins and Starters

Plugins allow you to connect Gatsby with third-party platforms and import data exposed through a GraphQL layer.

One of the reasons developers are loving Gatsby is because it’s built on React. This means that you can use any of the packages you already use with NPM (a package manager for Node.js packages).

Gatsby does come with some default starters and it reduces the need for boilerplate code. Because Gatsby is open source, though, you’ll also have access to a large and growing number of plugins, starters, and transformers built by the existing Gatsby community. Just looking at Gatsby’s page on GitHub shows more than 3,500 contributors.

In addition, BigCommerce released a Gatsby-Netlify CMS template to jump-start developing a serverless PWA storefront.

4 Gatsby Noteworthy Features

If there’s one thing everyone can agree on, it’s that Gatsby websites can be very fast. But there are a lot of other advantages, too — particularly if you’re a developer already familiar with React. Here are some of the most noteworthy features of Gatsby.

1. Built for performance.

According to performance tests conducted by Gatsby founder, Kyle Matthews, Gatsby sites are, on average, 2-3 times faster than similar types of sites, and the framework itself is responsible for performance, so it’s off your plate as a developer.

“All you have to do is to create the source code, and Gatsby.js will then compile the most performant Webpack configuration to build your site,” said Sarah Mischinger at Storyblok.

Static site generators like Gatsby increase speed and performance because all the server has to do is return a file instead of conducting database queries and constructing every page as it’s requested. Gatsby handles all the data fetching and uses that data to generate static HTML files, JavaScript, and CSS files, making it work faster.

In an article on Medium, Nicholas Feitel writes that his Gatsby site “loaded over twice as fast as my simple React app and FIVE times as fast as a complex site like LinkedIn.” With Gatsby, you won’t have to rely on servers for dynamic page generation — instead, pre-render them on build and use CDNs for delivery.

2. Open source ecosystem.

Gatsby has an extensive plugin ecosystem, powerful integrations, and excellent documentation. Its extensive open source community is one of the meta-framework’s greatest strengths. The Gatsby community has already created over 2,000 plugins, so it’s very likely you’ll be able to find an already made tool to meet your needs.

3. Can easily transfer data.

 With Gatsby, you can load data from almost any data source, so you can use whatever tools you like best for managing content while still using React and GraphQL on the development side. Source plugins allow you to integrate with SaaS solutions and other third-party tools without extensive configuration, and Gatsby also provides API support for adding custom data.

This, says Karen White, is Gatsby’s big strength: “Gatsby introduces the concept of a “content mesh” to describe the way it links third-party platforms.”

“The content mesh is a move away from all-in-one, monolithic platforms toward a model where each third-party platform is contributing a specialized functionality to the overall architecture — allowing each platform to do what it does best and the content mesh to bring it all together in a cohesive way.”

4. Gatsby renders pages and routes with minimal problems.

Using just React, you would still have to make a Route for components in your pages folder. In Gatsby, however, by having a component in a pages folder, generates the page automatically — without a Router or switch.

Difficulties with the Gatsby Framework

Like most open source frameworks, Gatsby is still evolving. But as it stands now, there are a few downsides to working with it, depending on your development skills and the time you’re willing to commit to build.

1. Sharp learning curve.

If you’re willing to put in the time and effort, Gatsby has a lot of robust documentation available and an engaged community of users. And, as Matthew Bunday of Zen of React notes, “Pouring too much effort into building your online store using new technology could detract from your core business.”

2. Plugins and starters aren’t always the highest quality.

With open source development, you have to pay close attention to the quality of what you’re getting and what standards the builders are following. Kalin Chernev writes, “If GatsbyJS is to be taken seriously, the examples and starting points in the community should have better standards.”

3 Prominent Gatsby Use Cases

Use cases for Gatsby are always expanding, but here are the top three current use cases — including one commerce-specific use case in headless commerce.

1. Build a static site using a headless CMS.

If all you need is a static webpage that serves HTML, JavaScript, and CSS, Gatsby is an excellent choice. You can use it to create pages dynamically from almost any source. When you update content in your CMS, you can configure an automated trigger to update the content on the static site. That means the website is rebuilt only when the content is updated.

2. Create progressive web apps (PWA).

Gatsby is designed from the ground up to be a PWA framework. It comes with robust PWA features and is built to be fast and highly accessible.

Gatsby delivers a PWA-like experience because it pre-renders your site — there’s no server-side code, database, etc. Once it’s loaded, React takes over to deliver an app-like browsing experience and high perceived performance. Out-of-the-box optimization that comes along with Gatsby includes splitting code bundles, lazy-loading routes, pre-fetching important assets, and inlining critical CSS.

3. Create a headless ecommerce site.

Gatsby’s content mesh concept aligns well with the headless commerce approach of replacing all-in-one solutions with modularity and flexibility. Headless commerce decouples the frontend — or head — of the ecommerce site from the ecommerce engine powering the backend.

As Karen White explains: “A headless ecommerce site using BigCommerce would use BigCommerce to manage products, orders, and cart creation, but a technology other than Stencil to render the presentation layer. The alternative presentation layer could be a custom React front end, a CMS like WordPress or Drupal — or Gatsby.”

Evaluating if Gatsby Makes Sense for You

Whether or not you should be using Gatsby highly depends on your vision for your business and your in-house development capabilities.

If you have a team that’s comfortable with Gatsby’s related technologies, and especially if you already have a content management system you love, then using Gatsby for your ecommerce store is a great option. Stores that are very complex or adding new products frequently should take a closer look at the pros and cons before jumping in.

1. Do you want a static site, like a simple personal website or blog?

“Static” doesn’t mean that the content isn’t interactive or that it never changes. But static sites are a great choice for simple websites with a lot of content that doesn’t change often. While you don’t technically have to have a CMS to manage this content, it’s highly recommended to make working with that content easier.

2. Is your site complex?

Very complex sites with a lot of changing data and moving pieces may be slowed down by increasing build times. Also, if your site depends on data that isn’t retrieved until the page is rendered, you’ll lose the benefits of a statically generated page.

3. Do you already have dynamically generated routes?

If you have dynamically generated routes on your site, you won’t get the benefits of statically generated pages if you don’t know them at build time.

Conclusion

Gatsby is very popular among developers right now, and for good reason. Developers love React, on which Gatsby is based, and there are plenty of resources available around both React and Gatsby. It’s also highly flexible and extendable — and when paired with a headless content management system, it can be a fast and powerful way to deliver content.

Gatsby and similar static site generators are beginning to become popular for ecommerce stores as well — but that’s a bit more of a complex use case. We would suggest really digging into the requirements and capabilities before jumping in. For the right type of store with the right team, though, Gatsby can beautifully and quickly present a content-rich storefront with a stable, secure ecommerce backend.

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

SHARE

Victoria Fryer

Victoria Fryer

Victoria is a content marketing writer, researcher, and content project manager at BigCommerce. Specializing in writing and web content strategy, she previously spent eight years in public relations and marketing for Tier I research universities. She holds a B.A. in English Writing and Rhetoric from St. Edward’s University and a Master of Liberal Arts from Lock Haven University of Pennsylvania.

View all posts by Victoria Fryer

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.