Headless CMS explained in 1 minute (ssr)

Written by Knut Melvær

Missing Image!

What is a Headless CMS?

A headless CMS is a content management system that separates where your content is stored (the “body”) from where it is presented (the “head“). You can store the content in your headless CMS and then send it to display anywhere – offering a lot more flexibility as to how it's presented in different places.

The “head” relates to where your content ends up, and the “body” is where your content is stored and authored. This might sound a little strange at first, but the point of a headless CMS isn't that you don't want or need a head, it's that you get to pick and choose which heads (outputs) you send your content to.

Check out this video, where our CTO quickly illustrates the concept using pen and paper:

Headless CMS vs Traditional CMS

As opposed to headless, a “traditional CMS” is software that you either install and have to manage on your own, or on a managed server environment. Traditional CMSes are also called “monolithic” because they pack all the functionality and assumptions for how you want to work into a single system. Traditional CMSes often provide a “What You See Is What You Get” (WYSIWYG) content editing interface because they only have one context for presenting the content – usually a web page.

Architectural diagram of traditional CMS vs headless cms.

In the last few years, we have seen an uptick of CMSes that try to be more flexible in their ways of making content available. These are usually called “Headless” or “API-first” CMSes. Some of them market themselves as “Content infrastructure,” “Content Hubs” or even “Content as a Service.”

However, when you take a closer look, they all pretty much boil down to some database backend with a web-based user interface, and content made accessible through an API.

At Sanity we see today’s headless CMS systems as an evolutionary step that leads to an even better way of managing content – where structure is truly flexible, content is treated like data, and editors work in tailored real-time collaboration environments.

What about Decoupled CMSes?

As a response to the introduction of headless CMSes, some of the traditional CMS vendors have built APIs on top of their systems and market them as “decoupled.”

The decoupled approach promises both website rendering capabilities and the flexibility of headless. However, the catch is that decoupled CMS APIs are heavily influenced by a model built for a single website. When it boils down to it, this is a form of coupling and restricts the amount of contexts that your content can reasonably be applied to.

Decoupled CMSes are adding APIs on top to serve content
Headless CMSes are API-exclusive

Comparison: Headless CMS vs. Traditional CMS

How does a Headless CMS work?

A headless CMS works by:

Giving editors an interface for managing content.
Providing that content via APIs for developers to query and build applications with.

Most headless CMSes are offered as a Software as a Service (SaaS), meaning that your editors will have to log into a web application and that the APIs are hosted in a cloud-based backend. Some headless CMSes will let you host the whole solution on your own server and database. In this model means you have to do your own scaling and operations.

Sanity lets you host the react-based customizable editing interface yourself, and you get the no-ops and scaling-friendly advantages of a hosted real-time backend. In many ways Sanity is a superset of a headless CMS – because it’s more flexible, offers real-time collaboration, and it treats your content (even rich text) as data. You can use it to power products of any kind.

Headless CMS Benefits

Faster editing experiences

Traditional CMS architectures have to spend resources on content editing, and content rendering. A headless CMS has an advantage over traditional alternatives because it doesn’t have to deal with the rendering side of things. That’s left to other more specialized parts of your stack.

Manage content for more channels

Truly headless content isn’t tied to a single presentation concern (e.g. website), so it can find an audience across multiple channels. You can use a headless CMS to manage content for apps and websites. You can even manage your internal/admin content in the same place and extract more value from it that way.

Developer flexibility

Because headless content is served over APIs, developers can choose their own frontend tooling. If you’d prefer to work with Javascript instead of PHP or Ruby, you can do that. You can also interchange parts of your stack, or move from one framework to another without affecting the CMS.

Easier scaling

Headless lets you manage your content from a single source of truth, change developer tools at any time, and benefit from sending your content to high-performance cloud-based hosting and build services like Vercel and Netlify.

Enhanced security

Because headless content is separated from the presentation layer it’s a smaller area of attack.

Use cases for Headless CMS

Websites & web apps

They’re a popular choice in high performing “Jamstack” sites and work with static-site-generators like Gatsby, 11ty, and Next. They can also be used for web apps and are popular with modern Javascript Frameworks such React, Vue.js, Svelte, and Angular.

Products & services

A well-designed headless CMS won’t be geared towards a page-based content structure (that should be easy to create, but optional). If this is the case, you can manage content for any product or service: voice assistants, digital kiosks, print, websites – all from the same place.

E-commerce sites

Some headless CMSes are flexible enough to be provisioned as an E-commerce back end. With Sanity you can also integrate headless content with existing E-commerce platforms and product inventory management systems like Shopify and SAP Hybris.

How do I choose the right headless CMS?

There are a lot of options out there, and it can be challenging to navigate their many features. We think it’s best to aim for a CMS that can let you grow, and be adapted as your needs evolve. Here’s a list of questions you can ask yourself in order to better evaluate the field:

Can I create the kinds of content structures I really need with it?
Do I want, or need to, look after content hosting and maintenance myself?
Will my content be stored in a secure and privacy compliant manner?
Would real-time editing and collaboration improve my workflows?
Will my rich text content be locked to HTML?
Can I scale my content ops without falling off a price cliff?
How does it manage files and image assets?

headlessCMS.org offers a fairly comprehensive list of headless content management systems. It’s geared towards Jamstack sites, but a few of them are like Sanity, and can be used for applications outside of the Jamstack.

Sanity: more than a headless CMS

Comparison of the Sanity Structured Content Platform to traditional and headless content management systems.

Sanity’s features go beyond the offerings of popular headless CMSes, and the older monolithic CMSes on the market. Here’s why:

You get real-time collaborative editing out of the box
Content structures are truly flexible
Rich text content is HTML-free. We’re the only platform that treats content as data.
You get a fully open-sourced and standalone editor built in React
You get a full API-suite with the same backend capabilities as Sanity Studio

Sanity is the platform for structured content that lets you build better digital experiences. By treating content as data, organizations use our APIs to build optimal editing workflows and share content between systems to increase digital velocity. Our mission is to be the most versatile system for creating and distributing digital content to any device, application or channel.