What is Headless CMS? Advantages And Other FAQ
Tags: webdev, headless, javascript, react
Published: 2020-05-28 10:40:56

<p>If you’ve entered the world of web development a while ago, it’s more than likely that you heard of or used a content management system before (CMS for short), yet you may still wonder what exactly is a headless CMS. </p>
<p>Perhaps, you know a traditional CMS like <a rel="noreferrer noopener nofollow" aria-label="WordPress (opens in a new tab)" href="https://wordpress.org/" target="_blank">WordPress</a> or <a rel="noreferrer noopener" aria-label="Drupal (opens in a new tab)" href="https://www.drupal.org/" target="_blank">Drupal</a>, but recent years indicate the growing popularity of headless CMSes and it’s worth wrapping your head around it.</p>
<p>So if headless CMS doesn’t ring a bell, we will fix it. </p>
<p>First, let’s start with some definitions.</p>
<h2><b>Traditional CMS vs Headless CMS</b></h2>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/glenn-carstens-peters-1F4MukO0UNg-unsplash.jpg" alt="a typewriter and the laptop next to each other">
<p>Let's start with traditional CMSes.</p>
<h3><b>Traditional</b></h3>
<p>Traditional CMS is a popular tool for web creation. In an easy manner, users can create and edit the content and store it on the back-end database. All those functionalities in one single system.</p>
<p>Choosing from multiple templates and themes, the appearance can be customized and the functionalities expanded with available plugins. Those CMSes often provide a “What You See Is What You Get” (WYSIWYG) experience, making them more user-friendly for non-technical people.</p>
<p>So typically, a <strong>traditional CMS consists of</strong>:</p>
<ul><li>a database for storing the content,</li><li>an admin panel for management,</li><li>API that joins everything together,</li><li>a frontend layer for displaying the content.</li></ul>
<p>What’s important to understand here is that the front-end and the back-end are coupled, they are linked together.</p>
<p>How is it different from headless CMS? Let’s find out.</p>
<h3><b>Headless</b></h3>
<p>In a nutshell - headless CMS is a back-end only content management system.</p>
<p>Remember that traditional CMS like Wordpress or Drupal had the front-end and back-end tightly linked, right?</p>
<p>Headless CMS is the opposite - it decouples content management from the presentation layer. If „head” is the presentation layer (or the frontend) and „body” is the content repository -  we chop the head off the body and hence the name „headless”. What we’re left with is raw content that we can access through API calls. Our CMS is now a content-only data source.</p>
<p>And since we no longer have a default front-end, we’re free to create as many „heads” as we wish and deliver our content to any device. That also means no restrictions on what framework or tools you use.</p>
<a href="https://snipcart.com/blog/intro-api-first-headless-cms-directus" target="_blank" rel="noreferrer noopener"><img src="https://pagepro.co/blog/wp-content/uploads/2020/03/headless-animation-1.png" alt="">
<p>In addition, this decoupled approach makes a perfect fit for JAMstack builds.</p>
<a href="https://pagepro.co/blog/2019/11/19/what-is-jamstack" target="_blank" rel="noreferrer noopener"> What is JAMStack?
<h2><b>What are the benefits of headless CMS?</b></h2>
<img src="https://pagepro.co/blog/wp-content/uploads/2019/11/2020-1024x490.png" alt="a woman touches interactive futuristic screen">
<ul><li><strong>Flexibility</strong> - you have full control over the appearance of your content and you can work with your favourite frameworks and tools<br></li><li><strong>Enhanced security</strong> - since the content publishing platform is not bound to the database - the risk of malware attacks is lower<br></li><li><strong>Reusability</strong> -  you can reuse and repurpose your content to serve any digital channel<br></li><li><strong>User-friendly</strong> - content delivered via API is easier to maintain and distribute, and it’s easier to edit for non-technical people<br></li><li><strong>Future-proof </strong>- since the presentation and logic layers are separate you can structure your content and make it adaptable to future modifications</li></ul>
<h2><b>Should you go headless?<br>(or not)?</b></h2>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/jukan-tateisi-bJhT_8nbUA0-unsplash.jpg" alt="a child next to the big stairs">
<p>If you feel like traditional CMS is too limiting for you and you need a more flexible tool, then you should go headless. </p>
<p>If you want to create unique websites that can be displayed on any device, then you won’t profit from a predefined template.</p>
<p>Moreover, a traditional CMS offers you everything out-of-the-box, but as a side-effect, you’ll end up piling lots of unnecessary code. </p>
<p>That’s not the case with headless CMS where you can choose to integrate only the functionalities that you actually need.</p>
<p>And as mentioned before, it’s technology-agnostic, meaning you’re not restricted to a specific tech stack. It’s a developer-friendly solution. It’s perfect for use cases such as:</p>
<ul><li>websites and apps based on any JavaScript framework (<a href="https://pagepro.co/blog/2019/11/15/reasons-to-use-react-in-2020" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">React</a>, VueJS, AngularJS),</li><li>sites made with a static site generator ( i.e. <a href="https://pagepro.co/blog/2019/12/09/is-gatsbyjs-the-best-framework-for-building-static-websites-what-are-the-other-alternatives/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Gatsby</a>)</li><li>delivering content to multiple channels.</li></ul>
<p>But if you don’t have the technical resources, or you don’t rely on developers to manage the content, it might make more sense to use a traditional CMS. </p>
<p>Especially if you’re working on a small project like a personal site or blog, it’d be easier and cheaper to use a template than build everything from scratch. So keep in mind that sometimes a traditional CMS might be the right choice for you.</p>
<h2><b>Headless CMS platforms</b></h2>
<p>Here’s a list of some of the most popular headless CMS platforms right now:</p>
<ul><li><a href="https://pagepro.co/blog/2020/03/04/what-is-strapi-and-how-to-build-your-first-api/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Strapi</a></li><li><a href="https://www.datocms.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">DatoCMS</a></li><li><a href="https://www.contentful.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Contentful</a></li><li><a href="https://directus.io/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Directus</a></li><li><a href="https://graphcms.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">GraphCMS</a></li><li>and many more…</li></ul>
<h2><b>Headless CMS in use - examples</b></h2>
<ul><li><a href="https://www.economist.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">The Economist</a></li><li><a href="http://wallflowerglobal.com/casestudy/burger-king/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Burger King digital menu boards </a></li><li><a href="https://www.augment.com/blog/3-consumer-giants-who-used-augmented-reality-for-retail/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Ikea AR mobile app </a></li></ul>
<h2><b>Conclusion</b></h2>
<p>The future is searching for more and more interesting ways to delight users with their experience and Headless is one that is definitely the most interesting one at the moment.</p>
<p>I hope I helped you got more familiar with this subject and you are now more ready to give it a try.</p>