A Beginner’s Guide to Headless CMS

The term headless refers to the exclusion of the frontend or the presentation layer as opposed to a traditional CMS. A Headless CMS has no predetermined or default frontend system to define how it presents the content to the end-user. The content you create and store on a Headless CMS is in its raw, no-frills format either as JSON or XML, which can be published further using the frontend framework.

• Traditional CMSs are designed to serve content to only one channel. This implies one cannot display content stored in a traditional CMS on any other medium apart from the presentation layer defined by the CMS. A Headless CMS solves this by allowing users to reuse the content in whatever presentation layer they want.
• In a traditional CMS, customising and maintaining your website can be time-consuming and expensive. This cost and time implication is a result of the tight coupling between the frontend and backend. With a Headless CMS, there is a separation of layers, which allows making changes on the presentation layer without worrying about the backend.
• Traditional CMSs are heavily reliant on themes and plugins, some of which may contain bugs that can plague the website with slow speed. As Headless CMS does not deal with the presentation layer, there is no need to worry about malware-infested themes and plugins.

A Headless CMS’s frontend is designed to communicate with its backend through an API. At its core, a backend’s key elements consist of :

• Database
• Web server, which contains programming logic used to interact and retrieve content from the database.

Data retrieved from the backend is fetched and delivered through an API to the frontend. An API is a modular programming interface with in-built methods and protocols used to specify content types and fragments required to be served in the presentation layer. This decouples the frontend and backend layers, preventing direct communication.

• Allows Flexibility: A headless CMS offers the flexibility of presentation to content publishers. This helps serve content through an API to websites, mobile apps, or even billboards.
• Encourages Creativity: Provides frontend developers the creative freedom to decide what frontend web framework to use for displaying content. As a result, this takes out the limitation of dealing with ugly templates or bulky plugins offering limited features.

There are several popular CMSs, some of which are open source while others are either paid or freemium platforms. Open-source Headless CMSs are under open-source licenses and allow developers to modify the CMS code to meet their needs as needed. For open-source CMSs, support for new-time users usually comes from the online community of experienced developers.

On the other hand, Paid or Freemium CMS platforms are SaaS offerings that do not allow developers to modify the underlying code. Instead, organisations pay for a license key. Such services allow users easy and seamless options by letting them focus on building applications rather than platform maintenance, customisations, and updates.

Here is a list of the most popular Headless CMS:

1. Contentful

One of the most popular, SaaS-based headless CMS as per the recent industry trends. Contentful is a freemium service with:

• A free pricing tier called Community for a small group of 5 developers who want to try things out,
• A paid one for bigger teams,
• A custom request option for enterprises.

Contentful is a cloud-native, performant solution that various industry leaders have used for use cases ranging from mission-critical applications to marketing drives.

Features:

• Contentful is Language and Framework Agnostic.
• Provides Software Development Kits (SDKs) for the most popular languages and frameworks such as Java, PHP, JavaScript, Python, Ruby, .Net, Android, and iOS.
• Uses advanced caching systems and external CDNs to optimise the speed of API payload delivery.
• Provides both a RESTful API implementation for managing content as JSON payloads and GraphQL API for more exact server responses and content aggregation during delivery.
• Highly extensible and can integrate with third-party software and APIs through webhooks.
• Provides content modeling to structure your content for any channel.

2. Butter CMS

Another SaaS, API-based Headless CMS that provides a content API to query content into a frontend of your choice besides allowing content modeling, revision histories, localisation, and scheduling. Also supports webhooks for alerting applications of content changes.

Butter CMS plans include:

• A subscription-based service with a free developer plan for personal non-commercial usage
• A premium service for companies that easily allow the creation of landing pages, company blogs, case study pages, news and event sites.

Features:

• Returns JSON formatted API responses
• The content APIs are easy to consume, performant, and globally cached.
• Provides flexible content modeling.
• Allows management of multiple sites and environments from a single central location.
• Supports a variety of languages, libraries, and technology stacks such as Vue, ExpressJS, Javascript, Python, etc.

