Let's start off by defining what a non-headless CMS is. A Content Management System (CMS) is essentially a repository of digital content where you can create, manage and delete said content.
You can think of WordPress.com, Drupal or Joomla as popular CMS systems used in the industry. And they are a huge part of the web development eco-system.
And that's mainly because there is a ton of content being generated on a daily basis around the internet. Everything from blog posts, to news articles to standalone landing pages. Some websites deal in the tens of thousands of content pieces, and managing them is a job in it of itself.
So we need CMS's these days more than ever before.
Features
A CMS typically has the following features associated with it, though not all have to be present and some might even include more features:
- Content indexing
- Search functionality
- Versioning
- Multiple user roles
- Content optimization
- Content editing tools
Essentially, a CMS is the visual representation of the content stored in your databases. On WordPress for example, data is typically stored on a MySql database. The associated content editor on WordPress is designed to work with that particular relational database system.
On a system, like WordPress, the CMS is usually tied to the server-side code and front-end code very strongly, making it somewhat difficult to change the data storage method or to change the framework in general.
This is where a headless CMS comes into play.
A headless CMS
Unlike with a traditional CMS system, a headless CMS decouples itself from the front-end rendering code allowing you to pick and choose the method of rendering best suited for you or your companies needs.
A headless CMS only has to deal with the actual content itself and none of the technical bits. That means that non-technical (non-programmer) individuals can make changes to the data without having to know anything about how the code is actually implemented.
That loosely-coupled nature of a headless CMS means that the developer has to rely on an external frontend framework, such as React or Vue.js or even ASP.NET in order to generate dynamic web content.
That also means that your content isn't bound to any one specific technology and that it can hosted on a variety of environments.
Headless vs Traditional
As mentioned above, a traditional CMS is typically strongly bound to both the front-end and the back-end code and usually lives within the same project, though not always. MongoDB for example can store data on the cloud and be absorbed by server side application code just fine.
But that's mainly for data storage. You don't actually get any of the management features that actual CMS's provide, unless you were to build them yourself.
Take WordPress as an example. Once an admin logs in to the platform, they can manage all of the content on the website. That content is stored locally in a database belonging to that application. And the server-side code used to render that data is reading directly from those databases.
A headless CMS is not bound to any other layer aside from itself. An admin can log into a headless CMS manager and create and manage all content directly without having to worry about both the front-end implementation or the server.
Headless CMS
Biggest benefits
There are many benefits that this decoupled tech stack brings with it in terms of overall usability, performance and even security.
Can be used in multiple channels
Because a headless CMS isn't directly tied to any single web property (website), it can serve data to any application that implements that particular API and that has access to the content.
That can mean that multiple websites use the exact same data without having to worry about duplicating databases.
You can also manage multiple properties from a single CMS editor as well. Which, if you've ever worked on more than one website at a time, is a huge time saver.
Developer friendly
Headless applications don't have to worry about carrying around their databases with them, as they live isolated from the rest of the code.
That means that developers are free to choose the front-end framework of their choosing without any restrictions. Because the data is served through standard HTTP API requests, you are not tied down to any ecosystem.
You also don't have to worry about maintaining any sort of CRUD or text editor, which can be a huge time consuming task. Designing a generic, secure, fast and nice looking editor from the ground up is almost a full-time job.
I personally spent over a year working on a custom CMS engine for my websites. And while it makes for a great learning experience when it comes to content management, it's also one of the most daunting projects that I work on.
Enhanced security
Just by having your digital content stored separately from the rest of your codebase, you are increasing the level of security.
On a traditional CMS, where all parts of the tech stack live on the same server, you are essentially creating a single point of failure. If someone gets access to that server, then they have access to your database as well.
By creating multiple points of failure, you are making it that much more difficult for anyone to get access to each of those components.
Take into account as well that many of the most popular headless CMS providers do offer high levels of security, as content management is their specialty.
More so than your codebase, your data really is the most valuable asset that your web properties contain, so ensuring that it is isolated and safe is now more important than ever.
How do they work
While there is not actual "standard" as to what a headless CMS is suppose to be comprised of, most would agree that the following 2 features are pretty much required.
- A content management editor where users can create, edit and delete content of all kinds.
- API access to the created content
A developer typically has to write custom code to make API requests to the specific endpoint which comes back as plain old JSON.
A developer is then free to render the content in whatever manner makes the most sense to them.
Common use cases
The most common use that you will see when using a headless CMS is for building out websites and web applications typically running under the JAMStack architecture.
Fortunately for us, there are now a ton of static-site generators out in the wild that will do most of the heavy lifting. They even include the required API code needed to pull the appropriate content.
A few examples include Gatsy, 11ty and Next.
You can also use a headless CMS as you would any other CMS. By that I mean to store whatever type of content that you need.
That could include products if you are running an online store as there are a few headless CMS providers that offer integration with platforms like Shopify right out of the box.
Downsides
So are there any downsides to having your content isolated from your codebase? The benefits listed above definitely outweigh any of the potential side-effects in general.
But the one major side-effect is that most headless CMS platforms are not free. They might include a free tier allowing for a fair amount of storage space, but in general, you won't get the real benefits until you hop onto a paid subscription plan.
You're also limited when it comes to the editor's capabilities. Since a 3rd party company is in charge of your data, they are also in charge of how you access that data. If you need anything custom, you will have to build out a middle-ware layer in which you can do so.
So while a headless CMS can be hugely beneficial in many parts of web development, it definitely won't fit every single niche out there and doing your research ahead of time can save you a few headaches down the road.
A List of Headless CMS Platforms
Here are a few of the more popular options when it comes to choosing a headless CMS provider.
- Ghost
- CosmicJS
- Strapi
- Sanity
- Directus
Every headless CMS is unique in its own way. They share in the fact they can store content and serve it through a secure API, but individually they offer their own set of features and their own pricing structure as well.
As most offer free-tiers however, it would be hugely beneficial to set up an account and to check out those features for yourself for future products.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.