What is Headless CMS? Traditional CMS vs Headless CMS

👤 Diwas Poudel 🕒 16 May 2022 📁 TECH

In this article, we deep dive into headless cms. Before understanding headless cms let's looks at few terminologies

What is CMS?
FAQs Questions related to Headless CMS

What is CMS?

CMS is a software application that allows multiple users to create, manage, and modify web content without having to understand how it works in real-time. CMS data is permanently stored in the database, and only the data that is required is displayed on the web browser/app.

CMS is an essential component of website development.

What is the traditional CMS?

Traditional CMS is an old-style coupled cms architecture. Here, the editor, and the writer create and edits their content and these are stored on the database at the backend, and this content is displayed on your websites.

Traditional CMS is following monolithic architecture as here Frontend(layout and design) and Backend(database and code, plugins) are as tightly connected as they are bundled together.

traditional cms
Various blogging platforms like WordPress, Drupal, Joomla, Squarespace, and Wix are using these approaches.

Pros of traditional CMS

1 Easy management of all content.

2 Large communities support

3 Easy for developers to work with and in many cases no dependency on the developer for creating it.

4 Large no. of Templates are available and easier and cheaper to set up and use it.

Also read: Whatsapp Technology Stack

Cons of traditional CMS

1 Do not scale well.

2 Focused only on creating content for the website as content cannot be used on other devices like a mobile app.

3 Front and back are tightly coupled so required a CMS-specific developer for creating the Frontend. For example, if developed websites in PHP as the backend language then the frontend also uses PHP code so they are tightly coupled

4 Limited Flexibility

5 Content is sent as fully pledged HTML instead of JSON data.

6 Generally, Refresh Whole sites to navigate to the next page or get any other content.

7 Has Complicated Designed and making changes on certain parts required modifying whole products as front and back are tightly coupled.

8 Slow performance and more server power usages: For rendering contents, it will generate whole HTML content(Html tags with data) at the backend and send it to the front. In this process, lots of processing power may consume the server. For better performance, requires larger servers for peak performance.

Also read: What is USB upstream/downstream port on monitor?

9 Backend is bounded tightly with only one Frontend.

10 Fewer opportunities to add creativity.

11 Difficult to provide data to other platforms like Mobile and IoT things.

Use Case of Traditional CMS

For Simpler websites like personal blogs and sites using traditional CMS is Okay. Use traditional CMS if you don't care about the technology used for building their products.
If the organization doesn't have a team of developers or content creators then use traditional CMS because developers and organization staff have to interact much with creating a full website with headless CMS. Up to the current date, Headless CMS does not have a better template and UI that fits and uses organization demands.
If your budget is limited.
If you are targeting web-only content.
If you are not sharing your content on other digital platforms and future technology.
If you want to fully regulate content from creation to display.

Many companies nowadays are requesting headless CMS.So what the heck is headless cms.

Also Read: Best Sites for tech tricks and tips

What is Headless CMS?

Headless cms are also called backend only cms. It is an API-first CMSes.Here, content is accessible via Restful API(JSON/XML) and displayed on various screen types.

Generally, in website sites or applications, the head of the sites is what we see ie. the frontend of websites so, the headless term used to just denote the frontend is separate from the backend and exists independently. So, the main objective of headless CMS is to store and deliver structured content and doesn't matter how and where the contents are presented and displayed.

💡 In Headless CMS, content is treated as data.

We will not focus on presentation layers, templates, site structure, or design when developing a headless CMS. We only focus on using CMS APIs and designing on that basis when using headless CMS. As a result, we can use any front-end programming language to create the website's front end.

Also read: Parts of Motherboard and its functions

The majority of today's available CMS is SaaS-based, which means that editors must log in to the backend system and write the content, and that content is accessible via API, which is hosted in the cloud-based backend. Then In headless cms, you can push/pull the content to any platform(mobile, web, IoT devices, AR/VR) using let's say API.

If you are using an old traditional CMS, making changes is difficult and time-consuming because you must reimplement the entire CMS. If you want to change the frontend of a headless CMS, you should not have to touch the backend infrastructures, saving both time and resources and making life easier.

Frontity is a popular headless WordPress Theme with React, which you can give a try.

Pros of headless CMS:

Platform Independence. The frontend and backend are independent of each other.
Free Technology Choice
Cross-Platform Support: Content managed by Headless CMS can be easily displayed on various web and mobile platforms.
Code simplicity
Better Scalable
Developers should not worry about content and should only focus on the presentation of those content.
Headless CMS seems to be more secure as Headless CMS only provides content via API or graphql whereas traditional CMS provides a user content editor through some interface which is tied to the site. While the editor's interfaces are not insecure, any points of accessing those are potentially vulnerable.
The performance of Headless CMS is very good. Good websites and apps do load themselves within 3 seconds and headless CMS has the capacity to load them in less time. Google also uses website speed as the primary factor for ranking sites. (source)
Better facilities to integrate third-party tools and libraries.

