Headless CMS: Learn the What, Why, and How

Posted by Paweł Dąbrowski on April 6, 2020

GSD

You’ve probably heard the buzzword “headless CMS” somewhere and decided to research it one day. Another technology to learn whenever you got around to it. To put it briefly, a headless CMS is a content repository system that allows control of website content, has no presentation layer and displays data on any device.

First, to better understand why the headless CMS came about, let’s look at the overall history of the CMS.

ButterCMS 1.png

A Brief History of the CMS - From Traditional to Headless

What does ‘CMS’ mean?

CMS is short for content management system, a software application that enables website management easily by both technical and non-technical people. The main idea behind the CMS is separating the content layer from the presentation layer. The most popular solution of this type is Wordpress  (which can also be used as a decoupled CMS), which is mainly used for blogs, online stores, informational websites, and more complex projects.

Why was the CMS was invented?

As internet technology evolved, it became possible to create more advanced websites. Non-technical people needed a content creation process that was easy, readily-available, and not reliant on technical skills. Content management systems allow users to control the website’s content and appearance from a password-protected control panel that is easily accessible to anyone who needs it.

Why the standard CMS needed an alternative

As technology advanced, users shifted away from traditional desktop computing and began consuming more content via mobile devices. The traditional CMS started to suffer from technical debt as years of patches and updates fragmented codebases and large-scale refactoring was put off as long as possible. Providing an API as a quick fix for a standard CMS was a short-term fix, but it didn’t fully resolve the issues beginning to mount for developers trying to maintain these monolithic architectures.

Enter Headless CMS: The modern approach

Content delivered from a headless CMS is pure, which means that it can be used to display data on any device since it isn’t permanently attached to a presentation layer. You can also manage all content for all platforms from one single place. The standard CMS is not able to provide such a flexible, universal format for distributed content and centralized management.

What Does "Headless" CMS Mean Anyway?

We already know the definition of a headless CMS, but what does “headless” really mean for non-technical and technical people? What is the main difference between systems with and without a “head”? 

headlessCMS

Looking for a powerful CMS that scales with you and makes your team happier? Learn more.

What headless means for non-technical people

For website visitors, there is no perceived difference between a CMS-powered app built with a head versus one that is headless, except that they are more likely to view consistent content across multiple platforms. If you are currently using a standard CMS, you can transition to the headless version and your visitors won’t notice it. As for the content creators, such as marketers, copywriters, editors, etc., they will experience significant improvements in their work, which will be covered later on.

What headless means for technical people

For developers, product owners, consultants, and others with some technical knowledge about content systems, the term “headless” means that the application is built with an external API. The main difference between a standard external API provided by a service and the API coming from a headless CMS is the full control over the content that is coming in. Everything else works much the same way, so if you are a technical user with experience using other APIs, you will be able to easily adapt a headless CMS for your needs.

The Difference Between Traditional and Headless

The main difference is the “head.” With a headless CMS, the “head” is usually under active maintenance and development, which means that bugs are quickly fixed and any requests are answered in a very short amount of time. In the case of the standard CMS, the development process is slower, especially when it comes to open source options. You have to wait for the next CMS version release in order to use the system without experiencing bugs while it updates. On the other hand, new features and enhancements for any headless CMS are frequently published, and you can begin enjoying these improvements as soon as they are released without any effort on your part.

Why Use a Headless CMS?

You can consider using a headless CMS as classic outsourcing where you pass some duties to external companies so you no longer have to take care of certain tasks. Fewer tasks mean more time for other important tasks in which you are an expert.

Choosing the right technology and then implementing it can be a headache, especially when there are so many technologies out there. Choosing a headless CMS over a standard CMS allows you to focus on the presentation, which is easier to implement even without hiring more developers. 

Without the headless CMS, being optimized for multiple display sizes and devices is difficult. You have to choose the right technology, hire good developers, design the system, and then wait for a long time before you are able to see the result.

With the headless CMS approach, you are usually able to optimize for multiple devices using the same technology. We are living in a time of JavaScript, and nowadays, more and more JavaScript technologies are suitable to use everywhere, from mobile and web applications to TV and smartwatches. This API-based CMS can be dropped into any tech stack within minutes!

Advantages of a headless CMS

Advantages of Headless CMS.png

A headless CMS comes with many great features that make content modeling processes simpler, cheaper, and faster. Here are some of the most important:

  • Multiple channels - Content coming from the headless CMS is pure, which means that you can use it to build any kind of application or to show it on any kind of device.
  • Lower costs - In contrast to the monolith systems, building a system based on the headless CMS is cheaper because you don’t have to pay for the full setup like a large database, background job processing software, or a search engine.
  • Reduces time to market - You can release your website faster since developers and content creators can work at the same time without blocking each other’s work.
  • Compatibility - From a single place, you can control all the content that is displayed on all devices.
  • Easy redesign - Usually, when you want to redesign your website, you have to update the CMS structure. With the headless option, you don’t have to do this because you always have the same useful and flexible interface available to deal with your data on the back-end.
  • Easy deployment - To design a correct and fast deployment process, you have to hire DevOps experts, but by using a headless CMS, this process is reduced to the minimum since you usually have to deploy only a simple app.

