What Is A “Headless CMS” & How Does It Actually Work?

Do you often wonder how people create, manage, and modify content on a website? Most of them use a tool called a CMS, and without needing to write code from scratch, they are able to create and publish engaging content that results in more leads, conversions, and ultimately, sales.

CMS is an acronym for Content Management System

With a CMS, you can create content and customise your website’s functionalities by using templates and plugins. Due to its popularity and practical use, it’s no surprise that more than 50% of websites are built with a CMS — indeed, a single tool for all purposes! 

CMS platforms like WordPress, Drupal, and Joomla have been around for many years, but modern business ecosystems can’t afford to continue to rely on traditional or monolithic CMSs. For businesses to succeed, you need not just an enterprise website but also mobile apps, interactive services, and digital displays. So you want a better CMS that does more than delivering web content.

Here comes the headless CMS!

Headless CMS is a high performance, flexible, and scalable system with enhanced security. The major advantage of using a headless CMS is it optimises your website’s performance and makes it incredibly fast. In turn, a faster website improves the overall user experience in today’s business world.

So, in this post, we’ll define what a headless CMS is and how it works. Then, by providing you with some recommendations and the set-up processes, we’ll also help you decide if your company should switch from traditional to headless CMSs.

Let’s get started!

What is a “Headless” CMS?

If your business wants to distribute content on more platforms than just your website — or perhaps you want a separate CMS that’s detached from the presentation layer — you’re essentially thinking about a headless CMS, an enhanced version of the traditional CMS.

Due to the digital era’s high demands, businesses now focus on engaging customers via various channels and helping them throughout their buyer’s journey. Furthermore, since the content in a headless CMS is separated from the display layer, it can be used on any device, from mobile phones to tablets to smartwatches.

Also, from the developer’s perspective, a headless CMS gives them the flexibility to innovate and make the system future-proof. Despite the marketing and developer advantages, to fully understand what a headless CMS is and how it works, you’ll first need to know the basic concepts of traditional and decoupled CMSs.

Traditional CMS vs. Headless CMS

In a traditional (aka coupled) CMS, the back-end system (for storage and management of content) and the front-end system (for delivering content to end-users) are tightly integrated.

Content is created, managed, and stored on the back-end, along with website templates and customisation features. The content is then published and accessible to visitors around the world on your website. So with a traditional CMS, content creators are writing and editing on the same system your website visitors are browsing!

Traditional CMSs are built mainly for websites. Blogging platforms like WordPress, Wix, Drupal, Squarespace, etc., are examples of conventional CMSs. However, since they have a closely attached front-end and back-end architecture, it’s difficult to render the stored content on multiple channels, as each will require different codes and design templates.

To make the content easy to deliver, the database and the presentation layers are detached. The stored content from the back-end is accessed by an application programming interface (API), such as a REST API through an external publishing tool, and distributed to various channels. Such a decoupled CMS with no defined front is called a headless CMS.

A headless CMS doesn’t dictate how the content is presented to end-users by breaking the front-end and back-end interconnectedness. Instead, platforms like Contentful, Strapi, or Sanity use headless architecture, where the front-end (or the “head”) is removed from the back-end (or the “body”).

The imagery is a bit grotesque but equally intriguing!

Decoupled CMS vs. Headless CMS

But isn’t headless the same as a decoupled CMS? Yes and no!

It’s true that a decoupled CMS separates the two layers of a website via an API and houses them independently. The API delivers the content from the back end to the front end. For instance, consider the traditional CMS WordPress, which can also be used as a decoupled system by introducing an API.

Even though the front-end and back-end are detached, front-end CMS architecture is still predetermined due to a particular environment like React or React Native. That means the two systems are still interconnected. 

Enter a headless CMS!

The headless CMS is a subset of a decoupled system, but the key difference is that a headless CMS is truly front-end agnostic, meaning headless does not have a defined presentation layer. A headless system lets you deliver your raw content anywhere, from wearable devices to mobile apps to billboards and kiosks.

Another way to understand the difference between headless and decoupled platforms is to extend the metaphor of “a headless body.” With a decoupled architecture, the “head” is not attached to the main “body” as with a traditional CMS, but the “head” is still there as this CMS has front-end delivery tools if you want to use them.

So a decoupled architecture is a hybrid of traditional and headless CMSs, giving you the best of both worlds. Deane Barker, the CEO of Blend Interactive, has summed the differences precisely, as:

