All About Headless CMSes

It has been a very long time since I last developed a website that did not have some form of content management system integrated into it. The importance for the average website owner to be able to own, control, and dynamically update their own content has risen and risen over time: websites are not set‑and‑forget types of brochureware or shopfronts that only need updating very rarely anymore.

No wonder then that of the estimated 400 million active websites online, CMS‑powered websites make up somewhere in the region of 63 million of that number ‑ with the remaining 39% who fall under 'other' inevitably still having some form of content management available, but less easy to detect ‑ like in the case of statically‑generated sites.

It is fair to say that CMSes have been around for a long, long time and are widespread. But are they now outdated? I'm sure we've all dug into the at‑times bloated, ancient monolith that is the WordPress codebase, and I'm sure we've had nightmares about CMSes that aren't even as up‑to‑date as that (looking at you, Drupal).

At the same time, as the web has grown, more and more interfaces have become involved. Big corporate board displays, TVs in showroom halls, mobiles, web apps, native apps, digital billboards ‑ so many different shapes and sizes and presentational contexts!

How do you manage all of these separate displays, with completely different requirements, without having to set up multiple bulky, heavy CMS instances and keep them all synced with one another?

Luckily, there's an answer: using a single source of truth; the Headless CMS.

What is a Headless CMS?

A Headless CMS is a content management system that purely focuses on the content, rather than anything on the front end or any kind of presentational logic. Think of it like WordPress, but without the website to accompany it. Instead of a website‑builder‑type preview, the user gets a set of form inputs. It does not output a website directly but offers up your content via an API.

Why is a Headless CMS Useful?

Headless CMSes decouple your data from any presentational constraints. Instead, it exposes your content via an API, which you authenticate against and then fetch from other interfaces (like apps, or websites, or even smart motorway signage).

This is extremely useful because it means that you can share a single source of truth between multiple different interfaces ‑ which is amazing because it means you can develop individual front ends and display your data in the best way possible on each device or for each website or app that you want to display your data.

That Sounds Great! What's the catch?

Well, the catch is that it takes a little more technical know‑how to get this set up. The payoff can be great ‑ enabling you to use static site generators, use your data across multiple entirely different devices or locations, and open up your data for use totally independent of any tech stack or platform.

Who Needs a Headless CMS?

Whether or not a Headless CMS solution is the best choice for a project depends on a wide variety of project‑specific requirements and client restrictions. With regular CMS solutions, projects can get up and running in a matter of minutes (literally ‑ famously ‑ five minutes) and can do so without much ‑ if any ‑ developer intervention.

Headless CMSes require a lot more hands‑on development. The tradeoff though is that they're much more versatile ‑ so if your project needs that freedom of platform and tech stack, a Headless CMS would be perfect. Or if you want a really and truly bespoke website without the constraints of a front‑end‑generating back‑end CMS.

If you want to see what that looks like once it leaves the abstract and turns into an actual build, Building a Headless CMS‑Powered Site with Next.js is the more hands‑on companion piece.

Headless CMSes are also great for apps, as they allow a client‑friendly way to enter and manage content (looking somewhat familiar if a client has used other CMS systems before), whilst still making the data easily available for developers to grab via an API.

If developing with React It's also particularly handy if you're going to be working with React, or via a framework like Gatsby or Next.js (for example) as it is generally straightforward to connect your headless CMS via GraphQL which is an incredibly efficient and lightweight querying language, allowing you to fetch your data and populate a powerful and modular React app with ease.

What're My Options? What are the Pros/cons of Each?

There are, of course, plenty of options when it comes to the Headless CMS landscape. Let's take a look at some of the pros and cons:

Contentful

My personal favourite, and one of the biggest and most popular Headless CMSes out there, Contentful is an impressive system to work with ‑ with an even more impressive list of customers. The back end is intuitive and easy to work with, and their documentation is extremely thorough and easy to understand, both for developers and less‑technical clients.

It's also very quick to get a "Space" (a content area) up and running, and the authentication for multiple interfaces or devices to connect to the content API is very straightforward. I have personally developed and shipped over a dozen websites using Contentful now, including IMG Licensing, Wreel Agency, Red Central, and ToyBoxX, and aside from some minor client‑training teething issues it has performed without compromise.

Strapi

It would be weird to make a list of Headless CMS solutions and not include Strapi. Boasting an equally impressive customer list as Contentful (counting NASA among its ranks), Strapi has taken the headless CMS space by storm since it launched in mid‑2016. It is open source, and as an added bonus they have partnerships with some big‑name hosting platforms, which allows for easy one‑click deployment.

Cockpit CMS

Cockpit is a really solid free option that has been around for a long time. It is ‑ again ‑ open source, which is always a big plus for the development community (as well as giving developers working with it the freedom to chop, change and customise it as they choose), and it's self‑hosted; putting you in charge of your data and giving you complete ownership.

The concept of ownership in digital spaces has been a hot‑button issue for a number of years, and the self‑hosted nature of Cockpit offers control and privacy.

Decoupled WordPress

As a final note on Headless CMS solutions, it's worth noting that WordPress (alongside other standard CMS systems) have seen the future coming and often provides headless options. For now, in my opinion, this is more of a curiosity than a serious consideration; WordPress wasn't designed to work this way, and it feels a little hacky to use. I've also not yet found a way of explaining to a client ‑ already familiar with WordPress ‑ why their new website will not be immediately available when they enter content (like their old one was), even though it still uses WordPress.

The guys over at Infinum have a great write‑up that talks about their experiences using WordPress this way too. Suffice it to say: there are plenty of much better options out there than a blogging‑platform‑gone‑CMS‑hacked‑to‑go‑headless if you are considering working with a headless CMS.