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.
CMSes are common, but counting them across the web is less straightforward than it sounds. A site with no detectable CMS may be managed through a custom system or generated from another content source; it may also have no CMS at all. Either way, choosing one starts with what the site owner needs to manage.
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. Editors usually work with structured content fields. A preview of the finished page is still possible, but it needs to connect to the front end that will display that content. The CMS offers up the content via an API rather than deciding how the website looks.
Why is a Headless CMS Useful?
Headless CMSes decouple your data from any presentational constraints. Instead, they expose 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.
It's also particularly handy if you're working with React, or a framework like Gatsby or Next.js. Where the CMS provides a GraphQL API, you can request the fields your interface needs. A REST API can work well too; the choice depends on the CMS and how you want to fetch the content.
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. At the time of writing in October 2021, my preference is still for the other options above; WordPress wasn't designed to work this way, and it feels a little hacky to use. Publication timing needs explaining to the client too. A statically generated front end may wait for a rebuild or cache refresh before showing an update. That's a delivery choice, rather than an inherent WordPress limitation: a front end that fetches content on each request can pick up changes without rebuilding the whole site.
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.