Headless CMS is a content management system initially designed without a frontend but only with APIs. This approach allows you to connect any frontend to the Headless CMS core, no matter what platform it's built with or what language it uses.
Moreover, such systems can work simultaneously with several distribution channels, thus providing you with a content-centric approach.
If you're not familiar with the concept of headless CMS, here's the shortest and the most straightforward video explanation of what it is.
Advantages of Headless CMS over classic CMS
The CMSs we're used to are designed to work with one site or interface. When a client requests a particular page, the request is redirected to a web server (such as Apache). It executes dynamic code, like PHP, and, if necessary, accesses the database server.
The page, in reality, is built dynamically (hence the concept of "dynamic sites") - from pieces of HTML, JavaScript, and data stored in the database.
The page is rebuilt every time accessed (unless it is cached). This takes time and server resources. If it's a JavaScript-based website, the browser can perform rendering on the client-side, while some additional queries are still sent to the database stored on the server.
Headless CMS works primarily with static site generators and sticks to the Jamstack architecture. The interface of all possible pages can be generated (rendered) in advance on the server and is stored in static copies on the servers of CDN providers. The rendering and delivery time is reduced significantly since static content is served to browsers or mobile devices, using the closest to the client CDN server.
Some more benefits of Headless CMS.
Omnichannel
You can connect any number of interfaces (frontends) to the Headless CMS. These can be websites, mobile applications, IoT device interfaces, etc. There are no restrictions on the number because, in any case, they will access the same API.
Centralized work with content
There is no need to have several coordinated teams that will work, each with its content. You can optimize content delivery to make it super effective. As a bonus, you can reduce expenses on content managers.
Focus on microservices
This is considered to be the best architectural solution for large enterprise-level products. A lot of dev teams are moving to microservices. Though it’s not some sort of mainstream, it is the possibility of scaling and simplifying work (respectively, lower requirements for the level of qualification, which automatically equals lower costs for customers).
Increased security
Since clients receive static content, there is zero chance of being hacked through direct database queries.
Resistant to high loads
By connecting to a CDN, you can use a distributed network of high-performance channels. The CDN network was originally designed for high loads. It is difficult to attack or overload it with requests. Even if one of the nodes falls off, the rest will remain in service.
High performance
Static content is served faster, and customers and search engines will be satisfied. Moreover, it doesn’t matter if you have a large enterprise-level application or a small website. All of them will render quickly.
Ease of maintenance
It all depends on the experience of the developers. But at a minimum, separate specialists in load testing and setting up server balancing will not be required if CDNs are used.
Cons of Headless CMS
Headless CMS are still tools for professionals and code-savvy individuals. You will need a programmer or coder to integrate and configure your website.
Headless CMS may require a cloud hosting environment which increases maintenance costs.
Moreover, such CMS are not suitable for hobby projects (blogs, info sites, etc.) - the architecture and implementation can be too complicated.
Headless CMS classification
All Headless CMS can be differenciated by:
Open-source:
- yes;
- no.
The way you host it:
- own server/infrastructure;
- cloud (SaaS);
- virtual server (suitable for renting proprietary software and hosting it on your facilities).
API type:
- RESTful;
- GraphQL;
- Git repositories;
- your standard.
In addition, Headless CMS can work with plugins/extensions, offer ready-made interface options, or even provide unique development environments.
Some Headless CMS can work directly with databases, not through API, but this is already weakly correlated with the Jamstack architecture, although it fits the definition of “Headless.”
Best Headless CMS
Currently, there are many CMSs on the market; simultaneously, there is a very thin line between classic CMS and Headless. Using a set of plugins, scripts, and an API, any CMS can become a "headless" one.
Traditionally, API-focused "engines" are classified as Headless. Below are the best representatives in the industry.
Ghost: GitHub’s top-rated open-source Headless CMS
Ghost is the best open-source tool for major publishers. The project started in 2013 through a successful Kickstarter fundraising campaign. More than 2.5 million customers use this CMS. There is a PRO edition of the service (cloud infrastructure from developers), and its turnover exceeds $3Mln/year.
Ghost is often used in niche projects, such as info sites with a subscription model, premium publications, paid mailing lists, etc.
Advantages
Ghost is easy to install on your hosting and integrates with standard solutions and services. For example, there are ready-made integrations with social networks, video hosting, marketing and SEO tools, payment acceptance services, email newsletters, etc. If desired, you can rent a ready-made cloud infrastructure. It is possible to work with databases (by default, SQLite or MySQL, but the list is easily extended). Ready-made interface themes can be downloaded or purchased in a special online store (if you don’t have time to develop your own). There is a desktop application for managing content (all popular operating systems are supported, including Linux).
Disadvantages
To host this software, hosting with a special configuration is required: support for Node.js and npm, ready-made docker containers, or VPS servers that will have to be customized. In any case, this is an atypical approach. Admin panel interface without Russian language support. Complicated installation and configuration for non-experts.
Pricing
Free if you install it on your server. Access to ready-made cloud infrastructure - from $29/mo.
Cockpit: PHP-based headless CMS
The Cockpit is one of the few Headless CMS installed on a shared hosting, where there is support for MySQL/SQLite databases and the PHP programming language. In other words, this is a solution that can be installed on a non-specialized hosting or virtual server.
It's also open-source and thus distributed free of charge. If you wish, you can use premium tech support.
Advantages
Unlike many competitors, Cockpit initially supports many interface languages, including Ukrainian. The admin panel is simple and easy to manage. There is support for multilingual sites (for example, if you need content in different languages for the same page).
It is possible to install plugins/add-ons that expand the standard functionality. Very flexible configuration of content models.
Disadvantages
One programmer/coder can easily maintain the Cockpit CMS. There is no implementation of a ready-made cloud service with high availability; the infrastructure can be organized independently. So far, there are only a small number of additions. Content models will have to be configured separately (there are no ready-made integrations for popular solutions).
Pricing
The CMS is free.
Sanity: a quality cloud service with a free plan
Sanity is a high-performance solution for multi-level development teams. This headless CMS will be of particular interest to the teamwork of editors/authors: all changes are displayed in real-time.
The service can be quickly integrated with existing interfaces; detailed documentation is provided for developers.
Advantages
A special open-source tool is provided for more convenient work with content - Sanity Studio (single-page application is JavaScript-based). There are plugins and ready-made integrations with popular development services/tools, many examples (starter projects), and detailed documentation.
Even the free plan has content caching and CDN. If you do not have enough resources, you can buy them as much as you need. Therefore, the pricing policy is quite flexible.
Disadvantages
The deployment model is complex: you will need an account in the system and an installed instance of the CMS (Sanity Studio) on your server to query the Sanity network database. At the same time, the query language (API) is non-standard - GROQ. An external plugin can add GraphQL support.
Pricing
The basic subscription is free. It includes certain limits, such as the number of users (no more than 3), API requests, disk space (5 GB), etc. If necessary, they can be expanded. Here you can compare all pring plans.
Strapi
Strapi is a content management framework powered by Node.js. This is an open-source project, completely free. The system is deployed locally on the company's server, ensuring data security.
The CMS can be customized and scaled with a plugin system. It provides many built-in features: a convenient administrative panel, authentication and access management, tools for working with content, an API generator, and more.
The system is developed by enthusiasts and supported by hundreds of GitHub contributors who create it per new requirements and technologies. The admin panel, like the API, is easily customizable. Functionality expands with custom plugins in seconds.
Strapi supports data transfer through both REST and GraphQL. This expands interaction possibilities with different clients, mobile applications, and IoT devices.
The system uses JavaScript, allowing you to work with one language both in the CMS and the frontend.
The system has many applications and it can be used for static websites, mobile applications, corporate resources, and e-commerce.
Advantages
Strapi creates ultra-fast modern websites and mobile applications. Increased performance is achieved using Headless CMS in conjunction with a static site generator and serving via CDN.
Relevant pieces of content are loaded the moment the user makes a request. Content is redownloaded only after it has been updated. Thanks to this, the site is available worldwide without waiting on the server-side.
Strapi supports any static site generator and various frameworks for creating user interfaces. The most popular ones are Gatsby, React, Vue.js, Nuxt.js, Next.js, and Angular.
Disadvantages
If you have a website built with some CMS like WordPress, migrating it into Strapi will take some time if you are looking for a perfect 100% match. Strapi doesn’t have native support for WP-CRM, so you will need to implement it manually. Also, Strapi doesn’t support TypeScript out of the box.
Pricing
Free forever, enterprise plans starting from $9/mo.
How to Install Headless WordPress on Localhost?
WordPress has a built-in REST API it includes endpoints for getting: lists, content, and editing post content. If you have a similar API, you can proceed with the further installation.
There’s no need to install WordPress from scratch, and you can use the ready-made Headless WP Starter package, which already has everything you need. The package includes a standard WordPress package and a front-end add-on to render content with React.js. To install everything, you will need Docker. Here you can check the manual on Docker Desktop installation.
When Docker is live and running on your computer, you need to create a directory for your website; use the following command for that:
mkdir wp-headless && cd $_
Next, you need to clone the headless from the repository to the directory you’ve created in your previous step.
git clone https://github.com/postlight/headless-wp-starter .
When the cloning is complete, you should use this command to run your site:
docker-compose up -d
This command will download some Docker images from the registry and launch all the necessary containers. Please be patient; this may take some time.
When everything is ready, you can launch the website via address - localhost: 3000
This video manual will teach you how to install headless WordPress on a hosting account.
Over to you
Headless CMS is a narrow-profile solution designed for non-standard projects and development teams. It will not be possible to configure or install them without technical specialists.
The modern market offers a sufficient number of implementations, but they are poorly correlated with a typical performance in small business and hobby projects. It's more of an enterprise.
Many clients prefer the reverse way when the existing classic CMS API is implemented to expand the number of content delivery channels. It is cheaper than starting all over again: from developing interfaces to integrating them with CMS, albeit with headless.
However, in certain situations, the introduction of Headless CMS is more than justified.