Sitecore Headless CMS: A Non-Technical Perspective

Introduction

A warning to anyone reading this article. It isn’t technical... I don’t consider myself a technical person. I consider myself someone who understands how the pieces fit together. This article is designed to help anyone understand the simple concepts and business value of headless and specifically Sitecore Headless CMS.

What does "headless" mean?

In the context of a Headless CMS, it means separating the content management layer from the content presentation layer. Or, separating content management from content delivery. It allows you to manage the content as you always have, but deliver this content how and where you choose. Why would Sitecore (or anyone else for that matter) remove the ability of the platform to deliver the content? It’s done this for years and it’s worked well, hasn’t it? More on this later.

What's the difference between "headless" and "composable"?

These two terms are often used interchangeably but are different things. Composable DXP is one of the 1000 buzz terms used in the marketplace right now. DXP is a Digital Experience Platform, which refers to a platform that not only can deliver content but relevant experiences via personalization and other features. Composable refers to the ability of a customer to create their own suite of solutions from the same or different platforms to create their own DXP. So, instead of buying one thing that does everything, you buy several things to meet your needs.

Composable allows both a company like Sitecore and the end user to be more focused and have more choices. Although Sitecore can offer everything required from a best-in-class composable DXP; it means no longer having to use the Sitecore Personalization features you need via Sitecore CMS or vice versa.

Headless is just another piece of the composable puzzle. Along with email marketing and personalization, content delivery is also a component of your composable DXP you now have more freedom and choice with. Think of it as one of the many pieces of the puzzle now that you can choose how to assemble.

What tech stack is used for Sitecore headless?

I know, I know, I said I wouldn’t get technical. I promise I still won’t, but it is important to understand some of the standard or default options when it comes to content delivery as well as the terminology used.

There are a few new concepts and components to be aware of when it comes to delivering content on a Headless CMS. There is plenty of specific documentation on this and architectural diagrams on the web. This is meant to be a high-level overview or explanation.

Sitecore Headless Services (AKA Sitecore JSS)

Sitecore JSS offers front-end developers a whole new way of working and interacting with Sitecore. Building a JavaScript app on top of Sitecore has never been easier. Simply use your favorite JavaScript framework and leverage the Sitecore capabilities to power your applications.

Sitecore Graph QL

The Sitecore GraphQL API is a generic GraphQL service platform on top of Sitecore. It hosts your data and presents it through GraphQL queries. The API supports real-time data using GraphQL subscriptions.

GraphQL is appropriate when you need a production-grade API to power a front end. Compared to traditional REST APIs, GraphQL is significantly more maintainable, far more easily discoverable and queryable (thanks to built-in GUI tools), much more bandwidth-efficient, and much more powerful.

Sitecore Headless SXA

Sitecore Headless SXA enables you to model your data in JSON (JavaScript Object Notation). For example, if you want to build a mobile app and feed it with SXA content, you can edit the JSON content on the page and have output content in JSON instead of HTML. This is available in the newest versions of Sitecore XM, XP and XM Cloud. It is the default way to build components and should be adhered to whenever possible.

Sitecore Experience Edge

Experience Edge for Experience Manager (XM) is an API-based service from Sitecore that gives you globally replicated, scalable access to your Sitecore Experience Platform items, layout, and media. You can use the standard publish tools in XM, but instead of rendering content from a self-hosted Content Delivery environment, Experience Edge provides you with a Sitecore-hosted GraphQL API. You can build your solution in any language and pull the content you need to power it with GraphQL.This of it as a true secure CDN to deliver content from.

React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

Next.JS

Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.

Tailwind CSS

Tailwind CSS is an open-source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.

Let's put the puzzle together

There are multiple different ways to put the puzzle together, so I will focus on the default option that Fishtank proposes when discussing with clients.

CMS: Sitecore XM or Sitecore XM Cloud

Don’t buy into XP it really doesn’t make sense, but depending on requirements and budget Sitecore XM can still make sense and sites can be built using the same stack as XM Cloud. If at all possible though you should just build on top of the latest and greatest which is XM Cloud.

Component Architecture: Sitecore Headless SXA

This was newly released to general availability as of Sitecore XP, XM 10.3 and is the way to start with components in XM Cloud.

SXA lets you create headless JavaScript Services (JSS) tenants and sites that make it easier to work with JSS apps. The headless tenants and sites help you scaffold your site and help you to import your JSS app in a structured way.

The JSS integration with SXA enables:

• SXA site management for JSS apps.
• Cross-site presentation sharing using page designs and partial designs.
• Cross-site content sharing.
• Cross-site reusability of renderings.
• Cross-site linking.

Component Styling and Toolkit: Tailwind CSS

As described above Tailwind is an open-source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.

What Tailwinds does provide though that is a game changer is a massive library of pre-built components that you can use in your project.

You can build a website significantly faster than you normally would build out custom components. Even if you want to start with one of the components and make it your own you can do that as well. You don’t have to use these pre-built components to use Tailwind though. Tailwind is still an amazing framework for CSS.

Site Hosting: Vercel (Next.JS)

Remember earlier when I spoke about the concept of headless de-coupling content management and content delivery? This is really where Vercel comes in. It manages the hosting of the website itself and renders the website. Vercel is nice as they have a tight partnership with Sitecore and you can purchase Vercel from Sitecore. There are other options such as Netlify. There is no wrong option, just need to choose the right one.

Content Delivery: Sitecore Experience Edge

This is essentially a CDN (content delivery network) that both caches and delivers content to your website or other channels.

Content Preview: GraphQL

The Sitecore Experience Edge for XM Preview GraphQL endpoint is a GraphQL endpoint that mirrors the schema and behavior of Sitecore Experience Edge for XM. It enables previewing, editing, and local development without publishing to Experience Edge. You can also use GraphQL within other channels to query Sitecore for content.

Why go headless? What's in it for my business?

This is the real meat and potatoes of this post. What is the value of my business going headless? I find where this discussion gets lost is when I hear, “I have no need to deliver content to multiple channels, so headless doesn’t make sense for me”. There are multiple other benefits I will discuss beyond the core use case of delivering content to multiple channels.

Website Performance

Headless architecture will provide you with a better-performing website. Moving the content delivery away from CMS infrastructure and towards client-side rendering via Vercel and Experience Edge will get the content closer to the end user at all times. You can also build new features and get them live much faster.

Future Proofing

Whether you decide to reap the benefits of headless architecture or not there is no denying it is the future. You will be spending the money and time at some point re-architecting your website. Costs are never going to get cheaper do this. Future-proof yourself to ensure you can scale when needed.

Reliance on Specialized Resourcing

In the traditional Sitecore world anyone working on the website needed to be a full-stack developer to perform many of the front-end tasks. They also need to know Sitecore. Finding full-stack developers that know Sitecore is not only difficult to find but expensive when you do. Now with headless, there is a much more clear delineation between the back-end and front-end. It’s much easier to find front-end react developers than full-stack Sitecore developers.

Conclusion

Start thinking about Sitecore Headless and talk with Fishtank about how to put together the best solution for your organization. Anyone who has or is looking into Sitecore needs to take a hard look at the headless/composable offerings and technical stack. Although this post is not technical, there are a lot of technical options to consider. We can help put together the best stack for you. about how to put together the best solution for your organization. Anyone who has or is looking into Sitecore needs to take a hard look at the headless/composable offerings and technical stack. Although this post is not technical, there are a lot of technical options to consider. We can help put together the best stack for you.