Headless? What’s in a name?
In most of the conversations we have about digital strategy these days, the phrase “headless solution” comes up. While the term itself has become ubiquitous, we’ve noticed confusion around what it actually means. So, it’s worth defining what a headless solution means in the context of content management and e-commerce systems.
At the simplest level, headless means a platform that has been architected to separate how content (which can be anything from product information to marketing messages to FAQs to how-to's and beyond) is managed and stored in the back end of the content management system (CMS) from how it is served to the consumers of it on the front end.
I say “served” intentionally, because “being displayed” doesn’t cover the front-end load anymore. While websites and mobile apps still display content, content is increasingly consumed through voice assistants as well — think Alexa, Siri, and Google Home. And the billions of IoT devices out there will only accelerate the diversification of channels, all of which will increasingly require personalized content.
One way this gets talked about is as client-side rendering versus server-side. While headless solutions can, and indeed often do render content on the client-side, headless is less about rendering and more about architecture, including, as we’ll see below, how your content gets stored. But before getting into that, we need to debunk another myth about headless.
Headless is a technology concept, not a UX one.
Headless is not a marketing, design, or user experience (UX) concept, it’s a technology one.
Whether your site’s architecture is headless or non-headless, your visitors’ experiences can be the same. Whenever someone visits a website or uses a mobile app, their experience is based on what is displayed — not how it’s rendered. While headless can offer various ways of rendering content (server-side or client-side), there’s nothing in headless architecture that necessitates how it’s displayed.
The great benefit of headless, in fact, is the ability to store and manage content without a fixed relation to how it gets displayed. Because the back-end storage and management is separated from the front-end delivery, you can make content that’s re-useable and flexible. With the right headless solution, the same product-description page can be displayed on your website, accessed via your mobile app, or read out loud by Siri. Without headless, you would need three versions.
The reason headless gets associated with rich user experiences is that many developers like to use client-side, JavaScript frameworks, such as React, Angular, or Vue, to implement the user interface (UI) layer, rather than using server-side renderings like MVC. But to use a client-side rendering framework, developers need a platform that stores, manages, and offers up content without any presentation details. And this is accomplished by means of an application program interface (API). The drivers are technology and skills, not really UX options.
The choice between using client-side or server-side rendering depends on a lot of factors, like the availability and skill set of your developers, your approach to testing, continuous integration or deployments, and much more.
Both approaches have pros and cons that you should consider when thinking through the appropriate commerce solution for your organization. Explaining these goes well beyond the scope of this article. It’s sufficient to say that while the end user’s experience can be the same whether your solution is headless or not, a headless solution might be a better option for your organization depending on your goals.
Sitecore Experience Platform is a headless solution — it always has been.
The Sitecore Experience Platform has been headless from the start — with a strict separation between content storage and management and presentation.
Its Web Item API offers programmatic access to content, empowering you to use and render it in any form in any client.
While Sitecore offers a “head” out of the box with solutions like the Sitecore Experience Accelerator and the Sitecore Storefront, our solution has never been limited to these. By being an open platform, which separates content and presentation and offers APIs, Sitecore gives you total freedom — implement, render, and deliver your content however you want and to any channel.
But the Sitecore Experience Platform offers much more than most headless CMSs by:
- Learning from your customers’ journeys
- Enabling you to deliver a truly personalized experience for every visitor
- Making it easy for you to test and discover what works best
- Empowering you to deliver relevant content to customers as they browse and shop
- Allowing you to integrate marketing campaigns and follow-up actions that tie together everything from visiting your homepage to adding a product to the cart
Headless as a concept is too-often reduced to “the ability to deliver content by means of an API.” While this defines many of the headless-first or API-only solutions in the market, Sitecore’s headless provides the ability to deliver personalized customer experiences across channels and rendering technology. While cross-channel delivery and the repurposing of content are great benefits, we don’t think they’re worth the cost of losing customer intelligence. In contrast to much of the market, our headless solution lets you have the benefits of headless without paying the steep cost of lost intelligence.
How to lose your head, without losing your brain
Both the Sitecore Experience Platform and Sitecore Experience Commerce are designed for extensibility, leveraging a microservices-based architecture throughout. This means there can be various API entry points to fetch content or product information, or to perform actions such as adding a product to a cart or going through the checkout process. But given the various entry points, you need to understand the best practices.
When integrating any front-end with the Sitecore platform, it’s critical to ensure you integrate into the right layer of the application. This allows you to leverage the strengths of the whole platform.
Commerce actions (such as cart and checkout), for example, are handled by the Commerce engine from a transactional, data access, and data storage perspective. And while the Commerce engine offers an extensive microservice-API, it’s not meant to be called directly (except for data integration with 3rd party systems).
Commerce Connect API
Instead, it’s much better to use the Commerce Connect API layer, which enriches all commerce actions and data by:
- Adding the user and security context
- Tying into marketing automation features
- Offering performance optimizations such as multilevel caching
- Collecting detailed analytics, and more
So even though the commerce engine API offers the methods to perform certain actions, it is not the API to call from your client application. Instead, always make sure to use and leverage Commerce Connect. Even when this layer is not directly exposed to your client, all that’s needed is a façade/proxy controller that relays the data between your client, in your chosen format (JSON, etc.) to the Commerce Connect API.
Sitecore Web Item API and JSS
The Sitecore Web Item API provides a direct way to access content in Sitecore. It does not, however, provide access to the personalization, testing, analytics, and other features of the Sitecore Experience Platform. While most of the other headless (or “API-first”) solutions on the market offer only something like this API, this API is just the beginning with Sitecore. Sitecore also offers Sitecore JavaScript Services (JSS). Sitecore JSS:
- Provides a full JavaScript-based API for your client applications to use
- Handles all security, authentication, and user context needs
- Tracks behavior into Sitecore Experience Database (xDB)
- Even lets content editors determine what needs to be displayed (page composition by means of the layout service), without interfering in any way with how it is being displayed (rendering)
By continuously innovating and providing solutions that are full-featured, open, and UI-agnostic, Sitecore allows you to lose your head without losing your brain, maximizing your investment in the platform and delivering exceptional customer experiences.
See it in action
Many of our partners already leverage everything the Sitecore platform has to offer.
Our partner EPAM, for example, has developed an accelerator for headless commerce with Sitecore, using JSS, providing it to the community as an open-source solution. For those looking to learn more about developing a Sitecore JSS site on top of Sitecore Commerce, this series of posts on Sitecore JSS Commerce, by Aviva’s Commerce MVPs Jonne Kats and Joost Meijles, provides illuminating and actionable insight.
A Global Commerce Solution Architect at Sitecore, Timothy Steleman helps Sitecore partners and customers get the maximum value out of both the Sitecore Experience Platform and Sitecore Experience Commerce. Follow him on LinkedIn