In this article, we decipher for you what a headless CMS is and why it is interesting to think about this technology for new sites to develop.
Alexis Le Baron
First of all, let's go back to the classic CMS. A CMS is an online tool that allows you to simply create a website, with or without technical knowledge. The idea is simple, you add content on the back-office of the CMS. Then, these data are processed and added in blocks. Finally, the blocks arranged on top of each other will form a web page visible on the web.
Let's move on to our topic of the day: headless CMS
To explain simply, a headless CMS is a CMS that separates the back office responsible for the creation, management and storage of data from the front office which will display the content.
To make a simple parallel, we can compare the back and front office to a restaurant. Indeed, the front office will represent the table where the customer will sit. While the back office represents the kitchen and all the cooking of the dishes. This part is essential for the restaurant to satisfy its customers. And finally, the API represents the server who will bring the plate from the kitchen to the restaurant table.
This CMS headless principle is based on two things:
A headless CMS is therefore a back-office tool for creating websites. The term "headless" means "without head". It simply implies that the CMS is not connected to its head or, in other words, the CMS is not connected to the visible part of the website.
The main goal of a headless CMS is to create data that is then stored in a database and injected on the front-office through an API. This technology is more and more used, because nowadays, data from websites are not only visible on the web, but also on phones, virtual assistants, virtual reality headsets or car dashboards. All the data that the API is going to send will be dispatched on different types of media like the ones mentioned before. And, depending on the evolution of the site, multiple distribution media can be added.
With this technology, you can manage more content and deliver it to multiple media over and over again.
Like a classic CMS, the headless CMS has essential functionalities such as editing and content management, user permissions or interoperability. By the way, if you don't know them, discover the basic functionalities of a CMS. Also, from a user point of view, the use of a classic CMS or a headless CMS is the same.
However, contrary to the classic CMS, the headless CMS does not allow, or very rarely, to define the style of the website. That is to say the colors or the layout of the blocks. This task is generally entrusted to the front-office.
| CMS CLASSIQUE | CMS HEADLESS |
|---|---|
Contains all back-end code in back-office. | Contains only the back-end code |
The front-end (HTML, CSS, Javascript) is internal to the CMS and is located with the back-end. | The front-end (HTML, CSS, Javascript) is external to the CMS, in a web or mobile app for example. |
— | Has an API so that the front office can retrieve the data. |
— | Allows you to create multiple sites on different media with the same data. |
The headless CMS allows to build several websites or web applications from a single CMS. This allows to display an identical content on both a website and a mobile application for example.
Sites built with a headless CMS perform better than other sites because they are static. This means that the pages are generated in a cached file. At each launch, the loading time is very short, because the data does not need to be loaded.
The use of technologies like React or Vue allow to create beautiful, modern and dynamic front-end interfaces.
Since multiple front offices can be linked to a headless CMS, its use is future-proof. Content saved in the back office can be used and adapted anywhere.
Thanks to the fact that the back-office and the front-office are not connected, there is a total freedom on the visible part of the website. It is therefore possible to work with the language or tools that you want.
Also thanks to the fact that the back and front ends are not linked, the risk of malicious attacks on the database is reduced, especially if you use a SASS like Strapi.
Like everything else, headless CMS have drawbacks. The main one is the complexity and the cost to do customization. It will require more development time than for a classic CMS. Then, some features are not adapted for this type of CMS like :
Also, since the headless CMS is recent, the oldest dating from 2011, there are fewer plug-ins available. Finally, the front-office part can quickly become long and difficult to develop compared to a classic CMS. Indeed, on a classic CMS, you just have to add variables while on a headless CMS you have to retrieve data via the API and add them.
It is also important to know that all site data retrieved from the API is accessible and therefore can be easily scraped.
| STRAPI | DIRECTUS | CONTENTFUL | WAGTAIL + STRABERRY | GRAPHCMS | |
|---|---|---|---|---|---|
Open Source | Open Source | Proprietor | Open Source et sur-mesure | Proprietor | |
2016 | 2004 | 2011 | 2015 | 2015 | |
France | USA | Germany | England | Germany | |
Free without hosting | 25$ with hosting | Free with classical hosting | Free | Free with classical hosting | |
To summarize headless CMS, we can say that it is the future for companies wanting to dispatch a unique content on multiple media. And, even if this technology is quite recent, there are now many tools and developers working on this subject.
No. It all depends on how the pages are built. Generally speaking, a headless CMS produces better performing pages than a Wordpress, but there are many exceptions.
The only feature that a headless CMS has more is the ability to create multiple apps with the same content from the same CMS. The rest is the same.
It all depends on the tools you use. If you want more customization then yes, it is possible that the headless CMS is more expensive. If you use a ready-made headless CMS, the prices are similar.
If you use ready-made tools, you will only have to maintain the front-end (the visible part). So the maintenance is divided by 2. If you use a custom-made headless CMS, the maintenance is identical to that of a classic CMS.
No. Both have their advantages and disadvantages. If you want to create a web and mobile application while wanting to control the content, then yes the headless CMS is for you. If you only want a simple website, a classic CMS may be better suited.
The subject of CMS fascinates you, so these articles should also interest you.
Anne-Laure Compain
Alexis Le Baron
Alexis Le Baron
Alexis Le Baron
Alexis Le Baron
Alexis Le Baron