“A decoupled CMS is proactive — it prepares content for presentation and pushes it into a delivery environment. A headless CMS is reactive — it manages content, then just sits and waits for some process to ask for it.”

Touché, right?

How Does A Headless CMS Work?

The headless CMS has gained a lot of traction in the web space in recent times. As multi-channel publishing increases in complexity, more and more companies are opting for a headless architecture.

Although multi-channel publishing is not a new idea per se, in the age of the Internet of Things (IoT), you should be ready to publish your content anywhere. The classic desktop, tablet, and mobile deliverables of WordPress are not enough when you want to post content that is easily consumable on smartwatches and VR headsets.

Headless CMSs use APIs to deliver content, which is why they’re often called API-first or API-driven CMS. APIs consume data through REST or GraphQL languages. For example, Representational State Transfer (REST) is a software architecture that helps developers create web services and provide interoperability between clients’ requests and databases. RESTful services allow requesters to access and modify data via a set of stateless operations.

Another way of rendering data is through a query language for API called GraphQL, which isn’t tied to any specific database and is backed up by existing codes. By defining types and fields — and functions for each field type — it gets data from the back-end.

Let’s take an example to put this idea into perspective.

Suppose you’re a heavy vehicle accreditation service provider like Trackify. Now imagine a few ways your potential customers would interact with you. They might land on your website through a search engine, or they might use a voice assistant like Siri or Google Assistant. Your website users may also be interacting with you through the mobile app. What you have here is an excellent example of multiple users using multiple channels!

To offer a consistent user experience across all platforms, you should be able to fetch data (such as quotes or pricing) and deliver them instantly. With the help of a headless CMS, you can efficiently deliver content via APIs irrespective of channels, platforms, or devices. Sure, you can also achieve similar results with decoupled CMSs, but you’ll have to maintain a delivery system for each channel.

You can’t push your website’s content to an android device without building the entire infrastructure for it, can you? However, with a headless CMS, you can push your content anywhere with REST or GraphQL APIs.

Headless CMS Architecture

Having a tightly coupled back-end and front-end has been the default CMS architecture for years. Since this traditional structure lacks flexibility, headless CMSs have started replacing it with a system with no definite front. The two layers — content creation and content presentation — are decoupled effectively, making it easier for developers to push the raw content anywhere.

From a technical point of view, the content is not rendered by the same tool but instead with a dedicated end-consumer application. Furthermore, instead of directly hosting the content on the root server, it is published through an API. In other words, a headless CMS provides content in JSON or XML format to a presentation tier, known as Content as Service (CaaS). CaaS helps content flow freely to websites, native apps, and connected devices.

While traditional CMSs like WordPress and Drupal try to be a single solution for creating and delivering content, CaaS focuses purely on content management. With headless CMS, developers are free to access content via API calls and create multiple front-ends. Compared to a decoupled architecture, an API in the headless system is more flexible as it exists as a tool for the front-end to retrieve content.

With CaaS, there occurs a shift from page-centric web to content-centric web. Content then operates in chunks, not page blobs. In addition, CaaS also separates the front-end from the back-end, thereby separating content creation and content presentation. Finally, being a SaaS (Software as a Service) subgroup, CaaS moves your content to the cloud platform. So there’s no need to set up, maintain, and scale the content management infrastructure.

Frameworks That Support A Headless CMS

Whether you plan to develop a simple website or an interactive mobile app, you have plenty of options when it comes to choosing a framework. By combining available frameworks with a headless architecture, you get a system that enables you to create and manage content besides providing you with all the necessary tools to build interactive platforms.

You can use several frameworks, from Next.js to React.js, alongside a headless CMS. Below are the top three frameworks that you can use to support your headless CMS.

Next.js

Next.js is among the most popular frameworks for websites and applications. Many successful websites like Netflix, Nike, and TikTok are built on Next.js, as it allows developers to create static generation and write server-rendered React applications easily. So it’s considered an ideal framework for creating dynamic websites with interactive tools for users.

Next.js is unique as it’s a framework built on top of Node.js, and the top benefit of using it is becoming flexible in building online applications. Traditional React apps render their content in the client-side browser, whereas Next.js extends this functionality to include apps rendered on the server-side.

Gatsby.js

Gatsby.js is usually used to build websites in static HTML, which can later be stored in Content Delivery Networks (CDNs) for easy access. Combining GraphQL and React, Gatsby.js yields a developer-friendly static site generator. Also, this front-end framework speeds up the page loads by employing asset optimisation, server-side rendering, and code splitting.

