An Introduction To Headless CMS.
Tuesday, May 24, 2022
The way that websites are built is evolving at a rapid pace. Popular platforms such as WordPress, Shopify and Wix constantly strive to improve their offering and there are also new players entering the market at pace.
HC
Written by
On top of this, there’s also a type of CMS that is starting to become a lot more popular, particularly with larger businesses and ones with multi device experiences (websites, apps etc).
Those types of businesses are opting to move to a headless CMS.
What is a headless CMS?
A headless CMS is one that isn’t intrinsically linked to the front end of a website. Content is still created through a CMS, but the way in which that content is sent to the front end (the part of your website that a user sees and interacts with) is different to the way in which a traditional CMS would do this.
I’ve always found that the easiest way to explain a headless CMS is to show a side by side comparison with a traditional (or ‘monolithic’ CMS):
So, to break the above image down a bit more:
In a traditional CMS (eg the ones you’ll mostly be used to), the database, back end and front end are all linked together – they can’t be separated
In a headless CMS, the front end and back end are separated. Users will input data into the CMS as normal, but that data is then packaged up and can be sent to a front end of your choice.
For example, you might create a front end for a website, and then a different front end for an app, but you could send data to both from one CMS.
Basically, due to the separation between the front end and the back end, the front end is completely customisable (which tends to bring a smile to a developer’s face).
How does a headless CMS send data?
For this example, I’m just going to focus on headless CMS sending data to a website.
In the first instance, a user will create pages/content in the CMS
Once this content has been published, the CMS will package this up as JSON data within an API call
Finally, the API will send this JSON data to a front end Javascript framework which then translates the JSON data into HTML
The above then results in a website/webpage for users to then interact with.
That’s an overly simplified way of describing it, but hopefully it gives you a bit of an idea as to how a headless CMS works.
Popular front end frameworks for headless CMS.
In the above section, I touched on some of the Javascript frameworks that can be used in conjunction with a headless CMS.
Popular frameworks include:
React – originally pioneered by Meta (Facebook), this framework is one of the more commonly used. Anecdotally, there seems to be a lot more adoption of this framework than others and therefore slightly more expertise in the industry
Angular – first introduced by Google, this is an older framework that has gone through a couple of iterations
Vue.js – This framework has been touted as easier to learn than React, but it’s also more simple. It’s typically used for more simple websites/solutions
Next.js – this is a React based framework that provides additional tools and features, it’s a powerful solution but is less widely used
Nuxt.js – this one was inspired by Next.js but is actually based on Vue or Node
The above is by no means an exhaustive list, but you’ll probably come across the above frameworks pretty often.
Most popular headless CMS
We’ve covered how a headless CMS works and what kinds of javascript frameworks we could use to build our front end, so let’s dive into what CMS we might be able to use for our headless website.
I’ve split this into two sections:
Inherently headless CMS
Traditional CMS that can be used in a headless manner
Inherently headless CMS.
In this section, I’ll introduce you to a selection of some of the more common CMS that have been built to be used in a headless manner:
Netlify – this is a popular CMS for creating static sites. It’s highly customisable and completely open source, so it’s a great solution for those wanting to move a simple site to headless with the ability to build out their CMS over time
Contenful – an extremely popular CMS which is favoured by content led sites
Storyblok – An easy to navigate headless CMS which is again popular for content led websites
Traditional CMS that can be used in a headless manner.
Whilst a lot of people might opt for a CMS that is more specifically designed for headless use, it’s actually also possible to use some traditional CMS in a headless manner. This basically means that some CMS give you the ability to package up content into an API which can be sent to a front end framework.
These include:
WordPress
Shopify
Magento
…and more.
A hybrid approach to headless CMS.
It’s relatively common to see non headless websites use a hybrid approach to their CMS. For example, using Magento to control ecommerce functionality, but WordPress to manage a blog.
It’s also possible to do this with headless websites, both with inherently headless CMS and more traditional CMS. For example:
Magento & WordPress
Shopware (Ecommerce) & Storyblok (Content)
Advantages of moving to a headless CMS.
Hopefully from the above you feel a bit more comfortable with the concept of a headless CMS and how they work. What we’re going to do now is dive into some of the main advantages of moving to one.
Performance
One of the most frequently cited benefits of a headless CMS is the improvements that can be achieved in performance.
As I mentioned earlier, the front end and back end of a website aren’t linked when you go headless. This means that there’s less resource being used when pages are built and served to users, which makes a big difference to performance/speed.
Security
Headless websites are also typically more secure than traditional websites. This is again due to the separation of the front and back end. This separation means that it’s much more difficult to expose vulnerabilities in your stack.
Adaptability
Adaptability/flexibility is another big reason for someone to move to a headless CMS. As I touched on in the beginning of this post, it’s possible to use one CMS to send data to multiple different front ends/endpoints.
This means that you can control the content for a website, an app, a smartwatch app and more all from the same CMS. This makes it significantly easier to manage content across multiple platforms and ensure consistency.
Hosting
A benefit that I don’t hear cited as much is around hosting. Due to the nature of a headless website, it lends itself well to cloud based hosting.
Unlike traditional hosting (which uses a dedicated or shared server with set usage and pricing based on this), cloud hosting tends to use a ‘pay per usage’ model. This means that you only pay for what you use and you can scale this accordingly. As you can imagine, this can be a more favourable option in terms of price.
In addition to the above, cloud hosting typically means that your site will be balanced across multiple servers with the same content reflected on each one. This means that if one server goes down, the likelihood of downtime or data loss is reduced.
General considerations for going headless.
Now we’ve covered the advantages, I thought I’d highlight some things to be aware of if you are moving to a headless website.
Complexity
You might have picked up on this from the above, but headless websites are still relatively niche in terms of adoption. They’re also quite complex in terms of the way that they’re set up.
It’s important to understand that they may not be appropriate for all businesses. If your business is just a local site or if you’re a small SME that doesn’t have multiple interfaces such as apps as well as your main website, headless might not be the solution for you.
Cost of maintenance
This links into the above, but due to the niche nature of headless, you’ll find that there’s a smaller pool of developers that are able to work on them with confidence. This naturally drives the cost of maintaining such a site upwards.
SEO considerations
Due to the way that headless websites are built and the way that they package up content, there are a number of issues that can arise from an SEO perspective. If you don’t have an SEO that is comfortable with headless then I’d advise against making the jump until you do.
The wrap up.
I appreciate that the above is a bit of heavy reading, so I thought I’d summarise the key points in a TL;DR section:
Headless websites are becoming more and more popular
A ‘headless’ website essentially means that the front end and back end of the website have been separated
Separating the front end and back end allows us to send data to multiple endpoints and means improvement for speed and security amongst other elements
The main considerations around moving to a headless CMS relate to complexity and ensuring the correct implementation – these are easy hurdles to overcome with the right team and budget
