Headless CMS

01.03.2024

Author: Khoa Nguyen

In the age of digital transformation, companies must be able to respond to rapid changes in the way they communicate with their customers. Interactions with customers now take place via various channels such as apps, websites, digital signage, newsletters and other media. In this highly connected world, it is crucial that companies utilise tools that enable seamless multichannel communication. One possible solution to this problem is a headless content management system (CMS).

In this blog post, we explain what a headless CMS is, discuss its pros and cons and share our experience at jls in implementing demanding headless projects. The focus of this blog post is on the key facts and arguments in favour of using a headless CMS. A detailed discussion of all aspects would go beyond the scope of this article.

In the context of content management systems (CMS), the presentation layer is often referred to as the «head», while the pure content management in the backend functions as the «body». A headless CMS differs from conventional CMSs in that it strictly separates the content and its presentation.

This architectural decision means that a headless CMS focuses on content management and makes it available via an interface (usually a REST API) so that various «heads» (frontends) such as websites or apps can access this information. In contrast, with traditional CMSs, the presentation of content is developed directly in the CMS and additional effort is required to make content available to other frontends via a separate API.

Usually not. In addition to the API, a professional CMS offers a number of important core functionalities. These include functions such as editorial content creation (with page builders, WYSIWYG editors, previews), publication workflows, time-controlled publications, customer segmentation for personalised content, A/B tests and much more.

A headless CMS offers a number of advantages. The most important advantages are briefly explained below.

• Multichannel communication: Customers consume content on different channels such as apps and different websites. With a headless CMS, the same content can be distributed to the different channels via the delivery API.

• Flexibility in the frontend design: When implementing the frontend, developers can use the desired technology that offers customers the best experience. With a headless CMS, developers are no longer tied to the frontend technology of the CMS.

• Faster time-to-market: By decoupling the frontend and backend, development can be carried out in parallel and independently.

• Time and cost savings: Because the content for multichannel communication is recorded in a single location, this reusability of content across different channels leads to significant time and cost savings.

• Simple scalability and performance optimisation: By decoupling the frontend and backend, all components can be scaled independently of each other. The various channels can also be optimised specifically for the end devices for faster loading times and a better user experience.

Although a headless CMS offers many advantages, there are also some important disadvantages that should be considered before deciding on a headless CMS approach:

• Development complexity: With a traditional CMS, the architecture, technology and approach to development is already thought through and therefore predetermined. With a headless CMS, a customised frontend concept must be developed. This requires several experienced developers who are experts in CMS and frontend technology.

• Editorial content creation: Traditional CMSs offer real-time content creation with page builder functionality (drag and drop of UI components) and WYSIWYG editors. This is rarely possible with a headless CMS as the frontends are developed separately and independently.

• Dependence on developers: Complex frontend frameworks require developers to be brought in to make changes to the system, unlike traditional CMSs where simple customisations can be made by non-developers.

• SEO complexity: Headless CMSs require additional measures to create SEO-friendly websites, especially when JavaScript frameworks such as Angular are used. This leads to the introduction of additional components and increases the complexity of the solution.

• Additional costs and resources: Due to the decoupling of the front end from its CMS, this part must be developed and operated separately. This means that additional operating costs must be expected for the operation of the additional components and their scaling, optimisation, monitoring and maintenance.

We use different platforms for our headless CMS solutions, depending on the requirements of the project. For pure content creation for apps, we use cloud-based solutions such as DatoCMS, while for more complex projects we rely on the enterprise CMS Magnolia.

Common requirements for a headless content management system that motivate us to use the Magnolia enterprise CMS are:
 

• Editorial content capture and preview: The ability to easily create and directly preview content (WYSIWYG - What You See Is What You Get).

• SEO optimisation: The ability to design content in such a way that it is optimised for search engines and ensures better findability.

• Personalisation: The ability to adapt content to the characteristics of visitors in order to create more individual experiences.

• Security: A high level of security to ensure sensitive data and platform protection.

• Integration of third-party systems: The ability to interact seamlessly with other systems and integrate data from different sources.

• Flexibility and extensibility of the backend: A flexible backend that is customisable and enables the integration of new functions or extensions.

Magnolia is one of the established manufacturers of enterprise CMS. Magnolia is a hybrid CMS that can be used both with and without a «head». This offers the advantage that you can utilise all the benefits of the CMS world with a single platform.

As a headless CMS, Magnolia supports functions such as the creation of websites in the page builder using drag-and-drop, the creation of content using WYSIWYG editors, a live preview of content and personalisation using so-called customer traits. These are functions that only a few other headless CMS offer. Furthermore, front-end developers can obtain all the content they have created via the automatically generated Content Delivery API.

Magnolia also offers special development add-ons for various well-known frameworks such as Angular, Vue and React, so that the content can be loaded from the CMS with little effort in the front end despite the headless approach.

To ensure the SEO-friendliness of a website developed with a headless CMS, we use the NuxtJS framework. With NuxtJS, we can render a website created with VueJS on the server side, which is favoured by search engines.

Magnolia positions itself as a content hub with simple integration options. These features are noticeable as soon as additional data from various peripheral systems such as CRM, e-commerce and DAM need to be integrated into the project. Magnolia is a proven enterprise CMS and provides a large number of connectors that significantly accelerate the integration of peripheral systems.

A headless CMS enables the free use of any frontend technology for the presentation layer and standardised multichannel communication. Although the use of a headless CMS has various advantages, it also brings with it complexity and various additional dependencies. At jls, sophisticated headless projects are implemented with Magnolia and NuxtJS, because this combination offers several significant advantages such as the valued editorial content capture as with a traditional CMS, SEO optimisation, personalisation in content playout, integration of third-party systems and flexibility in the implementation of backend functions.