3. KeystoneJS

Keystone offers a Headless CMS built on Node.js, that lets you build applications instantly through an extensible Admin UI and GraphQL API. This lets KeystoneJs to work with a wide variety of front-end frameworks while giving users the benefit of choosing a framework of their choice. Besides the front-end frameworks, KeystoneJs allows configuring your own cloud-native framework including the choice of selecting a database.

Features:

• Supports a cloud-native setup by allowing Docker/Kubernetes containers to develop scalable and resilient applications
• Supports PostgreSQL and MongoDB by default. Allows user any other choice of database platform additionally
• Allows to create any type of application through its extensible Admin interface and GraphQL API
• Ability to define schemas quickly while allowing to choose between relational and non-relational data structure

4. Jamstack

Jamstack offers a Headless CMS that leverages CDN caching to offer enhanced scalability and load capability while serving content. Through Pre-Rendering, Jamstack generates markups in advance of when it is required to build. This enables web servers to pre-process data prior to a user request – thus enabling a super-fast content delivery without choking the server.

Features:

• Allows to use a webhook or publishing platform to automate builds
• Data remains on the edge by using CDN caching, as a result, helps save iterative web server processing for every single user request
• Offers advanced build tools, such as Babel, Webpack, and PostCSS
• Simplifies staging and testing workflows by leveraging Git, thereby allowing easier version control and project oversight
• Uses pre-rendering to generate and retain markups in advance for a streamlined, faster content delivery
• Offers enhanced security by serving pages through pre-generated sites and shielding physical infrastructure from being vulnerable to attack vectors

5. StoryBlok

StoryBlok is a SaaS Headless CMS with a visual editor that enables editing content with an in-context preview. For enterprises, StroryBlok offers a paid service that provides the platform to create and manage content using the enterprises’ StoryBlok UI or Management API.

Features:

• StoryBlok allows fine-grained access control.
• Provides both REST and GraphQL APIs to serve content.
• Also has an activity log that users can use to track changes and roll back to previous versions.
• Equips users with image transformation, optimisation, and caching.
• Compatible with a variety of technology and programming languages.

6. Graph CMS

Graph CMS is a freemium SaaS, GraphQL-based Headless CMS with a free pricing tier for small-scale projects, a paid one for larger teams, and a custom solution for enterprises. Graph CMS uses GraphQL; an open-source query language that provides a clear description of the data in an API. By doing so, it uses a GraphQL Native API that provides three APIs for managing content – A content API, a mutation API for batch updates or deletions, and a management API for managing models and schemas.

Features:

• Users can perform image processing and transformation on the fly by appending specific parameters to the image URL.
• Users can create webhooks to trigger special programs when content changes.
• Graph CMS has content localisation built in to help editors localise and translate content to various languages.
• Integrates with various development languages and platforms like AWS, Slack, and Firebase.

7. Strapi

Considered as the leading open-source Nodejs Headless CMS that gives developers the freedom to work with their favorite frameworks and tools in their implementations. Along with a free plan, Strapi also offers paid tiers with additional support features like the helpdesk, product training with specialists, and a solutions engineer for support.

Features:

• Supports different databases such as PostgreSQL, SQLite, MongoDB, and SQL.
• Supports both REST and GraphQL APIs.
• Gives developers the ability to write and maintain documentation with one click.
• It is an extensible system with various plugins available for different use cases.

Traditional CMSs are bloated and are known to offer limited flexibility with the presentation of content. Headless CMSs address this need by creating a platform that allows organisations to manage their content as a data source without coupling it to the presentation layer.

An organisation should base its decision concerning the choice of Headless CMS to implement on a thorough analysis of its content management needs, a definition of core scenarios the platform should support, the consideration of onsite infrastructure, and an evaluation of its developer ecosystem.

By choosing Headless CMSs that are best suited to their content needs, organisations can benefit from the fast, flexible, platform-agnostic, and cost-effective content management paradigm that these platforms provide.