What’s a Headless CMS and Why Should You Care?
Outline
  •  TL;DR
  •  Introduction
  •  Headless CMS the what?
  •  Traditional vs Headless vs Decoupled CMS
  •  Benefits of Headless CMS
  •  Git-based vs API Driven CMS 
  •  Use cases for Headless CMS
  •  Can a traditional CMS be used with headless CMS?
  •  Headless CMS Providers to choose from
  •  Summary

  • Gift Egwuenu discusses what you need to know about headless CMS. She covers what a headless CMS is and shares some benefits and use cases of using the headless content management system.

Introduction

The history of managing content on the web dates back to the beginning of the web’s existence. A Content Management System (CMS) is a tool that can manage the creation and modification of digital content. In the 2000s we moved to an era where managing content was facilitated by open-source CMS, also known as a coupled or traditional CMS, like Wordpress, Joomla, and Drupal. These systems allow users to manage both the frontend and backend of the application in one location.

Fast forward to today, we have shifted to a different approach with even better ways of managing content called the headless CMS. This approach lets you decouple the backend from the frontend, allowing you to pull and manage content via an API. In this article, I’ll cover what you need to know about headless content management systems and where to go from here to explore and use a headless CMS in your project.

Headless CMS the what?

Unlike the traditional CMS, where both the frontend and backend layer are coupled (meaning they cannot be separated from one another), a headless CMS is a content management system where the content “body” is decoupled from the frontend display, and the developer is provided content as data over an API.

A headless CMS is frontend agnostic. This means that content is delivered raw, and the developer chooses how the data is presented to the end-user using any framework or tool of choice.

Traditional vs Headless vs Decoupled CMS

Traditional CMS
A traditional CMS also called a coupled CMS serves and maintains the backend and frontend layer of the system. The system consists of a database for storing the content, the frontend for displaying the content and the backend that houses the functionality of the content management system. Working with a traditional CMS, every single part of the system - frontend, backend, database - exist as an inseparable part of the CMS. This kind of platform also typically provides a (WYSIWYG) “What You See Is What You Get” interface for creating content.

Headless CMS
The headless CMS differs from the traditional approach where the backend is only used for managing content and the frontend (“head”) is disconnected, leading to the name headless. The content is published to an API where the data can be consumed across different platforms such as web, mobile, AR/VR, chat, voice, etc. One benefit of using this approach is the same content can be managed within one system but distributed across several platforms, like a website, a mobile app or even an IoT or voice-enabled device.

Decoupled CMS
The headless CMS is considered a sub-set of a decoupled CMS, which does include an actual frontend layer.  However, the decoupled content system is managed by two different systems. The API layer and an added frontend layer where the final content is published. The difference between the decoupled and coupled (traditional) system is that the former have the frontend and backend system independent of one another, communicating with each other through calls made to the API.

Benefits of Headless CMS

When you leverage a headless CMS in managing your content, you get the following benefits out-of-the-box.
  1. Omnichannel Approach: The content created in a headless CMS is capable of being displayed on any device ranging from mobile, web, AR/VR, IoT, etc. while being managed from one backend.
  1. Improved Security: Headless CMS typically provide content via a read-only API and there is no database to secure. In addition, many allow integration with a via high-performance CDN rather than directly from the database which lowers the risks of DDoS attacks.
  1. Scalability: The approach of keeping the frontend and backend decoupled means there limits or eliminates downtime and you can scale, upgrade or customize your website without performance rundown. 
  1. Flexibility: The headless approach is more flexible for developers because they have the freedom to build with a frontend framework of choice that fits the project they are working on while, with the traditional approach, the level to which a developer may customize is often limited, which can get frustrating.

Git-based vs API Driven CMS 

The headless CMS is further divided into two different categories, the Git-based and the API-driven CMS. I’ll go over each of them briefly to give you an idea of what they are made of and share examples of each of them.

Git-based CMS
A Git-based CMS does not store your content in its system. Instead, it applies a layer of CMS functionality to manage content in a git repository. When changes are pushed to git, it triggers a new build of your site. What this means is your content resides in a git repository and, every time new content is added or edited, it triggers a commit on git. Git serves as the database for storing all the content. Platforms that provide this service include Netlify CMS, Jekyll Admin, Forestry, etc.

API-Driven CMS
With API driven (or API-first) CMS, the content is stored within the CMS and provided to you via an API. The API can either be a REST or GraphQL depending on the platform you use. The API provides the raw content and metadata and you consume the data provided via the framework or language you choose. Platforms that provide this service include Sanity, Ghost, DatoCMS, Strapi, and Contentful.

Use Cases for Headless CMS

Headless content management can be ideal for the following use cases:

  1. Web Applications (that use popular JavaScript Frameworks like React, Vue, Angular)
This method involves serving content through an API which is then consumed by a web application, but offers a centralized place for managing content. An example is an eCommerce application built using HTML, CSS and JavaScript with content and product data that are maintained in the CMS and served via an external API.