The headless CMS is a core tenet of the Jamstack approach, a gamechanging approach to building modern websites. Here is an intro to the headless CMS approach.
Content management systems (CMS) have been around for awhile. Some of the biggest players in the space go back a long time (in web years):
I know, you're here to learn about headless CMS products, not these old fellows. But, before we dig into the more modern approach, let's take a look at how these traditional systems work. In doing so, we'll use WordPress as our example, as it powers more than a third of the top 10 million websites (as of April 2019)!
The primary purpose of a CMS is to provide a means to ... well, manage the content of a website. Traditional CMS products like WordPress tightly couple the content editing process (the "back-end") with the public's view of the website (the "front-end").
The editing process works like this:
Meanwhile, when a user visits the blog site (the front-end), that process looks like this:
Here's a super simple diagram of the process:
Being tightly coupled means WordPress powers the entire website within a single application, from creating and editing the content, to storing content, to how the post looks when a visitor is reading it.
This is essentially the same way in which social media platforms behave. The main difference between WordPress and an app like Twitter is that editing and reading tweets are part of the same experience. There's no front-end and back-end of the application — it's all just the application. With WordPress, there's a distinct difference — the editor creates content for others (who have no access to edit the content) to consume.
For more than a decade, most CMS products worked like WordPress.
Eventually we started to see a rise in a different approach to building websites — the Jamstack. The Jamstack's primary focus is in decoupling (or detaching) front-ends from back-ends.
The Jamstack quickly gained popularity, as it offered an array of benefits to those building and maintaining websites, including cost, security, performance, scale, and developer experience. (Read more on the subject here.)
While not a requirement, the headless CMS is a core tenet of many Jamstack websites. Therefore, as the Jamstack methodology took hold, so too did the headless CMS approach. And that's likely why you're here.
So let's dig into it!
A headless CMS, sometimes called a decoupled CMS, is essentially the back-end half of a traditional system. While WordPress powers the entire website, a headless CMS is only concerned with the content editing process. It doesn't care what happens with the content after it is written. That part is up to the owner of the site (or their developer(s)) to figure out.
There are two types of headless CMS products, the distinguishing factor being how they store the content:
This approach is gaining so much popularity that it seems like there is a new headless CMS to try every week. To list them would be exhausting. Fortunately, the fine folks at Netlify (the same ones who coined the term Jamstack) are tireless, and have created an archive of headless content management systems at headlesscms.org.
The other reference I frequent is this article and its corresponding chart that my colleague authored. It lists a handful of the more popular headless CMS options, along with a solid feature comparison.
On the surface it may seem like a headless CMS is just half of a CMS like WordPress. It is, but that has led to several key benefits:
I know, I'm selling this hard. I'm totally in love with the headless CMS approach. But it's not without its issues. There's a reason that WordPress is still powering so many websites, even years after the Jamstack has started picking up steam.
I find the headless CMS approach to have three challenges:
The headless CMS is a core tenet of the Jamstack — a gamechanging component in building modern websites. The traditional CMS was revolutionary for the web, as it provided us a means to enable users to edit content dynamically and in the same space in which that content would be consumed. But that led to challenges with scaling, security, and cost, among others.
As part of the Jamstack, a headless CMS helps us overcome those challenges.
This term "Jamstack" is becoming a buzzword among development communities. But what does it mean and why should you care about it?
What the what is Netlify and why am I always talking about it?
A brief description of HTML, before suggesting a couple free courses.