What is Headless CMS? Traditional CMS vs Headless CMS


👤 Diwas Poudel    🕒 Jul 20 2021    📁 Fix    📜 0 comment

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

 

What is CMS?

CMS is an application that enables multiple users to create, manage, and modify web content without knowing how it is working in a minute. All the data of CMS goes into the database permanently and needed data are shown on the web browser/app based on the requirement. It is a crucial part of website development.

Also Read: Best .net cms platforms


What is the traditional CMS?

Traditional CMS is an old-style coupled cms architecture. Here, the editor, the writer creates and edits their contents 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 designed) 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, 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 is available and easier and cheaper to set up and use it.

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 CMS-specific developer for creating frontend. For example, if developed websites in PHP as backend language then 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 the next page or getting 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.

 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 does not matter how and where the contents are presented and displayed.

💡 In Headless CMS, content is treated as data.

While making headless CMS, we will not focus on presentation layers, templates, site structure, and design. For using headless CMS, we only focus on using API provided by CMS and designed on the basis of that. So, we can freely choose any front-end programming language for building the website's front.

Most of today's available CMS is SaaS-based, where editors must log in into the backend system and write the content and that contents are accessible via API and API are hosted in the cloud-based backend.

In headless cms, you can push/pull the content from/to any platform(mobile, web, IoT devices, AR/VR).

With old traditional CMS, changes are very difficult and time-consuming because you have to reimplement the whole CMS. With headless CMS, if you want to change the frontend, then you should not have to touch back-end infrastructures, hence saves both time and resources making life better.

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 user content editor through some interface which is tied to the site. While the editor's interfaces are by no 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 it in less time. Google also usages website speed as the primary factor for ranking sites. (source)

Cons of headless CMS

  • Can be more expensive to implements 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 flow 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

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 provides 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 few different properties.

4) Does WordPress Works 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 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 a various plugin 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 devices 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.