What is a CMS?

Have you ever built a website for your business or had someone build a website for you? If so, then you’re most likely familiar with the concept of a CMS (Content Management System). The CMS is essentially the backend side of your website, where you can log in, add content to your website and make changes that are viewable on the public side. Examples of popular CMS’s include WordPress, Drupal and Joomla. However, Headless CMS presents a new way of interacting with these traditional CMS’s with incredible performance advantages.

Traditional CMS vs Headless CMS?

Let’s go into slightly more detail with traditional CMS’s, to learn more about the new methods available.

Traditionally, you install a CMS on one server. A database runs on the server and stores the page content associated with the site (titles, copy, links to images). You update the content for the website using the CMS.

The website requires code to interact with the database, known as backend development. In comparison, the code that optimises how the content is displayed is called frontend development

Whilst the same principles still apply, how these two interact with each other is very different.

The primary difference between Headless CMS and traditional CMS is the Frontend (head), runs as detached from the CMS (body). An API (Application Programming Interface) intercedes with the data from the original CMS. Comparatively, the Headless CMS runs as detached from the body, which makes it a highly flexible option for projects.

Diagram explaining differences between traditional CMS and Headless CMS

Headless CMS means that through using the API, you can acquire data from the CMS for practically anything. For example, the CMS data could integrate into a mobile app, a widget, or revolutionarily, a completely different Frontend application.

Traditional CMSHeadless CMS
Backend CMS and Frontend share the same server.Backend CMS can be hosted on a different server to the server for the Frontend.
Programming language converts content from the database.API intercedes with the content from the CMS for the app.
Traditional CMS vs Headless CMS comparison table

Advantages for Headless CMS

Along with flexibility, a few additional advantages for Headless CMS include:

  • Developer experience – Headless presents exciting opportunities for developers to build applications solely dedicated to the Frontend of websites. Headless frameworks including GatsbyNext.js and Frontity all support modern JavaScript libraries such as React.
  • Fast – Frontend sites built as dedicated apps are usually higher performing.
  • Secure – Detaching the public viewable Frontend from the CMS negates a lot of security issues. 

Some of the Challenges for Using a Headless Approach

Whilst there are significant performance gains, a Headless approach will require a completely different audit. In particular, the SEO presents a challenge, as having sites with identical content can be confusing (both for people and for search engines). Therefore, learning how to implement canonical links and use robots.txt is essential for projects where SEO is a significant factor.

Is Headless the Right Choice for your Next Project?

The answer depends on the specific requirements. Headless CMS takes advantage of new technologies, with stunning results for performance. Higher performing websites can lead to improved user experience, and site speed is also great for SEO (this is why e-commerce is a poignant area of interest). 

However, using a detached CMS also presents a great challenge, mostly from the distinct differences in the technical audits required. SEO considerations are completely different for this kind of project.

Are you considering a Headless CMS for your next project? Let me know if you have any questions about the subject, feel free to get in touch.