In e-commerce today, the challenge to meet and exceed customer expectations is driving innovation. The demand for frictionless shopping, 24/7 availability, superior product and impeccable service quality is ever increasing, putting pressure on retailers to deliver goods as seamlessly, quickly and engagingly as possible. Brands need to frequently update content to create attractive, compelling digital experiences while still delivering a seamless purchasing process.
e-Commerce merchants that want to grab a competitive edge by delivering better user experiences are increasingly transitioning to headless commerce, an approach to building a digital store that enables both content and commerce to thrive.
Headless commerce is a solution that decouples a website’s presentation layer (the front-end), from its business logic/function layer (the back-end). According to Adam Sturrock, former Vice President of Customer Success at Moltin, “Headless commerce essentially brings two concepts together – a turnkey SaaS back-end with the core commerce functionality and utility APIs as the delivery mechanism to connect the head”.
The Benefits of Headless Commerce
There are numerous benefits to headless commerce, including:
- A flexible front-end and the ability to create more unique content, helping to attract more organic traffic, an imperative in today’s crowded field;
- Greater opportunity to customize your website or app through more advanced personalization, AI or AR capabilities;
- Sales and marketing teams can easily make changes and updates to the presentation layer without necessarily needing support from IT;
- As a result of the microservices architecture, you have the option to swap providers as needed, as opposed to having to migrate to an entirely new e-commerce platform;
- Ability to leverage best-of-breed providers for various back-end functions (e.g. the search or product content does not need to live in the same platform at the cart/checkout solution);
- Technical teams typically see headless as a way to be more agile and faster in relation to handling their workload;
- The same back-end can power numerous front-end experiences, helping enable different options for different regions or countries, or enable multi-site needs;
- Easily adaptable around consumer preference with the chance to offer seamless digital experiences across multiple channels and devices (from desktop and mobile browsers to social media to emerging channels such as voice assistants or AR);
- You can use a Content Management System (CMS) you may have already invested in and simply add commerce capabilities;
- A lightweight API controls data transmission between different systems – product, content, customer data, financials, and other systems exist separately, free from front-end related code or processes, enabling faster delivery of content;
- Improved security because of the decoupling of content and commerce. Finely tuned access control lists (ACLs) can be used to limit access to specific users and systems;
- Greater efficiency with often lower costs as each microservice scales to meet demand.
Challenges with Headless Commerce
Despite all the advantages, there are some challenges with headless commerce, one of which stems from limitations with SEO around single page apps. Google’s primary indexing only looks at the HTML of a page and not content rendered by JavaScript. To solve this, many are starting to leverage server-side rendering of single page apps at the edge.
Another challenge is that routing to various API back-ends in a headless commerce setup can get complex, leading many to explore edge routing solutions. Edge Compute Platforms, such as CloudFlow, help simplify API routing by providing flexibility in how you choose to route traffic through a distributed application architecture.
One final challenge with headless commerce is the fact that authentication/authorization and content can prevent effective caching. At the same time, moving authentication to the edge can deliver performance benefits and also simplify the overall architecture of an application. There are various edge authorization techniques that can be used ranging from direct authentication at the edge from a stored database, to tokens, to SSO and OAuth. (If you’re looking for some guidance on authentication at the edge, contact a Webscale Engineer.)
Approaches to Headless Commerce
The standard approach to headless commerce involves the use of a commerce platform, such as BigCommerce or Magento, without a customer-facing front-end. APIs act as the core to interface with separate business systems, and the “head” is run by an independent system, such as a Content Management System (CMS) or a native mobile application. The external CMS can deliver responsive content created independently of the platform architecture. As there isn’t code connected to the back-end database that stores content, front-end developers can easily update endpoint layout using their desired framework.
A headless CMS has various distinguishable parts. The back-end database includes content, such as written copy and graphics. Headless commerce also uses a separate inventory management system that works in concert with the back-end database that stores the content. Other e-commerce back-end systems typically include customer relationship management systems (CRMs), multi-channel security systems, and payment processing platforms. The API is responsible for pulling information into the right system after specific actions are completed as opposed to simply providing content to different channels.
Other related approaches to the e-commerce technology stack include:
- A hybrid approach in which the retailer’s commerce platform is used for delivery of web-based experiences and the APIs help enable new channels and experiences, such as IoT or AR.
- A decoupled CMS that has a separate back-end but typically integrates with a complete front-end that pushes content into channels, making content more agnostic.
Edge Computing Enabling Greater Innovation
Headless commerce and other innovative, flexible computing architectures are enabling e-commerce application engineers to leverage edge computing to meet their performance, security and scalability requirements. At Webscale, we are seeing many of our e-commerce clients increasingly utilize headless commerce in concert with CloudFlow’s Edge Compute Platform to deliver personalized shopping experiences and digital services that speed up delivery and maximize performance using techniques such as caching and image optimization.
We are working, for instance, with Australia’s largest online beauty store, Adore Beauty, to deliver its Nuxt app closer to their end users, resulting in reduced latency and greater cost efficiencies. Specifically, the Adore Beauty team is utilizing the CloudFlow Node JS edge module – the front-end framework (i.e. Nuxt app) calls a Laravel API that manages information related to the product, category and price. Other requests are routed to its highly customized Magento back-end.
CloudFlow’s modular approach allows e-commerce brands like Adore Beauty to leverage the combined advantages of edge computing and headless commerce through flexibility of integration and the opportunity to select the CloudFlow edge modules relevant to their needs, from caching to A/B Testing to image optimization. New software options and changing technology stacks allow businesses to select best-of-breed solutions, linking otherwise unrelated software tools and technologies.
Looking Ahead
There have been rapid advances in the retail space over the last decade as e-commerce has increasingly dominated the space over brick-and-mortar retail. Further innovation through continued advancements in edge computing looks set to continue apace. Small and big businesses alike need to take advantage of cutting-edge technology in order to compete in today’s highly competitive global retail industry. The gap between early adopters of headless commerce and edge computing and those still stuck in legacy systems looks only set to widen.
