The blazing-fast e-commerce site with Gatsby

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.