Headless CMS vs. Traditional CMS: why the «headlessness» success is changing monolithic solutions

In this article we discuss web development costs and look at several ways to develop a website. In particular, we look at content management systems (CMS), which allow people who are far from programming and web development to create websites. A prime example of a CMS is Wordpress, which according to Envisage Digital has a 37% market share, meaning that every third website in the world is created using Wordpress.
However, nowadays people consume content from different types of devices: smartphones, laptops, tablets and even wearable devices such as watches. Who knows what devices will emerge in a few years thanks to the Internet of Things(IoT) and VR/AR technologies, but what definitely won't change: the need to visually customize information for each platform. This is where traditional CMSs become inconvenient, and recently a solution has been found – headless CMSs.
In this article we will take a closer look at CMS as a way to create a website, compare headless CMS and traditional ones, their benefits and drawbacks, understand what the «headlessness» of the latter is, and most importantly, where to use each type of CMS.

What is CMS?

A content management system is one or several software programs that allow you to manage the content of your website without any special technical skills. You probably heard about some popular CMS-services, like WordPress, HubSpot, Joomla, WooCommerce, Shopify, Drupal and many more.
The first full-fledged content management systems appeared in the mid-2000s. Before that time, managing a dynamic site was a big problem, and owners had only unattractive options for non-professionals in development:

• Hire a developer who would manually update the site as needed.
• Hire a team of developers who would create a server-side CMS analog with a database and a simple CRUD (create-read-update-delete) interface to manage content on the site.
• Learn to create a website on your own.

In the 2000s, CMS solved these problems and became truly groundbreaking solutions: CMS was that universal software that could be installed on a server and used to edit the website interface and customize the server side. Then the first open-source CMSs like Drupal, Wordpress and Joomla appeared, and it was part of the marking of the «web 2.0» era that gave people dynamic websites. CMSs helped business owners and ordinary people who did not have software development skills to create and manage their own websites and they also gained many other useful features such as search engine optimization (SEO) tools, content typing and designing functions.
Most CMSs are made up of several blocks or layers:

• The content repository, which is a database that stores all the information and files;
• Presentation tools, where you can create the look of your content
• Publishing tools, which put your content on the site, either immediately or by set time.

CMSs helped solve a tricky situation in website creation that is known in many aspects of life as a «catch-22»: companies needed complete and functional websites to attract resources and customers, however, at the same time, companies didn't have the resources to build one from scratch.
We look at a traditional CMS vs. headless CMS question and try to figure out in which cases one or the other system is suitable.

Traditional CMS

A traditional CMS is a one-piece ready-to-use solution that allows you to create content, design its appearance using templates and plugins, and publish it to the website. The front-end and back-end parts of the site are managed on a single platform. Traditional CMS examples such as Drupal and Wordpress offer ready-to-use functionality such as blog posts, product cards in the online store, and tools for ecommerce. This is the optimal solution for companies that want to create a simple website with minimal costs.

Traditional CMS features

We look at some of the features that some traditional website management platforms have:

• Monolithic platform. As we said earlier, traditional CMS is a single piece of software which causes some difficulties with adding new functionality through integration, for which you need to use plugins, which we will talk about next.
• Using templates and plugins. Traditional CMSs were originally built for the purpose of creating and uploading content to a website, and for this purpose, the flexibility of tools is not required, causing the system to rely on templates. This is convenient for people who are not familiar with programming, but at the same time, there are difficulties in implementing new features. Plugins with ready-made functionality partially help with the latter problem, however, they are not available for every request, and each plugin is more like a workaround than an effective solution.
• Content visualization. Most CMSs have tools for creating content for a site, but traditional CMSs, as opposed to headless ones, also have built-in visual editors that help managers see what the created record will look like on the website.

Benefits of traditional CMS

Let's highlight a few important benefits of traditional CMS:

• Traditional CMS have a simple web interface that eliminates the need for programming, i.e. these tools can be used by everyone.
• The system includes many intuitive tools: WYSIWYG-like (what you see is what you get) text editors, as well as tools for working with multimedia files, to control access to website elements and much more.
• Such systems are easy to use, and accordingly for their operation do not need a lot of time, human and money resources.
• Traditional systems have existed for quite a long time, so they have a large community that can help with questions that arise.

Drawbacks of traditional CMS

Along with benefits, traditional systems have a number of drawbacks that can become significant nowadays:

• Traditional CMSs are monolithic products that haven’t any flexibility that was sacrificed for ease of use.
• CMSs may require developers who are familiar with these systems to install and customize them, as well as implement new features, which can be costly in time and money.
• Plugins and templates may not cover all user requests, as there may not be an off-the-shelf plugin for more unique tasks.
• Traditional CMSs create content only for a website, and they are not adapted to work with other platforms, such as mobile and wearable devices.

Use cases of traditional CMS

Even though the technologies of traditional CMSs are considered to be outdated, they are still relevant for a multitude of cases. Let's list a few cases where traditional CMSs win in a «traditional vs headless CMS» choice:

• You are building a small website (a landing page, personal website, or corporate website) for your business;
• You're only distributing information through one website and you don't need multi-channel functionality (for example, a website and apps for different types of devices);
• You only occasionally need developers to help customize your CMS, for example, you build a website for a one-time event and you don't need to maintain it afterward.

Headless CMS

Traditional CMSs were great tools for managing a website for a long time, until the era of mobile and wearable devices and the rapid development of IoT technologies came along. The main technical problem was that traditional CMS solutions generated ready-made HTML code of the page with all necessary data for users. This is quite a heavy task for the server side of a website with a large number of users, while for a personal computer, generating HTML code for a specific user is not labor intensive. Moreover, generating HTML code actually creates a static web page, which is a rather clumsy solution in the era of dynamic websites. Moreover, it is absolutely useless for mobile applications, which only need data passed through APIs, for example, in JSON format.
As a result, the development of mobile application market, frontend customization for different websites and the transition to dynamic websites required more user-friendly solutions in terms of development and management, such as headless CMS.
People started to develop CMSs in which information is managed through a database (the «body») and passed to the interface (the «head») through APIs, that’s why they were called Headless. Examples of headless CMS are Strapi, Contentful, Storyblok, and you can also add Wordpress to this list, because it can be headless due to the open source code.
In these systems, the body and head, i.e. front-end and back-end are separated, and the project can have several «heads», for example, several websites, applications for different types of mobile and wearable devices, as well as other smart IoT devices, such as smart TV STBs and speakers. And this is the main thing that describes what a headless CMS is.

Headless CMS features

Let's take a look at what a headless CMS has to offer the user:

• API. As we wrote earlier, the application programming interfaces are the key feature of this type of system. They connect the back-end and front-end of your project, as well as connect several CMS modules into one ecosystem.
• Integrations. Headless CMS finally solved the issue of painlessly adding new features through the third-party applications integration. Such applications can include management systems: customer relations (CRM), product information (PIM), company resources (ERP), marketing, and more.
• No predefined presentation of content. The front-end and back-end are separate from each other, which means the appearance is not fixed by templates, allowing you to customize your site the way you want it.
• Freedom of choice of development tools. At the same time, developers are not limited to choose convenient interface development tools, as they also have headless CMS tools that save development time significantly.

Benefits of headless CMS

Let's take a look at some important benefits of headless systems:

• Headless systems have solved the problem of omnichannelization. All content is stored on a server, and the business itself can decide how it will distribute it, managing everything through common software.
• You have the ability to quickly and painlessly change the interface of the product as often as you need to.
• Developers get more choice of tools to create interfaces for the product.
• Headless CMSs offer simple tools for creating and editing content. Managers can quickly customize information to make it more user-friendly.
• Headless CMSs are safer than traditional CMSs because the server side and the interface part exist separately from each other.
• Such products load quickly due to JS frameworks and Jamstack technology, which improves many marketing metrics, such as search engine visibility.

