Back to Blog

WTF is Headless CMS?

·
clock-iconAugust 09, 2020
insights-main-image

What is a Monolithic or Legacy Content Management System?

Monolithic content management systems are an all-in-one solution that lets you store, manage, and present content. They have a single codebase that handles all content management aspects of your website. They are also called legacy content management systems because most of them have been on the market for almost ten years.

The most popular category is the open-source CMS systems, such as WordPress, Joomla, Concrete5, or Drupal. Open-source software is available for the general public to use and modify from its original design free of charge or licensing fee.

image

WordPress is the most-used open source CMS worldwide. Several open-source extensions are now available for the necessary installation, making it possible to upgrade the software to a fully functional content management system. The drawbacks are that additional functionalities require numerous extensions and that those plugins often have serious security flaws.

With higher traffic, a WordPress site will have limited stability, security, and performance capabilities. Your server will not autoscale unless you spend quite a bit of time and money on optimizing - the downside of being open source.

In the last five years, the traditional CMS landscape has not evolved much - both CMS technologies and market maturity remain unchanged. There is hardly any innovation from traditional CMS vendors.

Traditional CMS solutions, based on various use cases, lack integration with modern software stack, cloud services, and software delivery pipelines. At the core, a traditional CMS is a monolith. Any organization pursuing a microservices strategy will find it hard to fit a conventional CMS in its ecosystem.

What is a Headless CMS?

A headless CMS has no presentation layer and makes content available through APIs. With a headless CMS, the task of the content presentation is performed by an external client consuming APIs exposed by headless CMS.

image

Here are few examples of an external client utilizing the APIs exposed by a headless CMS: static site generator (SSG), single page application (SPA) (client-side as well as server-side rendering), a mobile app, a WordPress site, or an IoT device.

These are usually called “Headless CMS” or “API-first” systems. Some of them market themselves as “Content Infrastructure,” “Content Hubs,” or even “Content as a Service.” However, when you take a closer look, they all pretty much boil down to some database backend with a web-based user interface, where you access the content through an API.

What is an API?

API stands for Application Programming Interface, which means that you get content in a way that is easier to integrate with existing or new software solutions. As such, it is at the core of the headless CMS technology.

Usually, content delivery is done by sending a network request to an endpoint. This network request is pretty much the same thing you do when visiting a webpage, e.g., https://yourdomain.com/api/posts/, but instead of a web page, you get a list with the post’s contents back. Developers can use this information when building software, be it an app, a voice interface, or a webpage.

Most of today’s developers are used to programming with APIs and prefer them because it leaves them in control of building their systems. Some CMSs also allow changing content through APIs. Most Headless CMS systems will expose their content through a REST API. REST APIs can be great for simple data structures but tend to get tedious and time-consuming to use when your content models are more complex.

It’s also a more laborious exercise to change or fit these APIs for different uses. Facebook developed the API standard GraphQL as a response to the less flexible REST convention. GraphQL lets you query the API with the fields and relationships you need for each occasion, almost like you can do directly with a database. It’s also easier to implement new areas and content types as your system matures.

Headless CMS will render its content through APIs and Application Delivery Networks.

A CDN has become a lot easier and cheaper. Nowadays, there are many options compared to a couple of years ago - Amazon CloudFront, Cloudflare, and the list goes on. With most of CDN services, you can start small and pay as you go. Having a CDN in front of origin (static site or APIs) reduces global and regional latency by caching content (static site HTML page, assets, APIs) at a large number of geographically distributed edge locations. Also, CDNs scale well - we are talking about 5-10k concurrent requests without any issues.

To protect the origin server from request overload in a headless CMS setup, some CDNs also support origin shield - an additional caching layer between edge and origin servers. Typically, this mid-tier caching is a designated edge or a pop location closer to your origin server and other edge servers rather than the origin directly.

Hosting companies like Netlify refer to their CDN infrastructure as Application Delivery Network (ADN), which has no distinction between edge and origin servers. Support of the atomic deploy model and instant cache invalidation reduces the risk of an inconsistent state in a headless CMS. With ADN, switching between multiple versions of a static site is as easy.

Most popular open-source platforms

Directus

Directus is an open-source CMS and is excellent for projects that require customized databases. Written with backbone.js, the public API uses REST. Like other traditional CMS tools, it has PHP at its core, which many developers are comfortable with.

image

Directus is an open-source CMS and is excellent for projects that require customized databases. Written with backbone.js, the public API uses REST. Like other traditional CMS tools, it has PHP at its core, which many developers are comfortable with.

Features

  • Extremely simple to manage your content with an interface that requires no training.
  • It stays up-to-date by pulling the needed data from the database. It is as comfortable as entering credentials. It is fully open-source, decomposed, and extensible.

Pros

  • Directus adds the feature of uploading and managing files; databases do not typically handle data.
  • Writing comments or a note at certain times is useful. Directus comment features prove to be very functional.
  • All activity within Directus has logs, and rollbacks are possible. Hence, you never lose data.

