Headless CMS
What is a headless CMS?
A headless CMS is a content management system that separates the backend content management from the frontend, presentation layer.
The frontend, or presentation layer, is everything a user sees and interacts with, traditionally on a website, but today on any device with an internet connection. This layer includes aspects of a website like images, text, layouts, etc. Three common frontend development languages include HTML, CSS and JavaScript.
The backend is the developer's side of the website where server, application and database information is managed. Therefore, aspects of a website like rules, integrations and how pages are connected are controlled here. Common backend development languages include .NET, SQL and Java.
In a headless architecture then, the head, or frontend of the system is chopped off from the body, or the backend of the system.
Leveraging a headless Content Management System, you can power various customer-facing digital experiences including native mobile apps, smart devices or existing web applications not built directly within the platform itself.
The difference between headless and traditional content management systems
Unlike a traditional CMS, in a headless CMS, the front and backend are two entirely separate systems.
What is a traditional CMS?
A traditional CMS is also known as a “coupled”, or “monolithic”, CMS. Popular CMS platforms that use a coupled architecture include WordPress and Acquia.
In a traditional CMS, the head (or frontend) and body (or backend) are joined, and together manage both the content as well as the presentation of the content. Traditional CMSs often come with a “What You See Is What You Get” (or WYSIWYG) content editor. For the purposes of clarity, we’ll use the term “coupled” below when referring to traditional CMSs.
Coupled CMS vs. decoupled CMS vs. headless CMS
Coupled, decoupled and headless are forms of content management delivery architectures. A delivery architecture is the relationship between where your content is managed and where it is delivered.
The most common delivery architecture is a coupled architecture in which the frontend and backend are bound together. In a coupled architecture, content is created, managed, stored and delivered in the same system.
A CMS like Optimizely CMS can be used as coupled or a hybrid CMS solution. Many CMS providers offer just one of these setups, and it's good practice to weigh all the pros and cons.
A decoupled CMS separates the frontend and backend. The content is managed separate from the delivery. It is prepared on the backend, then delivered and presented in the frontend through APIs. A decoupled CMS enables content managers, editors and designers to work on the frontend, while developers work on the backend.
Finally, a headless architecture is a content-only data source without a presentation layer. In practice, headless is really just another form of decoupled architecture, but instead of the CMS pushing artifacts to the frontend, the front-end pulls content from the CMS.
It's important to note that not all headless CMS solutions are created equal. Some of them are pure headless while others are a mix of headless and traditional architecture. A pure headless system never does any templating and only serves raw data to another system. A hybrid headless system, on the other hand, can operate in a traditional coupled architecture, but also has tools to serve content headlessly.
Coupled CMS vs. decoupled CMS vs. headless CMS at-a-glance
Here’s a quick breakdown of how coupled, decoupled, and headless CMSs differ:
| Coupled CMS | Decoupled CMS | Headless CMS |
| Front and backends are tied together. | Front and backends are separated. | Content-only data source without a presentation layer. |
| Content is created, managed, stored, and delivered in the same system. | Content is managed separately from the delivery, enabling editors to work on the frontend, and developers on the backend. | Instead of the CMS pushing artifacts to the frontend, the frontend pulls content from the CMS. |
| Single channel. | Omnichannel. | Omnichannel. |
How headless architecture works
A headless solution is a backend-only CMS built with a repository that can be accessed, for example, through a RESTful API for display in multiple channels. An API is a set of rules that enables programs to talk to each other. RESTful or REST (Representational State Transfer), is a set of rules developers follow when creating the API. APIs allow you to pull content into the presentation layer and receive commands from the users into the headless application.
A headless CMS has a database to read and write content to, and an administration interface where users manage content. A headless solution only allows for the creation, reading, updating and deleting of content.
In a headless architecture, developers can use any frontend tool to present, reuse, and deliver content to any channel. The separation of the frontend and backend makes it easier to update the underlying systems independently, among other benefits, which we will cover in a later section.
How headless content managment systems came to be
Content management first emerged with the creation of static websites in the 1990s, during Web 1.0. These websites were simple HTML text files. Content management has evolved from Perl scripts and flat files to robust CMS offerings and even sophisticated DXPs.
The evolution of the headless CMS was driven by the mobile revolution, the rise of omnichannel publishing and the viability of JavaScript.
When mobile technology and devices like watches and voice-activated assistants rose, users needed the flexibility to push content wherever they needed or wanted which presented a challenge for traditional content management systems.
Additionally, when jQuery was introduced in 2007, JavaScript became a rich programming environment and the idea of actually templating a site in a browser came to be. Developers were able to pull pure data from the server and template it in the client's website.
Technology is constantly evolving and shaping the CMS landscape. Because a headless CMS enables you to integrate with other technologies and applications as they emerge, it is a very common delivery architecture offered today.
Is headless CMS right for me?
Today, developers often push for headless because they believe they get more flexibility from a headless solution and understand the implications of APIs, CDNs and SDKs. But is a headless solution really right for you?
Ultimately, marketers and technology professionals need to decide whether a headless solution will help their organization close the gaps in their customer experience faster, cheaper and better than existing alternatives.
Just like any decision in technology, headless architectures have benefits and drawbacks. Ultimately, you have to decide what's right for your business.
Keep in mind, there are requirements beyond headless that you'll want to consider when choosing a CMS and various personas like content editors, website administrators, developers and marketers that you'll want to enable with your CMS. Buying content technology can be a confusing process.
Benefits vs. drawbacks of a headless CMS
A headless CMS can integrate with other technology, help you reach customers on emerging touchpoints and respond to changing customer expectations. We wrote about some of the benefits of headless technology here, but here's a quick summary:
-
Integrate with other technology
You likely operate dozens of technologies to power various phases in the customer journey. Rather than spend hundreds of thousands of dollars to swap out these legacy systems, many companies implement a headless CMS that integrates with current and future technology. A strong headless content infrastructure will unify your content and eliminate siloes. -
Reach customers on emerging touchpoints
As smartwatches and other smart home devices expand in adoption and maturity, organizations need a CMS that can deliver content to these channels. A headless CMS can integrate to the underlying framework used by smart devices to deliver the experiences the end user expects. -
Respond to changing customer expectations
In a headless CMS, cross-functional front-end code creates continuity in the user experience and theoretically makes organizations faster in delivering on their mission, while also making them more responsive to changing customer expectations.
Teams considering migrating to a pure headless solution often discover that while pure headless solutions help solve some problems, they also introduce some new challenges. If you are considering going with a headless solution, you need to understand the tradeoffs and benefits of making this choice.
-
Not always simpler to manage
It may be initially appealing and straightforward to translate your content into raw data consumed by any platform. However, headless does not always resolve complexity, often it just moves it around. Companies often find they need more functionality than is built-in to the CMS, so they have to customize. -
Not always faster or cheaper
Weigh the time to value and the total cost of ownership of any system you are considering. Adopting a pure headless CMS requires your engineering team to take on more responsibility to build out different models and templates. While this approach provides control and customization, getting a headless system up and running can take time while engineering gathers requirements, designs the models and modules, and builds them. -
Not always have everything you need built-in
Pure headless systems often lack features like workflows or even drag and drop editing. Implementations fail because they don't have the built-in features. Teams often have to build the functionality that comes with a traditional CMS or hybrid headless CMS. Content creators may need to wait for engineering support if they have more custom requirements for a new landing page that isn't supported by previously created modules or templates. -
Not always functional for marketers or business users
Since headless removes the presentation layer shipped with the application, most headless platforms do not support leading native business user tools like in-context editing or content preview before publishing.
Optimizely CMS is headless, hybrid and coupled, all-in-one
Optimizely Content Management System (CMS) has traditionally been known as a coupled CMS. However, the distinction between this and a headless or decoupled CMS is much thinner than the market would have you believe. Optimizely has always been able to offer a hybrid headless solution.
Because our CMS manages content, and not webpages, its content repository is abstracted from the content delivery. Our CMS has a continual release strategy and an API-first architecture that have kept pace with developer needs, without us resorting to complete rewrites and new products to support today's diverse audience.
Headless CMS is often positioned as the opposite of a traditional web CMS. Our CMS rejects this idea. As a matter of fact, headless is in addition to what the Optimizely platform normally does. One discipline is simply an extension of the other. And here's why this matters: because there's a natural overlap between the two disciplines. Optimizely didn't need to build a new CMS from scratch --the core web CMS product is a natural, flexible base for an alternate delivery paradigm.
To see an example of Optimizely's headless solution in action, check out The Student Hotel's story of digital transformation. Leveraging a headless framework, The Student Hotel has delivered a lightning fast and efficient website.
Optimizely CMS is headless when you need it to be, and a fully-featured coupled CMS when you don't.