What is a Headless CMS: Coupled vs Decoupled CMS Explained

Guide: What Does Headless CMS Really Mean?

Joel Varty
Joel Varty
Feb 23, 2020
What is a Headless CMS

When it comes to optimizing digital experiences and integrating more software tools into your tech stack, it can be difficult to choose the right tools for the job. But for many executives, that’s the choice they’re currently trying to make as digital transformation takes over. According to Gartner, 80% of CEOs currently have some type of digital transformation underway. 

There are several options available to help facilitate this transformation and the content management system (CMS) you choose can have a major impact. But should you go the traditional route? What about headless? Is hybrid an option also? These are the questions that you’ve probably been considering for a while. 

In this guide, we’ll try to remove some of those doubts by explaining more about the headless architecture and show how it compares to traditional and hybrid CMS options. 

Backend and Frontend: Quick Definitions

Before we pit one CMS architecture against the other, let's clarify two important concepts: frontend and backend.

  • The backend is where content is created, managed, and stored—along with all of your digital assets—on the site's backend. The backend is also where website design and customization applications are stored. 
  • The frontend, or presentation layer, on the other hand, is a graphic interface that pulls content from the backend to deliver and present content to devices and end-users. 

Essentially,  content editors write and manage content on the backend and that content is sent to the frontend where visitors can view it.

What Is a Traditional CMS?

The traditional CMS or coupled CMS –also called legacy CMS– allows users to create, edit and publish content. It provides both the backend for managing and storing data and content and the frontend, usually with a WYSIWYG format for displaying the content. 

Traditional CMS platforms had the goal of posting content on one platform, such as a web page. A traditional CMS tightly couples your frontend with your backend which can create problems when trying to build omnichannel experiences. 

Examples of Traditional CMS Vendors:

What Is a Headless CMS? 

Contrary to a traditional CMS, a headless content management system is entirely decoupled from the presentation layer or frontend, which is referred to as the "head". At the same time, the backend is your content repository and content management system, known as the "body."

When you separate your content repository "body" from its presentation layer "head," it becomes a headless CMS. However, what truly makes a headless CMS better than a traditional CMS is its content-first approach with full APIs to access and display content in any way desired. 

With this approach, a headless CMS enables you to author your content through the RESTful API and deliver that content wherever you need it — not just to a templated website or application.

A pure headless CMS doesn't generate any frontend code, which is why a headless CMS is sometimes referred to as "Content-as-a-Service" (CaaS).

This process results in the best available digital experience for the end-users of a particular device. Frontend developers can continue developing new functionality for any channel, independent of the core/backend CMS. 

Examples of Headless CMS Vendors:

Headless CMS Explained in a 5-Minute Video:

Joel Varty, President of Agility CMS, gives the best explanation with a detailed break down in this short 5 min video:

With a plethora of definitions out there, let’s first start by defining the term headless CMS.

Contrary to a traditional CMS, a headless CMS is entirely decoupled from the presentation layer or frontend, which referred to as the “head”, while the backend is your content repository and content management system, known as the “body”.

When you separate your content repository “body” from its presentation layer “head,” it becomes a headless CMS. What truly makes a headless CMS better than a traditional CMS is its content-first approach with full APIs to access and display content in any way desired. With this approach, a headless CMS enables you to author your content through the RESTful API and deliver that content wherever you need it — not just to a templated website or application.

What is a headless cms?

Headless CMS Architecture

There are three types of headless CMS architectures. Below we outline the advantages of these types of architectures and why cloud multi-tenant is the best choice when choosing a headless architecture.

On-Premise: An install-based architecture is exactly how it sounds; you install the platform locally and host it on your own environment. 

This means you need to manage everything end to end and often still pay for a maintenance package to your provider to cover the platform updates.

Cloud Install:  A cloud install architecture is very similar to install based except your provider installs the platform in their cloud. You normally pay your provider for hosting, management, and upgrades which can be extra or included, depending on your provider's terms and conditions.