Cons of headless CMS

Can be more expensive to implement as has to be built front from scratch according to API
After writing content there are no content preview facilities for this you may need third-party libraries.
The product owner has to interact with the developer for design and logic which may irritate them.

Use Case of headless CMS

If your question is should I use headless CMS? then if you want or have the following requirements then use it.

If you want to develop their product for a unique user experience.
If you want to scale your product.
If you want to be secure because in headless frontend cannot access the database directly.
If you want better user experience sites.
If your intention is targeting various platforms like Web, Mobile, IoT, etc.
If you have developers in your team.
If you focused on reusable content.
If speed is your consideration and wants to load your website fast.
If you want to use a javascript framework like vuejs, react, angular.
If you want to use a web static site generator (Middleman, Jekyll, Gatsby, Gridsome)

Also, Read Bootstrap 4 vs Bootstrap 5. Which to choose?

Difference between Traditional CMS and Headless CMS

Headless CMS	Traditional CMS
Platform Independent	Platform Dependence
Cross-Platform	Focus mostly on Native
Code Simplicity	Comparatively not much code simplicity
Semi Decoupled	Monolithics
SaaS or hosted	Self Hosted
Easy to scale for high traffic	Not that much scale able
Less amount of data flows from the frontend to the backend because of the use of API	Transfer HTML to frontend so large content is sent to the front.
Have to build front on ourself	Has themes and templates, we can build ourselves as well.
Page oriented approach	Not Page oriented approach
Easy to reuse content on other sites	Difficult to reuse content on other sites.
Supported devices are limitless and can even use by IoT devices	Supported Devices are limited
Follows Agile workflow	Follows Waterfall workflow
Comparatively more Secure	Comparatively less secure
Less vulnerable to DDOS attack	More vulnerable to DDOS attack
They are generally provided to the client on the basis of pay-as-you-go	They are generally provided to the client on the basis of Licenses and Ongoing Maintenance
Headless CMS is reactive in the sense that it manages the content and simply sits and waits to see how the user wants that content. Let us say in the form of API, HTML, XML, and so on.So, Headless content can be repurposed and presented through multiple different mediums.	Traditional content management systems (CMS) are proactive in that they prepare content for presentation and push it into the delivery environment. As a result, the emphasis here is primarily on presentation.

Popular Headless CMS

Storyblok CMS
AgilityCMS
dotCMS
Butter CMS
Graph CMS
Contentful CMS
Kentico Kontent CMS
Contentstack CMS
Netlify
Magnolia CMS
Prismic CMS
Strapi
Scrivito

FAQs Questions related to Headless CMS

1) Is Headless CMS is Future of CMS?

Ans: Yes, headless CMS will sure be the future of CMS.As we know that content is king and valuable content is need everywhere in every type of device varying from the web, mobile, tablets, and IoT devices. Currently, most of the CMS are traditionally based which mostly generates web-based content and cannot provide the content to emerging IOT devices so people who know the value of IoT in the future are demanding headless CMS. Headless CMS is API-based CMS and API provides data in JSON /XML format which can be used by nearly all types of devices.

2) What is the CMS API?

Ans: Headless CMS is also called CMS API because in Headless CMS content is provided through API and you can use API and create your own presentation layer for displaying the content.

3) Is a Headless and Decoupled CMS the same?

Ans: No, headless CMS and decoupled CMS have a few different properties.

4) Does WordPress work as Headless CMS?

Ans: WordPress seems to be one of the best traditional CMS from the beginning. But nowadays we can use it as headless cms. Headless WordPress is a term used to describe the WordPress back-end (PHP stuff and dashboard) being separated from the frontend (presentation layer ie. layer that we see). And for the Frontend, various javascript frameworks are used.

There is various plugins available like the Headless CMS plugin by Imran Sayed.

Learn WordPress React Headless CMS click here.

5)Is Ghost a headless CMS?

Ans: Yes, Ghost is Nodejs based on open-sourced headless CMS

For More

6)Why do marketers need Headless CMS for omnichannel marketing?

Ans: From this blog post we already know that data can be generated from any device in headless CMS via APIs. Suppose you have generated the content from a mobile platform then headless cms can provide the same content in websites and other IoT devices, smartphones, etc. So, headless CMS provides omnichannel experiences. So, marketers can do marketing via a large variety of channels so that they can target large groups of audiences. Thanks to Headless CMS.

7) What is CaaS in CMS?

Ans: CaaS stands for Content As A Service. Here, content is used as a service and its services can be targeted to a large group of digital devices.