These are the main advantages, but each person using it will find their own benefits strictly related to their given project or application.  In addition, Headless CMS active developments and new features are continuously released, adding to the list of benefits.

Processes are simpler with a headless CMS

Using a headless version of CMS doesn’t just make things easier for developers, it simplifies the process. No longer do you have to worry about how the content should be created. Most of the headless CMS providers come with text editors that have many built-in features to make writing easier and faster.

Another thing that is very important is content authorization; not everyone should be able to create content. With a roles and permissions system, it’s easy to control this matter.

Benefits for Everyone

The product owner isn’t the only person to realize the benefits of a headless CMS; others on your team will see benefits, too. 

Benefits for marketers

Marketers can create content just once without worrying about different channels, administration issues, or technical aspects. Usually, with the headless CMS, a handy text editor is available out of the box that allows you to format the text properly and focus on the user experience.

Benefits for developers

No more back-end restrictions or obstacles caused by the lack of expertise in a given programming language. Developers can use the tools they love and focus on building beautiful interfaces without worrying about performance issues. Creating different content delivery channels has never been so easy.

Benefits for users

Users experience faster and more responsive applications. They don’t have to worry that they will miss some information when using different channels for the same application.

Looking for a powerful CMS that scales with you and makes your team happier? Learn more.

Headless Architecture: How a Headless CMS Works

A headless CMS does not provide the presentation layer. Instead, the API is exposed, so customers can fetch the contents they previously created on a given platform. Content presented in API responses is not formatted specifically to the given device, so such data can be displayed on any device without any problems.

Common features

There are some common features that almost every headless CMS has, so it's easy to tell if the headless option is best for us. If so, then later we can focus on selecting a certain provider that offers more advanced features.

RESTful API

Your developers can easily access API via RESTful routes. Such architecture speeds up the development process and makes the software itself simpler. Each API endpoint usually has the same set of actions:

  • Get all records
  • Get only one record by the given ID
  • Update a given record
  • Delete a given record
  • Create a new record

Editor Interface

Non-technical people can easily create rich content containing images or other non-text elements without the knowledge of HTML or other technologies.

Roles and permissions

You can define which person has access to the given section of your CMS.

Applications You Can Create With Headless

There are several types of applications that you can create using a headless CMS. Here are the most common ones.

Standard websites

You can build a standard website using whatever technology you want, like the one you have the most experience with. There are no limits because you’re working with an API, so as long as the technology you choose can send HTTP requests and parse the responses, you can use it successfully.

Web apps

You can build a modern web app using any of the JavaScript frameworks available nowadays.

Websites created with the static site generators

With tools like Jekyll or Gatsby, you can generate static websites that do not need access to the database. These can be easily hosted on any server almost without any costs. This kind of website is popular among developers, and the usage of the headless CMS API should be no problem at all in most of these cases.

Native mobile apps

Most native mobile apps connect with some back-end application, so there is no reason why you can’t use the headless CMS API instead of the back-end API you would need to create without using any CMS.

Headless CMS Examples: Actual Usage in the Wild

There are multiple ways you can use a headless CMS. Here are some real-world examples:

eola.jpg

Eola.co has been able to quickly launch beautiful, high-quality blog posts with great SEO that work well across multiple platforms.

keyme.png

Key.me uses ButterCMS to build a stellar back-end (thus eliminating tedious work inside their app) to define content regions and help scale their SEO landing pages.

happyfresh.png

HappyFresh.com’s implementation of ButterCMS powers their mobile app for ordering groceries, covering multiple countries and languages with ease.

The headless CMS is a great choice not only for blogs but also for e-commerce sites and SaaS platforms because it provides good performance, is a clear API, and is easy to use.

The Headless CMS is the Future of Content

These days we want to consume high-quality content—everywhere and as soon as possible. That’s why it’s important to provide the best tools for both content and software creators. In a modern world, every product owner has to be proactive and use every opportunity to serve content on a new device as soon as it is available for a larger audience.

For the first time, content quality is as important as its availability. It’s good to have experts who will take care of the business logic for your application, but it’s better to have them and pay less. Outsourcing is the key to outstanding performance and lower costs, and the headless CMS is the best solution for this. Having a well-maintained back-end for an application is not that expensive if you decide to use the headless CMS instead of doing everything on your own, and the peace of mind you’ll get from it will be priceless!

Get the most up to date Content Management articles straight to your inbox.
    
Paweł Dąbrowski

Paweł is a self-made writer of the digital era, IT samurai and problem solver who loves Ruby. He writes for human beings and computers at pdabrowski.com and focuses on soft skills in the software creation process.

We're the #1 Rated Headless CMS

Related articles

Don’t miss a single post

Get our latest articles, stay updated!