Bear in mind that this can get extremely complicated because there can be different versions of your platform out there, especially if you are constantly making updates and fixes. With this approach, you can quickly get behind in platform versioning if you are updating multiple sites.

Cloud Multi-Tenant: This means your CMS itself is fully managed and upgraded automatically for you. We highly recommend this architecture because of its easy upgrades. 

Why Should You Choose a Multi-Tenant Architecture? 

Here are some reasons why we recommend a headless multi-tenant system:

  • More options for building digital experiences: Developers can build the "head" anywhere, and you have unlimited options.
  • Easier deployment: You don't have to deploy the CMS or manage every part of it
  • Better support: A vendor only has to support one version and therefore, you can concentrate all your efforts, documentation and time to just one solution.
  • Simplified bug fixing: Oftentimes bugs are fixed even before you get the chance to report it because the entire user base is reporting on the same version.
  • Cost-effectiveness: SaaS-based, so the cost is always spread out.
  • More control: You don't need to manage ANY hardware or software; you just deploy your own code to your environment; this means more control without the hosting "black box" software method.

Read this article to learn more about the headless CMS architecture: Why is a Headless CMS Architecture so Popular?

Benefits of a Headless CMS Architecture

There are several benefits to using a headless CMS architecture. If you're looking for a solution that caters specifically to the needs and wants of your developers, provides you with maximum control and flexibility, enhances your platform security, and ultimately future-proofs your CMS; then a headless CMS architecture should be on your radar. 

Below, we highlight and explain the top four benefits of the headless architecture:

Faster Development, Faster Time-to-Market

Headless architecture is a dream come true for developers. They can continue to build websites or mobile applications using any programming language with their favourite tools, frameworks, and own development processes while still allowing full control over the application life cycle without interfering with any CMS code. 

They can use JAMstacks tools and deliver better performance, higher security, lower scaling cost, and a better developer experience. But not just that, both developers and editors can also work better together. Editors no longer have to rely heavily on developers to build pages with a custom layout. 

This promotes an agile way of working, which, for projects, can mean finishing a lot faster. The result is that the time-to-market will be diminished and a single content item can be reused and combined with many different presentations. Developers and editors can work much better together as well rather than in a silo.

Easy Integration

A headless CMS allows easy and secure integrations with any of your existing systems. A developer can code in any preferred language while allowing the other platform's programming language that is being integrated into the CMS. Not having a fixed structure to develop or code in allows your developers to build any code for any type of integration. 

Allowing this type of flexibility makes it easier not just from a resourcing side but to integrate with systems that are more complex to integrate with. Webhooks is another common way to have action triggered events. 

A webhook is user-defined by an HTTP callback (or small code snippets linked to a web application) which are triggered by specific events. For example, Stripe has a webhook that will automatically send an email to a customer whenever a subscription payment fails to go through.

Better Content Architecture and Ease of Use

The ability to architect and manage your headless content without worrying about its delivery is a huge bonus with a headless architecture. 

Its ease of use allows developers to build out both your content infrastructure and interface for your frontend users without the complexities that come with it. Content editors can relate their structured content types in different ways, but the interface usability also allows them to manage their headless content however they'd like.

