Style & substance:
search success in fashion.

10:1
ROI from Search Marketing.

An Introduction To Headless CMS.

May 24, 2022 / Reading Time: 6 minutes /
Alex Wright
Performance Marketing Director

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. 

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.

Headless CMS coding

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):

Diagram showing the difference with monolithic and headlessCMS

So, to break the above image down a bit more: 

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.

Diagram showing how CMS send data

  1. In the first instance, a user will create pages/content in the CMS
  2. Once this content has been published, the CMS will package this up as JSON data within an API call 
  3. 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: 

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.

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: 

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: 

…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: 

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: 

If you do have any questions whatsoever on headless websites then please feel free to get in touch through our contact form and we’ll get back to you shortly!

Speak to Alex about Headless CMS today.

Share this

social_facebook Share via Facebook logo-twitter-glyph-32 Share via Twitter Share via Email

Ways we can talk...