Headless eCommerce Frontend Frameworks
Headless eCommerce isn’t mainstream yet, but it’s gaining a lot of traction. In this article, we’re going to do a quick breakdown of the most popular frontend frameworks powering headless eCommerce.
If you’re unfamiliar with frontend frameworks, they’re essentially bundles of JavaScript that help provide a structure for building websites and applications. The concept is similar to the framework of a house which provides instructions for installing windows, doors and specific rooms.
In the case of frontend frameworks, they’re providing instructions for structuring HTML, CSS and JavaScript. This structure makes applications more straightforward and quicker to develop. That’s a big part of the reason why companies like Google (Angular.js) and Facebook (React.js) invested the resources to create their own frontend frameworks.
Not every frontend framework makes for a perfect fit with headless eCommerce. However, frameworks like Next.js, Gatsby and Vue Storefront have pushed a ton of great features and integrations that help developers launch eCommerce stores easily over the last few years.
This article aims to touch on the most popular frontend frameworks for building headless eCommerce platforms and dig into the pros and cons of each. For the sake of this article, we’re going to classify static site generators as frontend frameworks.
Frontend Frameworks
There are hundreds (maybe thousands) of frontend frameworks. It would be impractical to try and review every single one, so we’re going to stick to the major players. We’re also going to keep this review focused on the resources and tools available for each framework to facilitate headless eCommerce development.
Here’s a list in case you want to jump forward:
React
React is arguably the most popular frontend framework for building headless eCommerce stores. Given Gatsby and Next.js are built on top of React, they collectively power a decent percentage of headless stores, and the big eCommerce engines are taking notice.
Both Shopify and BigCommerce have official documentation explaining how to add React components using Node Package Manager (NPM).
Shopify has even launched its own React-based framework for building headless eCommerce stores!
Holding over 40% of the frontend framework market share, React deserves to sit at number 1 on this list.
Vue
Vue has been gaining a lot of popularity over the past few years. Created by Evan You after working at Google, the framework aimed to take the best parts of Angular and package them together into a new framework.
This approach caught a lot of attention in the development community and Vue’s adoption has skyrocketed since its inception.
While Vue doesn’t command the same market share as React, it’s recognised by the Shopify development team in this tutorial on prototyping web applications using Vue and Shopify.
Vue.js has also been mutated into several different frameworks that have taken headless eCommerce into their design, such as Vue Storefront, Nuxt, and Vuepress.
Angular
Angular.js is spoken in the same breath as React when discussing frontend frameworks. Developed by Google, Angular has a reputation for being the framework of choice for larger, complex enterprise-grade applications. It also owns over 20% of the frontend framework market share.
Angular can achieve the same outcomes as Vue and React; however, the support for eCommerce integrations is nowhere near as popular.
Shopify and BigCommerce don’t provide resources for Angular development, and it’s pretty clear that they favour React. There are enough articles scattered across the developer forums asking how to implement React-based tutorials for Angular to indicate which direction headless eCommerce is heading.
API focused platforms like Shopware and Saleor have tried to stay a little more neutral and provide support to Angular developers, but they’re lacking compared to the React resources.
Despite the lack of support, Angular still gets the nod as one of the primary headless eCommerce frameworks simply because of its popularity and potential for creating fully-featured applications.
Next.js
Next.js is arguably the most popular framework for headless eCommerce. To give some context to this claim, a few notable companies using Next.js are McDonald’s, Apple, Walmart and Nike.
Next provides deep and incredibly useful tooling for setting up headless eCommerce stores. Most notably, Next.js Commerce is a starter kit for quickly spinning up a store using Next.js and whatever headless-friendly eCommerce platform you would like to integrate.
All the major eCommerce platforms provide extensive resources, integration guides and plugins for connecting Next.js. Some resources are listed below:
- BigCommerce + Storyblok + Next.js demo store
- BigCommerce + Next.js official demo store
- Saleor’s webinar tutorial on integrating Next.js
- Node Package Manager tooling for connecting Next.js and Shopify
You can see from the examples above that BigCommerce makes a great eCommerce engine for combining with Next.js. We recently compared headless Shopify to headless BigCommerce. It’s worth a read before you commit to either solution.
Next.js is a static site generator with dynamic content generation potential. Being able to render content at build time means it can create incredibly performant eCommerce stores. While having the potential to dynamically generate content answers some of the edge cases that cause static site generators issues.
Gatsby
Gatsby is another React-based static site generating framework. Gatsby has gained popularity and attention by achieving incredible website performance and scalability out of the box.
Unlike Next.js, Gatsby has a library of plugins that developers can use to integrate 3rd party applications or quickly extend web applications. The Gatsby community maintains plugins to connect to the most popular eCommerce engines such as Shopify, BigCommerce, Shopware, Magento, etc.
Gatsby’s resources for helping the development community build headless eCommerce platforms rivals Next.js:
- Demo store built with Gatsby + Shopify
- Demo store built with Gatsby + BigCommerce
- Gatsby official guide to working with Shopify
- Node Package Manager tooling for connecting Gatsby and Shopware
Earlier this year, we spent the best part of 300 development hours building a headless Shopify store that Gatsby powers. We even wrote up a case study to document the experience.
Vue Storefront
Vue Storefront is a Y-Combinator backed open-source frontend framework intended to power headless eCommerce. Unlike the frameworks we’ve mentioned so far, Vue Storefront is the first framework dedicated to headless eCommerce.
Built on top of Vue.js, Vue Storefront operates as a Progressive Web Application (PWA) out of the box, bringing with it a bunch of great features that can enhance the eCommerce customer experience.
Claiming to power more than 800 active sites, Vue Storefront is an attractive offer for businesses that need to leverage headless eCommerce functionality. Browsing through their live case studies, it’s clear that European businesses are flocking to Vue Storefront. This trend is probably because headless eCommerce is the solution to multicurrency and multilingual support.
The guys that created Vue Storefront, Auerate Labs, have put a ton of resources into developing integrations with popular eCommerce engines like Shopify and BigCommerce.
They’re also the exclusive frontend framework partner of Shopware. Under this partnership, Auerate Labs and Shopware have created an open-source PWA store that’s powered by Vue Storefront and Shopware. Both platforms are open-source, which opens up another world of customisation and flexibility.
Nuxt
Nuxt is essentially the Vue.js version of Next.js. It’s a frontend framework that can generate site statically but is also capable of server-side rendering to create dynamic content.
Surprisingly, Nuxt was released around the same time as Next.js but hasn’t seen anywhere near the same amount of attention, probably because Vue is less popular than React.
Regardless of its small following, Nuxt has a dedicated developer following that has released handy tools and integrations to help build eCommerce sites:
If you’re looking for a frontend framework and have already adopted Vue but want to leverage the performance benefits of static site generation, then Nuxt is an excellent choice.
Other solutions
There are heaps of other frameworks you could pick up to power your headless eCommerce store. A few notable mentions are Jekyll, Hugo and Vuepress. However, we wanted to stick to the most popular options.
If you’re interested in browsing through a more comprehensive list of static site generating frontend frameworks, the guys at Jamstack.org have you covered. They’ve compiled a list of over 300 static site generators.
What’s the best frontend framework for headless eCommerce?
This answer is entirely unscientific and mainly based on our experience and anecdotal evidence, so please take it with a grain of salt.
We would award the best framework to Next.js, closely followed by Gatsby and then Vue Storefront. Next.js is drawing the most attention from global eCommerce brands. It pairs so nicely with BigCommerce, and the results speak for themselves.
In saying this, we’ve worked extensively with Gatsby and successfully used it to build highly optimised and robust stores. It’s an excellent platform and growing rapidly.
Vue Storefront deserves to be mentioned closely behind these two frameworks. While a single agency controls its development, it’s open-source and dedicated to headless eCommerce, which is a claim that Next.js and Gatsby can’t make.
Choosing any of these options in your headless eCommerce store’s architecture is a wise move and will help you deliver an unparalleled user experience!
Get in contact
If you’re shopping around to figure out the best frontend framework for your project but need development help or guidance to get it off the ground, then go ahead and drop us a quick line. We’re always happy to jump on a call and provide advice.
