Skip to Main Content
Front end developer coding at desk
Front end developer coding at desk

Headless CMS vs Traditional CMS vs Hybrid

Knowing the right CMS setup for your project can be complex. There are so many different options including monolithic, headless and hybrid, it can be hard to work out which is best for you. And that's where this guide can help!

Last Updated:
thumbnail.png

Today, content management systems are more flexible than ever before. Not only are there countless CMS options to choose from, you also no longer have to make a binary choice between a headless and a traditional CMS. 

That's because with developments like static site generation, content delivery networks and middleware, you can create a setup that works as a hybrid headless CMS, taking various elements of each approach for a blended solution that can give you the best of both worlds.

So, what's the difference between all these different CMS systems? How do they interact? And what's the best choice for your project? Read on to find out!

  • Terminology, what does it all mean?
  • How does a headless CMS work? (Infographic)
  • Static versus dynamic websites
  • Advantages of a static website
  • Advantages of a dynamic website
  • Advantages of a hybrid headless CMS
  • Headless CMS platforms
  • How to choose the right CMS setup

 

Headless, monolith, static - what does it all mean?

One of the big areas of confusion around headless and traditional CMS is the terminology. And often, things that aren't quite the same are used interchangeably, making it even more confusing.

So here's a round up of some of the more common terms you'll come across when looking at headless CMS.

What is a headless website?

A headless website, or headless CMS is one where the back end system that you use to make updates, and the front end system people use to browse the website are disconnected.

With a headless website, updates aren't automatic and immediate, they need to be pushed through to the front end by middleware or an API.

What is a traditional, or monolithic CMS?

A monolithic cms is what most people are more familiar with. The CMS and the front end are interconnected, meaning updates made in the CMS are shown on the front end of the website almost immediately.

What is a static website?

A static website is the decoupled front end of a headless system, but the term "static" is often used to describe both the disconnected front end and the CMS. 

With a static website, after making updates in your CMS, you'll need to regenerate the static site (the front end) so changes are visible.

What is a dynamic website?

A dynamic website is the opposite of a static one. It's where the front end of the website dynamically updates when changes are made in the CMS. Again this term may be used to describe the CMS as well as the front end.

What is a decoupled CMS?

The term decoupled CMS is often used interchangeably with the term "headless cms", and they can often refer to the same thing. However, the strict definition of a decoupled CMS is one where someone has used a traditionally monolithic CMS like Wordpress or Drupal, and has made it headless - rather than a CMS that is headless by default.

What is a hybrid headless CMS?

A hybrid headless CMS is another term for a decoupled CMS, one which could be used as a monolithic or traditional CMS, but has been made headless.
 

How does a headless CMS work? 

So, now you know the terminology - how does a headless CMS actually work?

Essentially it works by breaking the website into two sections, the back end CMS, and the front end or static site.

The back end of the system is hosted on its own web server, where the CMS code and the database are stored. Admin users access the CMS from here.

When updates are made in the CMS, those changes are pushed through to the front end of the website via an API or middleware.

The front end of the system has its own hosting, where the static html files are stored, and usually uses a Content Delivery Network (CDN) to deliver content to users even more quickly.

With only the static html files to load, and the CDN providing content more quickly, it makes the user experience much, much faster.

Graphic showing how a headless CMS works

 

Static versus dynamic websites

Now that you're more familiar with the terminology, we're going to use the terms "static" and "dynamic" to talk about all these different types of CMS and websites.

We'll use "static" to describe all the headless, decoupled and hybrid websites, and "dynamic" to describe all the coupled, traditional or monolithic websites.

But remember, there are variations of these setups that you may want to consider for your own project - more on that later!

Advantages of a static website

Inforgraphic showing the advantages of a static website

One of the key advantages of having a static website is the ability to use it to publish content across different media and channels. 

This is often put forward as the main benefits of a static website - although it may just be that it's one of the most significant advantages to marketers, who tend to be the people writing the articles!

However, while omnichannel publishing can be a big bonus, it's not the only reason to opt for a headless CMS - and it's also important to note that not all static websites support it.

But there are other highly significant benefits to going for this structure, most significantly in page speed, and security.

Static websites are very fast loading, because you've separated the front end code from the CMS and all the back end code. 

Seeing as it's usually the back end system that suffers from code bloat, this can hugely speed up the loading time, making it a much better experience for users.

Separating the front and back ends can also really help with the security and uptime of your website. 

Let's say there's a catastrophic issue with your CMS. With a dynamic website, that's going to bring down the front end too. But with a static website, the front end is isolated from those issues, and while you may not be able to make updates, at least your users are still able to use the front end.

So even if you're not using your headless CMS to do omnichannel marketing, having one could mean a faster, more secure website and a much better user experience too.

Advantages of a dynamic website

Inforgraphic showing the advantages of a dynamic website

Headless CMS may be all the rage, but there are still plenty of reasons a dynamic website would still be the better option for you.

One reason you may choose a dynamic website is for its simplicity. Setting up a dynamic website is typically simpler in terms of development than a static website. 

If you don't have a system in place, a dedicated developer or an agency to manage this process for you, then you may be more inclined to stick to a dynamic option.

Another factor that may affect your choice is hosting costs. Static websites typically need separate hosting for the CMS and the front end, usually with a Content Delivery Network for even faster loading times. This can mean that your hosting costs are higher than if you choose a dynamic website.

But one of the biggest advantages of choosing a dynamic website is the speed of updates. If your website needs to be updated a lot, and quickly, then a dynamic website will be able to do that much faster than a static one.

 

Advantages of a hybrid headless CMS

Inforgraphic showing the advantages of a hybrid headless CMS

As we've discussed, headless and traditional are not the only CMS options available. You can opt for a hybrid headless CMS, using some of the advantages of headless, while still using a familiar system.

This can mean that admin users can still make use of the system and features they know, but without front end users being slowed down by a front end that's having to load the entire CMS.

The negative side to this approach, is that you may still have speed trouble with the back end of the system - as this will still be running the full monolithic CMS.
 

Headless CMS platforms

There are dozens of different headless CMS options available, here are some of the most popular platforms, as well as a couple of our own favourites.

Contentful

Contentful is probably the best known headless CMS, and is particularly popular with content marketers and agencies.

Link

Strapi

The Strapi headless CMS is popular for its straightforward interface and admin panel customisation, making it an easy onboarding experience for clients.makes 

Link

Payload

This open source CMS is rapidly growing in popularity, providing a modern admin UI and smart content management across platforms. It's also built for Next.js, working seamlessly within apps as well as websites.

Link

Statamic

Statamic is built on a Laravel framework, and provides a customisable headless CMS that's ideal for bespoke websites and apps.

Link
 

Wordpress as headless CMS

You can use Wordpress as a headless CMS by decoupling it from the front end of your website.

This can be beneficial if you're familiar with and prefer the Wordpress CMS architecture and functionality, but want the speed and security benefits of using a headless CMS.

Each different headless or decoupled CMS has its own pros and cons, and we highly recommend doing some research (and a few demos too) before making your choice.
 

How to choose the right CMS setup

Working out the right CMS setup for your project may not be as simple as choosing just a headless or a traditional CMS. 

When deciding on the right options for your project it's worth thinking about your priorities

Inforgraphic showing how to choose the right CMS based on your priorities

Your project priorities should always be the driving force behind your CMS choices. A good web development agency should always try to find the right CMS for your unique needs, rather than only working with a single platform.

If you want to talk to someone about the right CMS for your project, have a chat with our team to see how we can help.

ADAM.jpg

Adam Kennedy

Front End Developer