For a while now, using traditional CMS has been the best way to go for most companies and individuals. But the flexibility of these has been limiting and they have been difficult to scale. This has led companies to embrace the idea of headless CMS and the flexibility and scalability that comes with it.
But before we can fully understand what a headless CMS is and why it has become so popular in recent times, we first have to look at the traditional CMS and how it works. Since the early days of web development, platforms like Wordpress and Sitecore were created and designed to store and present content elements like text, images and video on websites.
CMS organizes content in webpage-oriented frameworks (putting together all the elements like text, images, video and code in one big bucket), which makes it impossible for the same content to adapt to other digital platforms because it was so clumped up.
A regular CMS gives us 3 things;
- A way to store Data
- A CRUD User interface
- A way to display data
With the evolution of digital platforms and the need to reach more consumers at their different buyer journeys. Enterprises are now developing websites that are mobile responsive, apps, digital displays and other conversational interfaces. Unfortunately, the traditional CMS has not been able to keep up with these new innovations and is falling behind. This is where the headless CMS comes in to save the day.
- What is a headless CMS?
- How a Headless CMS Works
- Headless CMS vs Traditional CMS
- Advantages of a headless CMS
- Disadvantages of a headless CMS
- Can you use a regular CMS like a headless CMS?
- Headless CMS Use Cases
- Spotify and their platform for artists
- Discovery and speed of content curation
- Spotify and static site generator with headless CMS
- Hopper and static site generator with headless CMS
- Chillys uses Headless CMS and Shopify Plus
- Staples uses Headless CMS and Shopify
- Wonderland and headless CMS to manage multiple platforms
- HashiCorp and headless CMS to manage multiple properties
What is a headless CMS?
A headless CMS is a back-end only content management system built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device. This was phrased as a result of the way the headless CMS was built to work. It separates the head (the front end or website) from the body (the back end or content repository) A headless CMS only shares 2 things with a regular CMS;
- A way to store data
- A CRUD User interface
Because the headless CMS separates the head from the body, the display of content can take any form. A website, mobile application or any other digital display. The content is stored in a centralized cloud-based repository and provided as a service to any application on any platform through an API.
How a Headless CMS Works
A headless CMS remains with an interface to add content and a RESTful API (JSON, XML), ready to deliver it wherever you need it. It does not care how and where the final content gets delivered, its only job is to store and deliver organized structured content. The functionality of a headless CMS can be scaled down to just three (admittedly undetailed) steps.
- The content is imputed into the headless CMS by editors and marketers. The content is then stored in the CMS in small blocks ready to be delivered to consumers.
- Each content block can then be delivered individually or collectively to different channels via different mediums and on different devices.
- Front-end developers are there to design the content in the best way it should be presented to whatever channel. They can do this using their individually preferred framework.
Headless CMS vs Traditional CMS
|Traditional CMS||Headless CMS|
|Platform independence||The back end is connected with Frontend.||The back end is run independently.|
|Security||ReqA traditional web server is easy to hack.||Backend issues don’t affect the frontend.|
|Performance||A traditional CMS is slower.||It is designed to be fast.|
|Costs||Costs less when you include hosting.||More cost-effective (no hosting costs).|
|Customization||Difficult to customize and has limitations on flexibility.||Easy to customize and very flexible.|
|Scalability||Hard to scale.||Easy to share through different platforms.|
Advantages of a headless CMS
The architecture for a traditional CMS can be very limiting. But a headless CMS gives you the freedom to build your own frontend framework in whatever design and medium you see fit for your business.
Every headless CMS comes with its own well-defined API, so developers can spend more time focusing on creating content rather than managing content.
Content creators can rest easy without having to worry about how different platforms will display content. This is because any update pushed cuts across all digital platforms. Which means content production is faster and content can be reused.
Businesses can cut back on the funds needed to hire specialists. While some experts will be required, the general need for specialists will be cut down compared to when using a traditional CMS.
The CMS tool is purely storing content and isn’t cluttered with things that are specifically relevant to business users or other stuff that’s a development only.
While control of the content is done from one convenient back end location. Content can be displayed on any device and across any platform.
Since the content publishing platform isn't connected to the CMS database, you don’t have to be worried about backend security issues affecting the front end.
The backend and frontend are kept separately so there will be no downtime during maintenance. You can optimize or upgrade your website without compromising performance.
Omnichannel can pose quite a bit of challenge for marketers because they need to create great content that cuts across all touchpoints. A headless CMS allows you to orchestrate a seamless experience that covers all user touchpoints while maintaining consistency and relevance.
Disadvantages of a headless CMS
Unlike traditional CMS architecture where there are a variety of templates to choose from which would make your work easier. Headless CMS requires you to build your design and structure yourself.
Since frontend rendering must be handled with separate software, developers have to be familiar with multiple codebases if they want to use headless CMS.
Since you can't always preview what content will look like on the page, a headless CMS will have some formatting issues. Extra steps will, therefore, have to be taken to predict how content will look on the front end.
You’ll need infrastructure to set up and manage the presentation component of your site, app, or other experience.
Headless CMS can be more expensive and more complicated to handle. You will need to pay separately for the CMS, the developer, and infrastructure to run your website, app and so on...
Because the content and delivery are separated, a headless CMS may not be able to gather enough data about consumers to return personalized content. Fortunately, there are business intelligence tools that can help you get past this issue by allowing you to collect full content analytics.
Can you use a regular CMS like a headless CMS?
The short answer is yes. You can use a regular CMS like a headless CMS. Take, for instance, WordPress.
WordPress is regular CMS in that it absolutely has the concept of views, but you’re not required to use those views. If you prefer to consume WordPress entirely through the API, that’s possible.
Headless CMS Use Cases
If you feel like traditional CMS is too rigid for the project you’re handling and puts too many constraints on you, then headless CMS might be the way to go. It is more popular among mobile developers because the API allows them the flexibility of delivering content to iOS or Android directly from the same backend.
Non-web content publishing - where you’re not powering a website at all. Mobile apps are a clear example. If you have content needs for your mobile app, a web CMS might be overkill and include a ton of functionality that has nothing to do with what you need.
Building a website using rich UI components
Many organizations operate dozens of legacy web applications or mobile apps that power various phases in the customer journey. One example can be found in financial services. Most banks have built custom web applications for personal banking which customers access via mobile apps or desktop browsers.
Rather than spend hundreds of thousands or millions of dollars to swap out these legacy systems with commercial CMS or eCommerce applications, organizations are choosing to implement a headless CMS which can display banners, articles and promotional offers to users within their personal banking experience – a crucial requirement for many financial institutions looking to create account stickiness with cross-selling and up-sell offers.
Spotify and their platform for artists
Spotify decided to use Next.js to and Contentful to build their platform for artist to help them promote their music.
Discovery and speed of content curation
With Headless CMS Discovery accelerated speed of content curation and publishing breaking news stories with a Headless CMS for Media & Publications
Services using Headless CMS
Spotify and static site generator with headless CMS
Music sharing platform builds their website for designers with Gatsby static site generator and Contentful as headless CMS.
Hopper and static site generator with headless CMS
Hopper uses headless CMS with Gatsby to build a fast and reliable webpage.
Enrich product information on eCommerce sites
Chillys uses Headless CMS and Shopify Plus
This eco-friendly insulated bottles company decided to go headless and integrate Shopify Plus with DatoCMS. Shopify handles the commerce cart while the headless CMS powers the content.
Staples uses Headless CMS and Shopify
The Staples Canada site is well known for being a really good example of an enterprise retailer using Shopify in a headless manner to allow for more complexity on the front-end.
Serving content to multiple channels/platforms
Where content is being pushed into multiple channels: web, mobile, print, etc. This is a classic content re-use scenario. While most multi-channel scenarios are pretty web-centric, your website might only be one place where your content gets published. Headless CMS, in this situation, has no idea where the content will end up and doesn’t care. It’s just standing by to serve content to whatever channel requests it.
Wonderland and headless CMS to manage multiple platforms
Wonderland published dozens of visually stunning websites with Headless CMS, giving clients an intuitive and affordable platform for all their needs.
HashiCorp and headless CMS to manage multiple properties
HashiCorp was not satisfied by the former solution and needed a new CMS to manage multiple different properties, sharing assets, design and code through a wide range of products.
When deciding whether to use a headless or traditional CMS, you have to ask yourself if you want a non-technical person maintaining the overall aesthetics of the website or if you’d prefer to build more advanced user experience with the help of specialized front end developers.
For bigger projects where you’re prioritizing unique user experience with different digital platforms and more complex features, a headless CMS is a right decision. But if you’re working on just a small company website or a personal blog with a few pages and the same all-round look and feel, it’s more effective to use a traditional CMS.