Understanding the differences and advantages of Headless over traditional CMS

Whilst Headless CMS has been around for a while, they have only recently started to gain traction now that all of the accompanying technologies and connectors are stable and ready for production use. To understand what a Headless CMS is, let’s take a look at the Traditional CMS environment.

Traditional CMS

WordPress, Drupal and Joomla are all examples of Traditional CMS (sometimes referred to as a monolithic CMS) that currently power a significant proportion of websites globally. These applications provide an administrator interface for the complete management of a website’s content, themes, and 3rd party extensions.

A Traditional CMS holds all relevant website files and content necessary to power the website, sometimes requiring additional bandwidth and storage to support the website load. The end-user experience is the result of all of the above, which if not tuned well, can lead to a negative experience all together, resulting in lost opportunities.

Some challenges that a Traditional CMS environment can present:

• New devices such as wearables and native phone apps have changed how content may be consumed. As many Traditional CMS only output as HTML, this limits the scope of where this content can be displayed
• Developers must learn the templating language of the particular CMS. In some instances, this can mean having to learn templating for 3-4 different CMS
• Traditional CMS are typically database driven and use caching to assist with improved performance. This requires specialist knowledge and a highly tuned environment to run optimally, particularly for high traffic sites
• Being database-driven, these CMS are more susceptible for hacking attempts such as SQL injection, XSS and Denial of Service attacks
  
  
  

Headless CMS

What is Headless?

Headless is the separation of content and presentation layers resulting in content as data that can be consumed by web apps, multiple websites, wearables, kiosks, and devices. The separation of these two layers provides a number of benefits, some of which are outlined below.

Headless CMS Benefits

Flexibility

Developers have the flexibility to choose how they wish to output the content made available within a Headless CMS. This may be in the form of static site generators or using client-side technologies such as React, Vue.js or Angular.

Security

As Traditional CMS create pages dynamically it presents opportunities for many varied attacks such as SQL injection, Denial of Service and Cross-Site Scripting. With a clear separation of the data layer and the presentation layer, there is significantly reduced exposure for a Headless CMS attack, as the CMS can be locked down from public access.

Speed and Performance

By combining a Headless CMS with a Static site generator such as GatsbyJS, Nuxt.js or Next.js you can see incredible improvements in site load times. This is great for usability and Search engines look favourably on faster loading sites.

Increased Stability

Sites developed with a static site generator and Headless CMS are not only more secure and faster then a dynamically generated website, as the site is output as static files it also means you can increase your traffic significantly without your server falling over.

Content managed in the one place

Manage your content all in the one place and have it available to all of your websites and applications from a single system.

When multiple locations exist for content, organisations can end up repeatedly developing new content, not realising that it already exists in another platform or on an intranet. Having one single source of content ensures that the wheels are never reinvented, but instead enhanced

Consistency in brand messaging and communications

Adopting an omnichannel approach when using headless to ensure the same content or messaging is used across multiple channels

Encourage user and customer loyalty

Tailored delivery of content – specific to the device in use (eg: wearable, mobile, desktop, native app, IoT, Voice)

Technology freedom

You are not locked in to specific CMS applications and skillsets when deploying to sites or devices

What can Headless CMS be used for?

Websites, Kiosks, Menu boards and Web apps

Whether there is one static website, multiple websites and devices, a Headless CMS can assist in single source of content, exceptionally improved site speed, increased security and scalability for your single or multi-site project.

Native apps & future proofing

As the Headless CMS outputs content as a data feed, it can be consumed by Native apps as well as new and emerging technologies such as Wearables.

Headless CMS vs Decoupled CMS

Somewhere in between Traditional CMS and Headless is Decoupled CMS. There is one clear distinction between the two;

• Headless CMS provides no method to render your content via frontend and uses a secondary component to manage this (eg: Gatsby). The Headless CMS can be thought of as a content-only data source, which provides an API for developers to access this data and output to whatever website, application or product they choose.

• Decoupled CMS is a Traditional CMS used as the platform to output its content using an API. WordPress and Drupal are two examples of popular Traditional CMS’ that can output its content using an API. The benefit of a decoupled CMS is organisations that have WordPress or Drupal as part of its Standard Operating Environment can continue with these stacks, as well as utilising the benefits of a decoupled environment.

This site is currently running a decoupled WordPress environment for our content management whilst utilising Gatsby.js for the frontend render of the website.

Should you use a Headless or Decoupled CMS?

There are a number of factors to consider and questions an organisation may need to ask, some of which we have outlined below.

• Will it power a single website or multiple sites?
• Is there a requirement content authoring workflows?
• Do you currently use a WordPress or Drupal CMS that have an API for a decoupled environment?
• Is there a need for consistency across content messaging?
• Is there a need to push content to multiple systems and devices?
• Does the organisation need to future-proof content workflow from system dependencies?

Summary

A Headless CMS provides a means to easily manage all of your content in the one place, whilst providing APIs to developers to build fast, secure & stable web sites, applications or products. Headless CMS differ from Traditional & Decoupled CMS in that it has no presenting layer, only the API to be used by external applications.

If you would like more information or would to discuss your requirements further we would love to hear from you. Please use our contact form or give us a call on 03 9429 1318