Why Ecommerce Developers are Using Gatsby JS to Make Complex Storefronts Simple

Building quality web experiences that compel shoppers to make a buying decision is hard.

There are more tools than ever before, but having these tools work well together isn’t easy. There have never been more valuable ecommerce APIs and services available, but housing them under one roof can lead to fragmented sites that provide a suboptimal customer experience.

That’s why Gatsby JS was created. The platform provides a React JS-based framework that makes it Gatseasy to bring disparate APIs and systems together on one site, making for a singular ecommerce experience for customers.

Gatsby empowers ecommerce developers to build sites quicker, deploy seamlessly and reduce security vulnerabilities. That enables ecommerce companies the capacity to leverage any API to enhance the purchase path.

The platform is steadily increasing its market share as well, almost doubling the number of sites it serves in the last two years. Now, more than 228,000 sites use Gatsby, including BigCommerce client Ubisoft.

Strictly technically speaking, 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 layman’s terms, it makes sure a bunch of programs play nice together so your website works right.

Gatsby websites run on Jamstack architecture, which uses JavaScript, APIs and HTML markup and doesn’t need to pull from a database or server-side programming language. This enables sites to be hosted by an object storage service or content delivery network (CDN), which means quicker load times, easier hosting and easier development.

Multiple rendering options.

Gatsby also offers a variety of rendering options, making it a flexible option with multiple use cases.

Static Site Generator (SSG)

The Gatsby SSG is a more flexible option than traditional database-driven content management systems such as Wordpress or Drupal. Gatsby loads JSON from GraphQL, merges data and creates an HTML page that is deployed to the server as static files. This reduces the latency that sites run by databases experience.

Deferred Static Generator (DSG)

Gatsby allows sites to defer non-critical page generation to increase load times. This allows developers to generate only the most important pages during a build. Less trafficked pages are then rendered only when accessed by site users. This is especially useful for large and complex sites.

Server-Side Rendering (SSR)

SSR allows sites to pre-render pages with content when a page is visited. In general, SSG and DSG are considered preferable options, but SSR does have use cases. Pages that require personalization or location-specific data are better handled by SSR.

React Framework.

React is an efficient, flexible JavaScript library for building user interfaces that provides developers with the core functionality for building sites. It builds modular components, which are especially useful when managing complicated user experiences.

GraphQL.

GraphQL is a query language for APIs that responds to data requests. These requests can be structured declaratively to query APIs for exactly what is needed, without involving unnecessary data.

Webpack.

Webpack is an open-source module bundler for JavaScript that places all assets in a dependency graph. This is preferable for easier styling, code splitting, more control in how assets are processed, stable production deploys and faster load speeds.

Gatsby offers multiple paths to site building. It’s designed to connect to third-party applications and is customizable, but also offers new users easy to use templates to get them started.

Gatsby offers three development methods: plugins, themes and starters.

Plugins.

Gatsby includes basic site functionality that is easily integrated as Node.js packages. Common plugins include analytics platforms, responsive content and SEO enhancements.

Themes.

Gatsby themes expand on plugins to create themes that include pre-configured features, data sourcing and code to sites. All data configuration is compiled into an installable package, making integration simple.

Starter.

Gatsby starters are standard templates that can be reused and customized. These are used to build the foundation of sites and can be fully built-out sites or just the skeleton of one.

Headless Commerce

Made for speed and flexibility, BigCommerce has the most headless integrations.

Learn More

Gatsby leverages several key features to deliver fast sites that are developer-friendly and supported by a large base of users.

Built for performance.

Gatsby sites are built with performance at top of mind. By pre-rendering pages and reducing the need for servers to generate pages, the end user experience is considerably improved.

In one test, the Gatsby SSG loaded twice as fast as a React application and five times as fast as a highly complex site.

Open source ecosystem.

Gatsby has an extensive plugin ecosystem, powerful integrations and excellent documentation. Its extensive open source community has already created more than 2,000 plugins and a massive presence on GitHub.

If a developer has a problem, it’s very likely that the community has already created a solution for it.

Can easily transfer data.

By design, the platform easily integrates third-party platforms, allowing developers to quickly load data from any source. This makes for a better user experience and flexibility during the development process.

Gatsby renders pages and routes with minimal problems.

Using just React, a route would have to be built for components. With Gatsby, though, having a component in a pages folder generates the page automatically, removing the need for a router or switch.

Integrates with popular headless CMSes.

A headless CMS decouples the content repository from the presentation layer, allowing content to be deployed across any frontend, separate from the backend.

They’re better used for sites with multiple digital touchpoints, like modern ecommerce sites. Gatsby works well with most headless platforms.

Gatsby is not a finished product — and it may never be. As an open-source platform, Gatsby is always evolving and becoming ”new Gatsby,” which means that the tool is in a constant state of flux and can be difficult to work with.

Steep learning curve.

Gatsby does a lot, which means there’s a lot to learn. Fully understanding the platform and how to leverage it to its fullest can take hundreds, if not thousands, of development hours. There is significant documentation and multiple tutorials to get your started with the Gatsby project.

Plugins and starters aren’t always the highest quality.

Having support from a robust community means that there are thousands of plugins and starters available. However, governance and testing of these can be dubious. There are some builders that have the trust of the community — and then there are some that don’t. The buyer should beware.

Larger sites can have slow build times.

The more complex the site, the slower the build time and deployment is. However, updates to the platform are cutting this down significantly. Gatsby Cloud Builds uses caching and incremental builds to complete site builds in seconds.

New use cases for Gatsby are expanding, but here are three prominent use cases — including one commerce-specific use case in headless commerce.

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. Pages are created dynamically using third-party data and sites are rebuilt only when content is updated.

Create progressive web apps (PWA).

Gatsby delivers a PWA-like experience because it pre-renders sites — there’s no server-side code or database. Once it’s loaded, React takes over to deliver an app-like browsing experience.

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.

Create a headless ecommerce site.

Gatsby’s content mesh approach works well with a headless CMS. Increasingly, ecommerce platforms are adopting this approach to provide maximum flexibility in deploying content to multiple channels. Gatsby excels at supporting this.

Most ecommerce sites that use Gatsby do so for the advanced React framework, the need to optimize performance and and require a framework that works well with legacy systems. Sites that are considering Gatsby need to ask further questions, however, before jumping in.

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

Static sites are ideal for large platforms with a significant amount of content that don’t change often. Working with an established CMS is recommended.

Is your site complex?

By complex, we mean sites with a significant amount of content that frequently changes. It might feature multiple APIs on the homepage alone that may slow build times and potentially negatively impact the user experience.

Do you already have dynamically generated routes?

If you do, Gatsby enables developers to create client-only routes that require authentication.

Your Guide to Headless Commerce

Ready to learn more about Headless and what it can do for your business?

Download Now

Gatsby is increasingly popular with ecommerce developers, who cite the React framework and community support as differentiators. The platform is flexible, extendable and works well with modern headless CMSs to deliver on almost any need.

The Gatsby SSG also works seamlessly with BigCommerce to build quick, robust storefronts to remove friction in the purchase path. It easily compiles BigCommerce Catalog, Cart and Checkout and other APIs like Stripe into a single platform that gives the end user exactly what they want and how they want it.