Headless Content Management Systems

Traditional CMS

To better understand what a headless CMS (Content Management System) is, we first need to understand a traditional CMS. Since the earlier days of the web, the traditional CMS has been around to present content like text or images on a web page. A traditional CMS puts all the content—including text, images, and videos—as well as HTML and CSS in the same place, making it very confusing and hard to differentiate because it gets mixed in with the code. Another thing with a traditional CMS is that the content is manually added to the web page by the developer.

As the technological world evolved and advanced, content had to be displayed on multiple different devices, most notably desktops and smartphones. Because the traditional CMS organized content in a way that suited a desktop web page, introducing other devices made it difficult to manage the content.

Headless CMS

Let's start off with the basics. What is a headless CMS?

Any CMS where the content repository is separated from either the frontend or the system displaying that content is a headless CMS. Because we refer to the frontend as the head, this system is headless.

This approach allows us to have separate places to manage the back-end content and the front-end visualizations of the content. The content can be managed separately and still be displayed across any of the multiple front-end systems available to us. This is very helpful, because we can now integrate our content into any system, whether it’s a desktop web application or a mobile application.

Advantages of a headless CMS

The advantages that a headless CMS provides us include:

• Content is ready to be served to any device.

• Developers can easily give more attention to the presentation of the content for a better user experience.

• Content can be delivered to any frontend. This allows developers to choose their frameworks and libraries without any limitations from the content.

Strapi CMS

Strapi is an open-source headless CMS that we'll be using as the backend of our application in this course.

Let's take a quick look at what a basic Strapi application looks like:

For now, we don't need to worry about the code or creating an admin user. Let's just run it and see what a boilerplate Strapi application looks like.