Cons

  • Pre-uploading long videos fail.

Strapi

Strapi is an open-source CMS node platform built on Node.js and works with the database and self-hosting solutions of your choice.

It provides a robust API while offering an intuitive admin panel. While Strapi has great capabilities, users have encountered occasional problems with the drag-and-drop interface and array data types. Being open-source also brings about some negative issues such as delays in the development of the required tools.

Strapi is ideal for small companies that need a flexible API for their front-end.

Top Strapi features:

  • Built-in support RESTful and GraphQL APIs.
  • Open-source, 100% JavaScript for front-end and CMS.
  • Intuitive admin console for content editors.
  • Highly extensible with an integrated plugin system.
  • Simple for developers to use.

Saas Headless CMS Platforms

Contentful

Contentful is a decoupled CMS platform and is among the top content management systems out there. This headless CMS comes with a wide range of features and prices for developers and enterprise systems. It is hosted on a cloud-based infrastructure with AWS, which makes this headless CMS more reliable. The content management platform also includes a simple markdown language to make writing content that’s well-formatted quick and easy.

Top Contentful features:

  • Rich editor interface and intuitive headless CMS content modeling.
  • Advanced caching techniques and integration with CDNs.
  • Cloud platform monitored by engineers and support teams full-time.
  • Flexible APIs and SDKs that developers can work with. Centralized content hub and a decoupled CMS platform for maximum scalability.

Core dna

Core dna is not like other headless content management systems. It is not only a headless CMS but also a digital experience platform (DXP) that supports eCommerce, intranets, extranets, customer portals, and digital workplace solutions. Back-end and front-end support are provided.

Core dna targets mid-size and enterprise-level markets with high-traffic and complex requirements, boasting clients like Tivoli Audio, Stanley-PMI, and SEEK.

Top Core dna features:

  • All-in-one DXP and headless CMS for websites, eCommerce, intranets, and more.
  • Personalization features that make dynamic websites quick to launch.
  • Webhooks make integration with other systems straightforward.
  • Pre-built headless CMS solutions for a variety of industries with lots of available use cases for review.
  • Over 1500 new features added every year.

Sanity

Sanity launched in 2015. It is an open-source headless content management system developed in Oslo, Norway. Built on JavaScript and React.js, Sanity is definitely a great headless CMS for React, featuring a WYSIWYG rich text editor, which allows you to embed editable data in running text and defer markup to render time. This CMS (React and JavaScript serving as its foundation) also comes with a Sweet Query API and GraphQL API that enables you to cache multiple queries on a single request.

Sanity also provides real-time collaboration, live previewing, and a content repository with content versioning - definitely a wonderful and well-rounded headless content management system.

Most of the Jamstack projects WebriQ has commissioned are using Sanity as a headless CMS platform and its open-source approach really makes it shine among other content management systems out there.

Seeing and using is believing

image

We have worked very hard in the last months to give anyone involved in updating and managing content on a website the chance to experience a Headless Content Management System (CMS) for the JAMstack.

Go to WebriQ Sandbox invite. You will receive an email with all the login details for your WebriQ Sandbox account. The Sandbox account is a replica of what a live website will look like, and it is a replica of how you will be able to manage, update, and publish content on your website. All this without the stress of breaking the code or breaking the bank. Just write your content away.

WebriQ CMS - Headless Implementations

MH COMPANIES is a Colorado-based company. For nearly five decades, the MH Companies built their reputation on conducting business with integrity and respect. Their website and content repository are published on a GatsbyJS Javascript framework and Sanity Headless CMS.

The website delivers a highly personalized experience and content for the viewers. The site is updated almost daily and receives design updates on a very regular basis. A complete GIT workflow for content and design updates makes sure the website has a 99.99% availability, served through Netlify’s High-Performance Edge Network.

SWAMPFOXOPTICS is a Colorado-based company that is selling Tactical Optics. More a headless eCommerce implementation than a pure headless CMS implementation, it inevitably breaks the monolithic mold of eCommerce. Headless commerce decouples the presentation layer — in most cases, the template or theme — from the eCommerce platform.

In this headless setup, the eCommerce platform can still connect to all the backend needs, from inventory management to ERPs, OMS tools, and PIMs via APIs. In this model, the platform serves up PCI compliance, security, fraud management, and inventory management while connecting to the critical infrastructure points and content management system mentioned above.

DOWNLOAD our HEADLESS eCOMMERCE EBOOK.

The Anzac Day Commemoration Committee is a non-profit organization in Australia. On every 25th day of April for the past 100 years, “ANZAC Day” has been observed in Australia and New Zealand, becoming a respected and sacred institution along the way.

The site includes a host of information about the origins of ANZAC Day. The website, content management system, and shopping cart are built on Strapi headless CMS and GatsbyJS as Javascript framework. It delivers a website that behaves like a web application. No complicated deploys with databases and servers are built, just a bunch of files that can be deployed easily on dozens of services. The site loads super fast, scales to the Internet, and is unhackable.