Also, because most headless systems are multi-tenant (which I'll explain in more detail below), it's always kept up to date with the most current trends, allowing organizations to be up to speed on the latest and greatest frontend experiences. 

With a headless API, you can specify content types and fragments that you want to push to the device or touchpoint of your choice, allowing omnichannel readiness through any digital touchpoint and at any given time. This means a headless CMS platform can provide content for display and use on any number and type of channels.

Greater Scalability

Architecting a content-first approach makes your system cleaner, more scalable and provides you with full control with how and where your content appears. You can host content anywhere, and this includes the use of static site generators (like using Gatsby JS for example) and other multi-server environments. 

Future-proofing is another significant benefit because you can easily integrate with new technology and innovations, especially when the industry is changing as often as it is.

Since the backend and frontend are separated, if the backend CMS platform has any performance issues or, simply, needs maintenance, it won't create any downtime to your website. In addition to this, cloud scalability, higher security, performance, and low operating costs is another big advantage.

Headless CMS Costs Less

With little technical involvement required in a headless CMS platform, it's a lot quicker for your business teams to create new functionality. 

For example, suppose a marketing department wishes to create a new series of product mini-sites. In that case, they can go straight into the CMS and start creating immediately without having to wait for developers to build CMS-based templates. 

Your up-front cost is diminished as well because you can start with smaller solutions and then build your way up versus starting with one BIG install. It's best to start small and then scale up as you need to.

Let’s see the differences between each type of CMS and Agility CMS in this handy chart:

Headless CMS

Traditional CMS

Agility CMS

Architecture

Backend API

Backend and frontend

Backend API and frontend

Approach

Content-first 

Design-first 

Content-first 

Targeted Devices 

Every device including IoT 

Websites and Mobile

Every device including IoT

End-User

Designed for developers. 

Designed for content editing and content creation. 

Caters to both developers, content editors and content marketing teams

Integrability and Extensibility

All integrations made through APIs and microservices. 

Users add plugins, but too many of them will slow your CMS down.

Native content API to provide Content as a Service (CaaS) for your existing and touchpoints and third-party integrations.

Content Delivery

Headless content is pushed via API to content delivery apps.

Stores and delivers content natively to a single channel. 

Native omnichannel content delivery and option to add third-party content delivery.

Content Presentation

No native functionalities, users need a SSG. 

Presents content through their coupled CMS. 

Native content delivery and the possibility to integrate different frontends.

Performance over time

Depends on the frontend and libraries you use.

Websites tend to become slower over time. 

Depends on the frontend and libraries you use.

Security

Harder to hack because they use third-party security infrastructures.

Coupled CMSs on traditional web servers are easy to hack.

Harder to hack because they use third-party security infrastructures.

Why Do Developers Need a Headless CMS?

A headless CMS also removes other restrictions such as the technology stack that developers must learn. Rather than needing to familiarize themselves with the stack for a new CMS, developers can focus on the existing frontend. 

Headless CMSs can integrate with current technology stacks, making them easier to incorporate when compared to other types of CMSes. Content is treated as data in a headless CMS, so it reduces the need for page rendering. 

For brands dealing with multiple channels, this is especially useful as it means that content only needs to be added once and can be sent to required channels through the CMS. 

Here are some of the most important benefits of a headless CMS for developers:

  • Allows developers to build digital platforms the way they want with the tools they know
  • Simplifies and centralizes code 
  • Enables the use of the Jamstack architecture

Read our article Why You as a Developer Should be Using a CMS for an in-depth rundown of the benefits.

Why Do Marketers Need a Headless CMS?

Non-developers especially find headless CMS platforms to be useful. Rather than requiring a developer to make sure that content is displayed appropriately across channels, marketers, editors and less technical personnel can create and manage content independently. 

That saves time and allows developers to focus on code, while the marketing and content team can focus on creating content pieces. Teams don't need to wait for each other to finish their tasks and can work simultaneously. 

Why Marketers need Headless CMS for Omnichannel Marketing?

In its simplest form, a headless CMS is a content repository which can deliver content to any front-end or device via APIs. If you want to display your content on a web page, a native mobile app or in some other digital format a headless CMS doesn’t restrict you the way that a traditional CMS might. Thus in a broader sense, a headless CMS facilitates an omnichannel experience. 

An omnichannel experience provides customers with an integrated and aligned approach to marketing, customer service and sales. When a customer interacts with a brand through one digital medium such as via a mobile device, they want that same experience in another digital medium such as via a desktop, tablet or another smart device. Headless CMSs provide the backend necessary for omnichannel content management. It provides the admin user interface where content is created, edited and published and a RESTFUL API so that the content can be delivered where necessary, something that is crucial for the multi-touchpoint customer journeys of today. 

Agility CMS allows you to define 3 things that make working with pages really easy for both content editors and developers: Page Management, Module Definitions, Digital Channels & Sitemaps. Developers set up the templates and definitions, while content editors determine on what pages they want to use those templates and definitions. This part of the content architecture is fundamental to the success of any CMS solution that includes a website.

Using a Headless CMS for Omnichannel Marketing

An omnichannel approach offers marketers the ability to create, orchestrate, and deliver delightful, fresh and iconic personalized customer experiences at a global scale across all touchpoints and all stages of the customer journey. This approach enables companies to stay in front of the rapidly changing digital landscape.

ommnichannel

A headless CMS provides the backend necessary for omnichannel content management. It provides the admin user interface where content is created, edited and published, and a REST API so that the content can be delivered where necessary, which is crucial for today's multi-touchpoint customer journeys. 

Thus in a broader sense, a Headless CMS facilitates an omnichannel experience. 

An omnichannel experience provides customers with an integrated and aligned approach to marketing, customer service and sales. 

When a customer interacts with a brand through one digital medium such as via a mobile device, they want that same experience in another digital medium, such as a desktop, tablet or another smart device. 

This omnichannel approach offers the means to engage prospects, customers, and partners wherever they stand. By empowering businesses to create, manage and share content cross-channel seamlessly, this approach can better support today's complex customer journeys.

Headless CMS Use Cases

Okay, so a headless or decoupled CMS can store content and delivery anywhere via APIs, unlike a traditional CMS, which was built to send content to one or two specific types of front end. But what does that actually look like in practice?

Visit Orlando

How Visit Orlando uses a Headless CMS

Visit Orlando, the official tourism association for Orlando, Florida - home to Disney World and one of the most visited tourist destinations in the US - wanted to increase their engagement, conversion rate metrics and ticket sales. To achieve this goal they wanted to manage their content across various channels and personalize marketing campaigns for a targeted audience. 

Visit Orlando was severely hampered by an inefficient ticket management system and process and needed to revamp their entire digital strategy and bring everything under one umbrella. Through Agility’s Headless CMS they now have a multi-site, multi-channel content management system and a new ticket sales and POS solution. Their team is now able to focus on adding new properties onto the platform, both as new website instances or as digital channels. 

Learn more:
Visit Orlando Case Study

Cineplex

How Ciniplex uses a Headless CMS

Cineplex, a leading name in the Film Entertainment and Content, Amusement and Leisure, and Media sectors, accommodates over 70 million guests per year on its digital platforms. The initial challenges Cineplex faced was a system that didn’t allow freedom of design and was extremely limiting in terms of performance, scalability, usability and multilingual capabilities. They needed to improve the overall customer experience across various channels and improve conversation rates. 

Agility’s CMS has allowed Cineplex to increase the scalability of the site and to optimize their hosting resources. The latest iteration utilizes a new hosting environment across load-balanced servers for optimal site speed and performance. The site is now handling more traffic with less CPU load than in previous years. 

Learn more:
Cineplex Case Study

Headless CMS: Go Content-first to Future-proof your Brand

Consumers are making use of more devices and channels than ever before, and brands have to meet them there to provide quality omnichannel experiences. Going headless, whether that’s through a pure headless CMS or a decoupled CMS, is the simplest way to achieve that.

By adopting a content-first approach, which seeks to make your content the focal point of your digital presence, while your many front-ends and their frameworks can be evolved and expanded, is the most logical way to ensure that your brand and its content can meet consumers wherever they end up going. Whether that’s smart speakers, digital signage, VR headsets, or something else exciting

Keep Reading  

If you want to learn more about Headless CMS, make sure you read these articles:

Choosing a New CMS? Download Your 50-Point Checklist

Avoid mistakes. Use our Free Ultimate Checklist.

choosing a headless cms
Back to All ResourcesBack to All Resources