Drawbacks of headless CMS

However, headless content systems have some drawbacks:

• These systems take longer to customize than traditional ones, where you get a ready-made solution immediately.
• You have to spend a lot of effort and money to create preview tools like in traditional CMS, because most headless systems do not have them.
• To keep the product running, you need front-end developers to create the interfaces.

Use cases of headless CMS

Headless CMSs have significantly expanded the scope of application of content management systems in general. For example, they can be used in the following cases:

• Complex and dynamic websites, e.g. online stores, e-learning websites using JavaScript frameworks (ReactJS, Angular, Vue.js);
• A product that distributes information across multiple platforms (web, mobile and IoT devices apps);
• A product with complex and custom functionality that traditional CMS cannot provide;
• Projects requiring high loading speed and high level of security.

Our CMS experience

Our team is working on a project where we are actively developing CMS technologies to make the work of editors more convenient and without long waits. «Convenient» means that editors use familiar tools, and they don't need to frequently change end points where requests will be sent. «Without long waits» means quicker downloading and retrieval of data. In an ideal system, you want both convenience and responsiveness that are in balance with each other. However, from a technical point of view, one often contradicts the other, and choosing the right technologies that are both convenient and fast at the same time is difficult and time-consuming. That's why we primarily emphasized the convenience of the tools, and there are good solutions that fit the customers' requirements: it's the use of the WordPress system. However, our goal is to reach a balance between convenience and working without expectations.
Initially, when launching MVP, we used WordPress as a system for CMS with implemented content synchronization logic and API functionality. It looks like a headless system, however, it is CMS/sync/API monolithic. This is a good solution for a small product as it processes the information quite quickly and generates all the required pages. During further development, we started to gradually move away from a monolithic solution towards a headless-system, which would be based on the same WordPress. In this we were helped by the WordPress GraphQL plugin, which uses GraphQL queries to retrieve data from the server side of the application.
Also, we need to provide structured data for the system to work correctly, and we used a fairly popular solution for this – the WordPress plugin Advanced Custom Fields (ACF). This is a valid solution, but it's important to realize that moving towards a headless WordPress-based CMS can create efficiency and responsiveness issues. One reason has to do with the fact that ACF collects all the data into one table, which is not optimal because it's quite difficult to quickly find the information you need. That’s why one of our goals here is to optimize the existing system without spending a lot of time and effort on development.
What's next for this system – time will tell. But what is known for sure is that it will be a further division of the monolithic solution into some microservices. This approach has its benefits and drawbacks. The pros are related to the fact that key parts of an application, that is built on such a system, become fault-tolerant, its parts are not highly dependent on each other, and they can be updated and replaced without fear for the work of the rest of the product. On the other hand, such a decentralized system is more difficult and less convenient to develop and maintain, including due to the fact that more resources are required to maintain such a system.
We try to resort to efficient business-oriented approaches, which are based on creating an application architecture not for the sake of the architecture itself, but for the sake of economic feasibility for the business.

Conclusion

Nowadays, there is no universal answer to the «headless CMS vs traditional CMS» question. Traditional CMS is a monolithic solution with convenient tools for small, single-stream and low-budget projects, while headless systems are adapted for large companies and budgets, multiple streams of information and projects with high requirements for speed and security. Headless CMS are beginning to gradually displace traditional CMS, and the latter are beginning to adapt their technologies for use in "headless" systems like Wordpress did with theirs. However, in any case, you need to choose CMS wisely and take into account all your requirements and preferences of the team.
In this material we have considered a headless vs traditional CMS problem, discussed features of these systems, their benefits and drawbacks, and listed the ways of using one or the other. We are currently running several projects that use CMS, which means that we are constantly practicing and learning new features of this technology. If you have a project that requires the use of CMS, then fill out the form on our website, where you can tell us about your project or ask questions. We will promptly answer them and offer your project estimation.