If your website has primarily static content with a fixed number of pages, you might want to consider using Gatsby.js as your front-end framework. Also, since Gatsby.js has adjustable plugins and templates, it’s easy for developers to build and modify websites.

[Pro Tip: Next.js vs. Gatsby.js: Which is better? Well, the primary difference lies in the fact that Next.js needs a server, while Gatsby.js can run even without a server. In addition, Gatsby.js is mainly for static websites, whereas Next.js can build powerful and dynamic websites. Finally, as Gatsby.js contains adjustable plugins and easy templates, developing a website on Gatsby.js is faster than in Next.js.]

React.js

React.js is a popular front-end JavaScript library for building fast and interactive user interfaces (UIs). Large companies like Instagram and New York Times use React.js as it brings many advantages to the table. For example, by dividing the UI into smaller components, React.js assigns properties and functions to each component, making it easier for developers to code and debug.

React.js lets you easily create dynamic web applications since it requires less coding and more embedded functionalities. It is also easy to learn, thanks to its combination of simple HTML and JavaScript concepts. In addition to creating web applications, you can use the React Native framework to make mobile apps. Since Facebook initially developed React.js, they have released many Chrome extensions to debug React applications. Due to this, many businesses and organisations are adopting the React library for front-end development.

Git-Based vs. API-Driven CMSs

Now that you’re familiar with some of the common frameworks for front-end development, let’s understand the two types of headless CMSs: Git-based and API-driven. The difference between the two is based on how the content is stored and consumed.

Git-Based CMS

With a Git-based CMS, the content and the history of changes are stored in files in the Git repository. The repo allows you to merge, clone, and manage your content. The APIs then interact directly with the Git repository host, such as GitHub, GitLab, and Bitbucket. Some common examples of Git-based CMSs are Forestry, Crafter CMS, Netlify CMS, and FrontAid CMS.

One of the major benefits of using a Git-based CMS is that developers get complete version control and use all the tools on flat files. Since Git is an open-source tool, there’s no chance of being locked in. What’s more interesting is that you can easily set up the Git-based CMS. After that, it’s only a matter of plug and play.

On the other hand, with a Git-based CMS, you’ll get a limited number of front-ends. So if you want several applications to pull the content from a single CMS, a Git-based option might not be the best solution. Also, for complex or dynamic content — like new posts every minute — Git is not the place for that as well.

API-Driven CMS

With an API-driven CMS, your content is served via an API by completely decoupling it from the presentation layer. Then, combined with REST or GraphQL, developers can build the front-end system. Interestingly, you get your data depending on the framework you choose to work with it. Some of the common examples of API-driven CMSs are Contentful, Sanity, Prismic, and Directus.

API-driven CMSs store your content in its system. The data you enter is validated and stored in its database, which usually means the API-first option is relatively more expensive than Git-based platforms. However, if you have many different apps and websites pulling content from a single CMS, this is the best solution for you! API-driven CMSs are well-suited for multiple front-ends.

Another great advantage of the API-first option is that you get many options to customise your CMS. You can even build custom CMSs on top of advanced APIs. Another perk is you can handle large amounts of data and frequently updated content.

The major disadvantage of using an API-first CMS is that it doesn’t guarantee Git features at all. So if you prefer Git-based architecture, think carefully before choosing an API-first option. With an API-driven CMS, you’ll depend more on your developers, which might get costly if you don’t plan ahead of time.

Which is better: Git-Based or API-Driven?

There’s no easy way to answer that!

The main difference between the two is how the content is stored and accessed. That should be your primary concern when choosing the right CMS for your project.

A simple rule is you don’t need to create hundreds of posts and rebuild your website often, Git-based option is a better choice. However, if your project is complex and demands better scalability, API-driven CMS is better.

If you need more help in understanding the differences and complexities of Git-based and API-driven CMSs, book a friendly chat with us, and we’ll get back to you. Likewise, if you need more info, don’t hesitate to ask!

Benefits of a Headless CMS

Headless CMSs come with many advantages. A headless CMS offers much to content marketers, software developers, and website/application users, i.e., flexible architecture to speedy performance.

High Performance

A headless CMS helps you get things done faster by stripping away the complexity of a traditional CMS. Conversely, the constraints of a coupled or decoupled CMS results in slower page loads. That’s why using a headless CMS and displaying custom content via React.js across multiple channels is sure to enhance performance more than simply using WordPress and publishing content on a website.

Besides, a faster web page or application would also mean higher conversion rates, which directly affects business growth!

