The blazing-fast e-commerce site with Gatsby

15 Mar 2021
Meshal Chalil

This article will help the members who already have basic knowledge of how Gatsby works and who have the question of how to use Gatsby JS to build a blazing fast e-commerce site.

If you are new to gatsby the below link will give you an overall idea about gatsby.

https://www.gatsbyjs.org/

Gatsby is a React-based, static site generator framework, building an e-commerce site in gatsby is all about how we are approaching an e-commerce site as a static site. So let’s start with grouping our e-commerce site data as to which data should be rendered as static or dynamic react components in our website, this will vary based on each site. Data like Page layouts, copyright contents site logo, etc will be static maybe this will be changed yearly but sure this is not Dynamic data that vary in each second, but the product inventory, live order tracking, etc will vary in each second so this kind of data should be rendered as a dynamic react component.

If you are interested in knowing the best practices on how to make a webpage as a hybrid page with static and dynamic react components please explore the below link.

https://gatsbyguides.com/tutorial/create-hybrid-pages

What about the price, catalog, promotion details which will vary in each hour or in each day this kind of data we need to make it as static components. In this scenario, the gatsby cloud webhook leverages us to rebuild the gatsby nodes once the data got changed in our ERP system or in our CMS system, or in other third-party systems.

As we mentioned above, Once the webhooks are triggered, it internally triggers our site build. Gatsby Caching mechanism plays a major role during the build. Refer to the below links for more detailed information

https://www.gatsbyjs.com/docs/webhook/

So now we have a better picture of gatsby approach to make our e-commerce sites blazing fast.

Let me include two more points with this article to conclude the entire gatsby approach to build a blazing fast e-commerce site.

1) Gatsby Data Fetch Strategies during Build Time

As we mentioned above if the webhooks triggered the site rebuild will start, in the rebuild time what will happen in the e-commerce storefront, as mentioned above gatsby cache API playing a major role in e-commerce storefront data rendering at Build time.

Explore the below links to get an overall idea about how the build time data rendering is happening in a gatsby site.

https://www.gatsbyjs.org/docs/data-fetching/https://www.gatsbyjs.org/docs/build-caching

2) Gatsby approach to Handle Static data Updates

Let’s consider the case where a single data was changed on the ERP side for the past hour. Webhooks trigger the build and the site build starts. Do I really have to invoke a complete rebuild? Nah, what will happen if I have 1000+ API calls? It’s going to be unnecessary. There are many ways to address this issue, most of the source plugins follow the timestamp approach.

Explore more on this with gatsby source plugin docs

https://www.gatsbyjs.org/docs/creating-a-source-plugin/

also, explore the timestamp gatsby source plugin approach used in the contentful CMS system.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful

Hope this will help the one who is planning to migrate or build a new e-commerce site using gatsby.

LATEST ARTICLES

E-COMMERCE
The Crucial Role of Payment Gateway Testing in eCommerce

In today's digital age, eCommerce has revolutionized the way we shop and do business. From ordering groceries online to booking flight tickets, almost every transaction is now done through the internet. Central to the success of eCommerce is the secure and efficient processing of payments, and this is where payment gateways come into play. Payment gateway testing is an indispensable step in ensur

31 Jan 2024
Read More
E-COMMERCE
Driving Success: The Crucial Role of Digital Marketing in eCommerce

More than 60% of the urban population prefers online shopping over offline shopping. As consumers are searching for your product on the online medium, brands must be present where consumers are! Digital marketing is not limited to reaching out to customers; it is important to gain quality leads and reach consumers who are in search of your products and services. The right digital marketing strate

23 Jan 2024
Read More
TECHNOLOGY
Mastering eCommerce Excellence: A Symphony of Top Tools for Testing and Automation

In the pulsating heart of the eCommerce universe, where every click, every pixel, and every transaction resonates with user satisfaction, the role of cutting-edge testing and automation tools becomes paramount. As we set sail into the era of digital commerce, let's unfurl the sails and explore the magnificent arsenal of tools that empower testers to ensure flawless functionality, robust performan

17 Jan 2024
Read More