In this article, we deep dive into headless cms. Before understanding headless cms lets 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.
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 these content displayed on your websites.
Traditional CMS is following monolithic architecture as here frontend(layout and designed) and backend(database and code, plugins) as tightly connected as they are bundled together.
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.
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 use organization demands.
- If your budget is limited.
- If you are targeting on web-only content.
- If you are not sharing your content in other digital platforms and future technology.
- If you want to fully regulate content from creation to display.
Many companies nowadays are requesting for headless CMS.So what the heck is headless cms.
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.
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 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 it a try.
➤Pros of headless CMS:
1)Platform Independence. Frontend and backend are independent upon each other.
2)Free Technology Choice
5) Better Scalable
6) Developers should not worry about content and should only focus on the presentation of those content.
➤ Cons of headless CMS
- Can be more expensive to implements as has to 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.
➤ 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 web static site generator (Middleman, Jekyll, Gatsby, Gridsome)
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|
|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|
Popular Headless CMS
- Storyblok CMS
- Butter CMS
- Graph CMS
- Contentful CMS
- Kentico Kontent CMS
- Contentstack CMS
- Magnolia CMS
- Prismic CMS
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 own presentation layer for displaying the content.
3) Is a Headless and Decoupled CMS the same?
Ans: No, headless CMS and decoupled CMS has few different properties.
4) Does WordPress Works as Headless CMS?
There is a various plugin available like the Headless CMS plugin by Imran Sayed.
Learn WordPress React Headless CMS click here.
Ans: Yes, Ghost is Nodejs based open-sourced headless CMS
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.
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.