Flexibility for Developers

Developers will spend their valuable time creating presentation layers (UI/UX) without worrying about the limitations of a content management system. Since your developers will be using APIs to retrieve content, they don’t need to learn a CMS-specific template or use frameworks that don’t contribute much. In short, developers have full control over the structure and appearance of the content, and they can choose the frameworks and tools they like.

Easy to Scale & Measure

Since the back-end and front-end are separated in a headless CMS, this detachment creates easy scalability. There will be no downtime during maintenance. The content delivered via APIs is easier to manage and distribute without compromising your website performance. You can also measure and analyse its reachability effectively. In addition, since the presentation layer and database are detached, you can scale your content and make it adaptable for future use.

Content for Multiple Channels

With a headless CMS, you can deliver your customised content across multiple channels. You just need to create content once, and with the help of an API, you can efficiently distribute it to connected platforms. So whether your users are browsing your website or using a native app — or perhaps consuming content from a wearable device — you can create a smooth web experience for them through headless CMSs.

Enhanced Security

The API that retrieves the content adds an extra layer of security to your headless CMS. As a matter of fact, the API can be placed behind one or more layers of codes, making it less vulnerable to attacks. Access to the headless CMS is restricted to the organisation, while the content can be encrypted and/or decrypted as per the requirements. The risk of malware attack is also lower as the presentation layer is not linked with the database.

Use Cases of a Headless CMS

So what can you actually do with a headless CMS, and when is the best time to use it? You might want to consider the following use cases.

If you’re the owner of an online store, you need to provide your customers with engaging content. To achieve growth in a competitive market, a headless CMS will help you build e-commerce websites and applications (with JavaScript frameworks) that guarantee seamless conversions.

Here’s a real-life example: L’Oréal, a French beauty brand and the world’s largest cosmetics company, went headless, increased its website loading speed, and improved the digital experience for its customers.

In addition, you can also create iOS and Android apps by using the React Native framework with your headless CMS. This will undoubtedly help you establish links between your website content and mobile devices.

For instance, Spotify, a Swedish audio streaming provider and the world’s largest freemium service, used Contentful’s headless CMS and Gatsby.js framework to create their design page to attract more visitors.

Top 5 Headless CMSs

Contentful

Contentful is a cloud-based headless CMS that helps you publish across channels. Companies like Nike, Audible, and Spotify use Contentful’s services to manage and deliver their content.

If you opt for Contentful, you can start building your digital experiences at an enterprise level while your content creators take control of each iteration in an intuitive application. Besides, developers can work with frameworks of their choice. As a result, you and your team can get structured content ready for any channel.

Contentful comes with three pricing categories community, team, and enterprise. The Team plan starts at $489 USD/month, which you can upgrade with your project’s needs.

Strapi

Strapi is an open-source headless CMS that’s readily available on GitHub. It’s 100% JavaScript, fully customisable, and developer-first. As a result, companies like IBM, Toyota, and Walmart use Strapi’s services to manage their content.

With Strapi, you can design APIs fast and manage your content easily. Since Strapi is open-source, customisable, and self-hosted, businesses who wish to keep content in their own system are at an advantage.

Since it’s open-source, the costs are very nominal. However, you have to be prepared for a lengthy set-up. Strapi’s pricing comes with three plans: bronze, silver, and gold. For the initial bronze plan, you’ll have to pay 12.5 AUD per admin user/month.

Sanity.io

Sanity.io is a cloud-based, unified content platform that allows real-time collaboration among your content team members. Companies like National Geographic, Netlify, Condé Nast, etc., have been using Sanity’s services.

The most exciting thing about Sanity is its flexibility to build data-driven content solutions. Their motto of “by developers, for developers” helps your dev team use tools and frameworks of their choice and your content team to multi-level edits and track changes. You can work together with teams: develop, review, and iterate.

Like Contentful and Strapi, Sanity’s pricing comes with three tiers — a basic free version, a mid-level option with 1,317 AUD/month, and a custom enterprise solution.

Directus

Directus is another open-source platform that provides an instant app and API solution for your SQL database. Companies like Mercedes-Benz, Hearst, Tripadvisor, etc., are using Directus’ headless services to manage their data and create intuitive apps.

It is a 100% JavaScript and open-source service, and it helps you manage SQL database content and rapidly design new APIs. Directus also comes with three levels of pricing: self-hosted (free), on-demand cloud (68 AUD/month), and enterprise cloud (custom pricing).

