Headless CMS: The benefits of Being "Headless"
Tags: webdev, jamstack, cms, headless
Published: 2021-01-21 09:44:56

Content management systems (CMS) have been around for a long time as a way to create and update content on a website without the need to touch the software behind it. Until recently there was a standard, traditional approach, which could also be described as monolithic. Most popular CMSes of this type like Wordpress, Joomla etc. provided an all-in-one package, where you could manage both data and UI in one place. You chose a theme or created your own, filled in some content and you were ready to go. Unfortunately, this tight coupling between your content and the view of the application made it almost impossible to introduce something new into the system. It was also specifically designed for website creation and if you wanted to have a presence on multiple platforms... "Houston, we have a problem". Technological advancement rarely stops and since those traditional systems are monolithic by design, there’s no way to upgrade your stack. You are stuck in the past, with no real way of getting out, unless…

## Why headless? 

…You go headless. The term headless means that the “head” (the frontend of your application) becomes decoupled from the body (the backend). Unlike traditional content management systems, a headless CMS is only concerned with storing data. It exposes this data to the outside world, usually via an API, which introduces many great benefits.

## Benefits of Headless CMS 

### Device versatility 

By not concerning itself with the presentational layer, most headless CMSes, with few exceptions, allow you to serve content to every channel imaginable:

- Websites 
- Mobile apps 
- Smart devices 
- Internet of things products 
- Any future platform 

All of this without the overhead of developing multiple APIs for each of them, thus greatly minimizing costs.

### Technological flexibility 

With a headless CMS, you are not limited in the choice of your tech stack. You can use static site generators (Gatsby, Next, etc.) which are the best option if you want to go the JAMstack route, JavaScript frameworks (React, Vue, etc.) for single-page applications or frameworks for mobile app development (React Native, Flutter, etc.). Because content is stored somewhere else and isn’t glued to what is used on the frontend, there is always a possibility to quickly migrate if needed.

### Great content management experience 

Managing big amounts of complex data can be quite challenging. Most headless options provide well designed and easy to use dashboards. Content managers will have no problem utilizing them to the fullest. Moreover, since a headless CMS is not concerned with content rendering it also means a much faster editing experience.

### Improved security 

Traditional CMSes are well known for having numerous security issues. Wordpress, for example, has more than [21,000 known vulnerabilities](https://wpscan.com/) if we take into account all the plugins and themes. The problem is that oftentimes plugins and themes are written with no concern for security and since there is constant interaction with the backend part of the stack, attackers have the possibility to exploit it at any time. With a headless CMS, this is much less of a problem because users are only accessing pre-generated content and the data for this content is accessed only at build time, which means the surface area of attack is greatly reduced.

## Headless CMS types 

There’s a great variety of headless options out there. And despite being united by the term “headless” they can still have many differences.

### Hosting 

- **Hosted.** With platforms like [Contentful](https://www.contentful.com/), [DatoCMS](https://www.datocms.com/), [GraphCMS](https://graphcms.com/) all you need to do is create an account and login to the dashboard on the CMS provider website. The infrastructure and scaling will be handled by the provider itself which is great, but also comes at an additional cost.
- **Self-hosted.** You will be in charge of hosting the application on your own server or in the cloud provider of your choice (Heroku, AWS, etc.). Self-hosted headless CMS, for example, [Strapi](https://strapi.io/), are usually more flexible and allow you to add custom functionality or tailor every detail to your exact needs.

### API type 

- **REST.** A traditional way of exposing data to the outside world. Data is available on multiple endpoints (URLs). It’s simple and easy to use for smaller projects. But as projects get bigger certain challenges can arise. Developers oftentimes have to query multiple endpoints to get the necessary data. Or the endpoint returns some excess data, which creates a problem called over-fetching. Take a look at [Ghost’s RESTful API](https://ghost.org/docs/content-api/).
- **GraphQL.** A powerful tool developed by Facebook which provides a more efficient way of getting the data you need. Created to solve the problems of the REST approach, it gives developers complete flexibility in how they fetch data and is more efficient, especially at bigger scales. [GraphCMS](https://graphcms.com/), as the name suggests, would be one of the go-to's in this category.
- **Both included.** Some options, like [Strapi](https://strapi.io/) and [Contentful](https://www.contentful.com/), give you the possibility to use both API types.

### Source availability model. 

- **Open-source.** The project code is in a public repository on one of the main software hosting services, usually Github (see repositories for [Strapi](https://strapi.io/), [Ghost](https://github.com/TryGhost/Ghost)). You have complete ownership and control with no reliance on third parties. For popular products, it also usually means a big community of developers, which means there should be many plugins and any issues or questions arising in a process of development should be resolved quickly.
- **Closed-source.** The project code is private. This doesn’t mean you won’t get any support or lack features. A lot of closed-source options have great support teams which are there to help you, provide awesome features out of the box and have a plugin marketplace in case you need more.

### Data storage 

- **Git-based.** Content is stored in files which are managed using a git-workflow. Storing content this way deprives you of one of the main benefits mentioned earlier – device versatility. But showing content on multiple frontends is not always something you care about, in which case a git-based CMS like [Forestry](https://forestry.io/) or [Netlify CMS](https://www.netlifycms.org/) might still be a great option.
- **API-based.** Content is stored in a database. Allows much greater flexibility in how you can structure your content and where you can serve it.

## Summary 

Headless content management systems have been on the rising trend for quite some time. With multiple key players in the space getting eight-figure investments, it is now more clear than ever that headless along with [JAMstack](https://www.unikorns.work/magazine/jamstack:-blast-off-your-website) is the future of the new web. Decreased costs, speed of development, increased flexibility makes it a perfect choice for modern businesses. 

If you have any questions and concerns, we are always happy to answer, help, consult, and just talk about JAMstack and headless approach as such. Feel free to write us at hello@unikorns.work or check out our [magazine](https://www.unikorns.work/magazine) about development, web design, and SEO.