Headless CMS

What is a headless CMS?

A headless CMS is a back-end only content management system (CMS) built from the ground up as content, structures, and configurations repository that makes information accessible via a RESTful API for display on any device.

The term “headless” comes from the concept of chopping the “head” (the front-end, the website) off the “body” (the back-end, the content repository). A headless CMS remains with an interface to add content and a RESTful API (JSON, XML) to deliver content wherever you need it. Due to this approach, a headless CMS does not care about how and where your content gets displayed. A headless CMS has only one focus: storing and delivering structured content, and configurations.

The counterpart of a headless CMS is often called monolithic, regular, or coupled CMS.

Monolithic, regular, or coupled CMS

Let’s have a look at a monolithic CMS implementation and its feature set:

1. A database for the content to read and write to.
2. An admin interface to let editors manage the content.
3. Integration of reading and writing.
4. The actual front-end combines the data from the database with HTML.

To convert that into a headless CMS we simply remove feature four from the stack. The head of that CMS (the actual website) was simply chopped off. What still stays is an application that allows content management (Admin UI) and reading (API: combined Integrations).

Headless CMS

Other than using a monolithic CMS, one website can’t be built only with a headless CMS. A headless CMS separated the head from its stack and therefore lacks this point by design. Therefore, the developer must craft the website by his- or herself and use the Content Delivery API of the headless CMS to load the content.

Creating the whole website on their own seems like a big task on the list, but by decoupling the CMS from the front-end a developer can choose any technology they are already familiar with and do not need to learn the technology for that specific CMS.

Another big bonus is the fact that one developer can also focus on their own work without handling the bugs of an already existing stack of technology. Therefore it is easier to optimize pages for Google page speed and even relaunch parts of the website without needing to care about the content.

Let’s Compare The Two Approaches

Pros of monolithic CMS

• A monolithic CMS does not require extensive investment in infrastructure; most of them need just a hosting account.
• It is easy to set up and deploy.
• Because they are simple to manage, it is ideal for single sites.

Cons of monolithic CMS

• Customizing the front end of the website can be a challenge with coupled CMS because it provides limited options to customize the UX/UI.
• Scaling the infrastructure is a challenge as it depends on database scalability.
• A monolithic CMS is not as secure as other architectures. Hackers could enter the back end of the admin portal and that could pose a potential risk to the front end of your website.

Pros of headless CMS

• Headless CMS delivers content faster than coupled CMS due to its architecture.
• It is more secure. You can publish files on third-party destinations and conceal the back end of the website, making it difficult for hackers to attack your website.
• Software upgrades affect only the CMS application, not the live website. Even if the back end experiences downtime, the front end continues to operate without any hurdles.

Cons of headless CMS

• A headless CMS is more complicated to configure and deploy than a coupled CMS. You have to custom build them.
• There could be high upfront costs associated with developing the front end of the system.

Do I Need A Headless CMS?

The answer to this question is quite simple, but it won’t help you much: It depends on your requirements. There are use cases where one CMS outstands the other and vice versa. To help you decide, let’s have a look at the benefits really quick:

Explaining a bit better and trying to extend this table, we could say that the most commonly heard use cases for headless CMS are:

• Build a website with a technology you are familiar with.
• Websites, Web apps that use JavaScript frameworks (VueJS, ReactJS, etc).
• Websites created with static site generators (Jekyll, Middleman).
• Native Mobile Apps (iOS and/or Android).
• Enrich contents and product information on blogs and e-commerce sites.

Additionally, a headless CMS is not limited to WebSites, a headless CMS can deliver your content through an API directly to where you need it. Because of the headless approach, the content can be used on an iOS app, Android app as well as any platform and technology you can think of and is, therefore, a powerful option for mobile and web developers.

Some CMS, or the communities that support them, provide a lot of information that helps us correctly choose the type of CMS that will work best with each implementation. Just as an example, Dries Buytaert who collaborating with the Drupal community has created and published the following diagram:

To better understand how to use this diagram, I recommend visiting the blog of Dries Buytaert (its author) by following this link: https://dri.es/how-to-decouple-drupal-in-2019

In summary, we can say that if we thoroughly research our project and HONESTLY answer the questions in the diagram, we will arrive at the type of CMS that will work best for us.

A World Of Headless CMS Options

We can find information about WordPress and Drupal and will find that already trying to work their way into going headless or at least offering an API approach.

Both of the above-mentioned options work fine but tries to make the CMS work in a way that they were not initially designed for. Here are some headless CMS options you might like to have a look at to find your best fit:

• Butter CMS
• Contentstack
• Contentful
• dotCMS
• Mura
• Cockpit CMS
• Core DNA
• Craft CMS
• Zesty.io
• Directus
• Dato CMS
• GraphCMS
• Cosmic JS
• Kontent.ai (Kentico)
• Prismic.io
• Bold (Quintype)
• Sanity
• Scrivito
• Sitecore
• DNN Evoq Content
• Strapi
• Solodev
• Agility CMS
• Ingeniux CMS
• FirstSpirit (e-Spirit)
• Netlify CMS
• Liferay
• CoreMedia Content Cloud
• Bloomreach
• Crownpeak
• Magnolia CMS
• Sitefinity
• eZ Platform
• Episerver

There are also other options out there, but looking at the features and concepts, those are the platforms you should have a look at.

Summary

This article will cover the basics of what a headless CMS actually is. You will learn about the main differences between a headless CMS like Storyblok, Contentful, or Prismic, and more traditional CMS like Drupal, Adobe Experience Manager, WordPress, and Sitecore, and many others.