Prismic

Prismic’s headless CMS provides you with many technologies, frameworks, and languages to choose from. Your content, design, and development teams can then work together to produce a highly scalable end product. Due to its flexibility and customisation, companies like Rakuten, Uneo, and Google are using Prismic.

With Prismic, your dev team can create dynamic layouts and model your editing toolkit before handing it over to the content team. Your dev team can also choose frameworks (from Node.js to Gatsby.js) and query the content as a JSON response before hosting it on a server.

Prismic’s pricing comes with a basic free version as well as a starter (9.72 AUD/3 users) and small (20.83 AUD/7 users) versions. They also have Medium (138 AUD/month) and Platinum (694 AUD/month) plans for bigger teams and organisations.

Top Decoupled CMSs

Despite the growing popularity of a headless CMS, two decoupled CMSs are still in vogue, and there’s a valid reason for that! In this section, we’ll briefly introduce WordPress and Drupal as the two top decoupled CMSs.

WordPress

WordPress is the simplest and oldest open-source content management system. So it’s no surprise that WordPress covers nearly 43.2% of all websites on the internet. Initially a traditional (coupled) CMS, it has now gone decoupled, producing JSON-feeds of data and sending it to WordPress REST API. 

Here’s a fun fact: Do you know that organisations like Microsoft and media houses like The Rolling Stones use WordPress to deliver their content on many channels? WordPress powers even the official whitehouse.gov!

If your site needs data from multiple sources and delivers it to users without making a stop at your WordPress database, decoupled might be a good choice for you. Another reason to choose WordPress decoupled architecture is when you don’t want to add layers of complexity of a headless infrastructure to your system. For a straightforward website, having too many constraints and parameters might actually slow down the deployment of new features, so you might want to consider a decoupled system.

Drupal

Like WordPress, Drupal is a free and open-source content management system that provides a back-end framework for at least 13% of top websites worldwide, ranging from personal blogs to government websites. It is flexible and highly scalable, and that’s why organisations like The Economist, Tesla Motors, the Government of Australia, etc., use Drupal as their trusted CMS.

Another fun fact: The Government of Australia is standardising on Drupal for many government agencies across Australia, starting with the country’s homepage!

With its module extensions and native features, Drupal offers many options. You can create mobile and integrated digital applications and help users gain a seamless content experience every time they interact with your content. So, again, if you want to strip away the complexities of a headless architecture and work on a flexible and scalable environment, Drupal can be an excellent option for you!

Why You Need a Headless CMS

There are many reasons why you might want to opt for a headless CMS. 

• The primary benefit is its front-end flexibility that allows your developers to use the best tools and frameworks to build websites, mobile apps, digital signs, and much more. 
• Another reason why you should consider a headless CMS is because it’s a future-proof technology. Since a headless CMS is built upon APIs, it can be easily integrated into newer technologies that’ll come out in the future.
• With headless CMSs, you can increase your marketing velocity. That means your marketing team can support omnichannel commerce more efficiently and deliver content with a consistent brand message.
• A headless CMS also frees content creators from developers. That way, they can have more control over the content they produce and deliver and work to make their content more engaging.

Why You Might Not Need a Headless CMS

Despite the apparent benefits, you might not really need a headless CMS. In such situations, it’s best to stick with a decoupled CMS.

• Most headless CMS will need front-end developers to build presentation layers. This adds technical complexity and budget restraint to small businesses and start-ups.
• One major drawback your marketing team will have with a headless CMS is a lack of content visualisation. A purely headless CMS has no presentation layer, so it’ll be challenging to picture what the content will look like.
• If your company doesn’t have the budget and technical expertise to support a headless CMS, you might as well stick to a decoupled architecture. Also, if yours is a small business with fixed content delivery channels, there’s no need to add unnecessary technical difficulties.

Conclusion

So what should you do?

Now that you know almost everything about a headless CMS, the best advice we at WEBO Digital can give you is to “go headless at your own pace.” It’s vital to understand that you should only shift when you and your business are ready, and it makes good business sense to do so, not just because of the hype!

There are many different choices for headless and decoupled CMSs, and it’s up to you to find the one that matches your business and budget requirements. A headless CMS is indeed going to solve many problems, from publishing content across multiple platforms to updating content frequently. Yet, it also comes with some caveats: the initial technical complexity and higher maintenance costs.

If you still need some professional guidance to decide whether a headless CMS is suitable for you, feel free to send us a message. We’d love to hear from you!