A content management system (CMS) is an essential component of any large website project. Functioning as the figurative man behind the curtain, a CMS is a dashboard that allows non-technical people to work on the site by adding new articles, images, and even new webpages. A CMS merges your website code with your website content, changing it from a static page to a dynamic website builder.
Architecturally, modern content management systems come in two types: headless and integrated.You need to understand the differences between them if you’re a developer or the owner of an enterprise website.
Headless Versus Integrated CMS Architecture
Anatomy of a CMS
To understand why headless architecture matters, we need to step back for a moment and think about how a CMS works technically. A CMS takes the data input by the content editors, which I will hereafter call “layout data” as it can refer to any content input by a non-technical editor, including text, images and content placement. It combines this data with the code, hereafter called “rendering instructions,” to create the final page.
For example, let’s say you have a page with a header, a footer and a paragraph in between. The author defines the location of these elements, as well as the text content to be displayed inside of them. They likely want the header at the top of the page instead of the middle. The code describes how to render those pieces, which code to generate for each element and what color should each element be, essentially serving as blueprints for turning the layout data into the final website code.
So, in the process described above, the author provides layout data to the CMS, which then reads and renders them according to the rendering instructions. The final output is an HTML page, exactly as the author described it. Although this outline is an oversimplification, it is detailed enough for our purposes.
Integrated Architecture
In an integrated CMS, the layout is highly integrated with the rendering instructions. This usually means that the system for defining and creating the layout and the system for rendering it is the same web application.
A CMS that relies on an integrated architecture can deliver more full-service solutions for content editors, usually featuring drag-and-drop editors or other site-building features. Technically, this is because the CMS manages both the site’s layout and rendering. When you drag a new image component onto your page, the CMS can save the new state, including all the layout and content changes, and serve that up to content editors in one quick step.
This type of site-building is technically possible but much more difficult to achieve with a headless CMS architecture because the communication between the layout application and the rendering application is error prone. If a content editor wants the quick feedback of seeing their site modified in real-time, standardization needs to happen between the layout and rendering applications that introduces complexity and errors. As a result, you’ll see so-called site-builder interfaces more often in integrated architectures. Sitecore CMS, Adobe Experience Manager, Joomla and Wordpress are all examples of integrated CMSes.
Headless Architecture
Headless content management systems are the alternative to the integrated architecture. In this context, the term “headless” means that two separate web applications handle the layout definition and the rendering instructions. The degree of separation can vary, but it has a huge impact on both the software architecture side (i.e., where and how the website and the content are stored) and also the content management experience for the end user. Some examples of this type of CMS are Contentful, Sanity, Sitecore Headless, and Drupal.
One advantage of this setup is that deploying your website is much easier with headless architecture. In the integrated model, a deployment means the entire CMS code, which can be a time-consuming and complex process. Conversely, a headless CMS is separated, so changes to the styles of the website via the rendering instructions application are much more self-contained.
Another advantage of headless architecture is modularity. If you want to change your CMS behind the scenes while retaining the look and feel of your website, you can do so in a headless model. In an integrated model, however, you would have to completely re-write most, if not all, of your website application. The same modularity applies in the other direction as well. While an integrated model might not allow you to create multiple interfaces for distributing content — a mobile app, an RSS feed, or a custom API integration — a headless CMS is more likely to have that flexibility.
Wrapping Up
Headless architecture tends to lead to a more technologically nimble system that favors developer convenience, whereas integrated architectures tend to be larger more full-service applications that offer a full suite of tools for content editors and possibly more features out of the box. For startups or companies with a tech-savvy staff, a headless CMS will offer you the freedom to build a more modular system that can grow with you, but if you are a company with a large staff of only copywriters, going with an integrated solution might make more sense.
As a business owner or developer building a new website, asking yourself which type of CMS is most suited to your business goals and your team is important and can have a major impact on your chances at success.
