Headless CMS 101

Headless CMS 101

Image of pile of yellow lego heads with different expressions
Kayla Eidenbrook
Thought byKayla Eidenbrook
October 29, 2020

Headless CMSs are becoming increasingly popular, with more organizations than ever moving away from a traditional CMS for a headless approach. Gone are the days of solely relying on a website to connect brands with customers, as the competition for digital innovation increases and customers expect more convenient channels like mobile apps, chatbots, and others. 

People in more technical roles tend to be the biggest fans of a headless approach, with business minded folks being slightly less enthusiastic. Why? Well for one, it’s not the easiest thing to understand if you’re not a natural tech wizard. And it’s also not the easiest project to implement, even if you were born writing code. Opening the doors to a headless CMS offers incredible potential, but also some risks. 

Here we’ll explain what a headless CMS is, why it’s becoming increasingly popular, and what the potential downsides are for implementing it.

What is a headless CMS?

A traditional CMS consists of both a frontend (what visitors see and interact with) and a backend (where data is stored and organized). With a headless CMS, the frontend (head) is cut off from the backend, so you can create whatever “head” is desired, whether that be a website, Android application, digital billboard, Alexa skill, or more. This content can now be published anywhere  for a variety of digital channels.

In a headless architecture, everything the user sees and interacts with (like menus, page content, etc) is rendered independently from the CMS. In the case of a website, this is typically done by a React or Vue.js application running in the browser.  This allows each half of the website -- frontend vs backend -- to focus on what it does best. The backend is focused on business logic and data retrieval, and the frontend focuses on display and user experience. 

Image of notebook with two drawings of person and one has no head

What are the benefits of a headless CMS?

A headless approach can help modernize and future-proof a website, which is why so many of the world’s biggest brands choose some form of a headless CMS. There are many benefits of choosing a headless CMS, including:

Faster performance: Since the user experience is both built and displayed in the web browser, performance is optimized. You load the application once, and each click after the first is typically much faster to load.

Increased security: Headless sites are designed in a way that tend to be highly secure, and are not vulnerable to many types of attacks.

App-like user experience: Some headless sites will feel more like an app than a website.  For example, page loads can be lightning fast without requiring a hard page reload. And selecting filters on a search page can feel instantaneous.

Easier content management: A headless build can make it much easier to syndicate across multiple websites or apps. For example, your smart TV app can display the same data as your web app. Why is it easier? With headless, if you need to pull content from two CMS instances, you can just pull data from both of their APIs. It completely eliminates the need for complicated syncing solutions.

Freeing frontend developers: Because the frontend is separated from the backend, frontend developers are able to use their native tools to greatly improve user experience.

Lower setup and maintenance costs: You don't have to do any initial hosting setup for headless CMSes or apply security updates

Potentially Lower hosting costs: In certain circumstances, you don’t need to pay separately for hosting with a headless CMS, rather you pay a monthly subscription fee that includes use of the CMS, support, hosting, etc. The frontend application will still need hosting, but it typically requires a lot less horsepower than a traditional CMS. For pre-rendered sites, you can even use static hosting like AWS S3 or Netlify (which is dirt cheap).

Scalability: It's a lot easier (and cheaper) to scale out a headless infrastructure to handle increases in traffic.

What are the downsides of incorporating a headless CMS?

If choosing a headless CMS has so many great benefits, why wouldn’t everyone go this direction? One of the main reasons is headless isn’t a simpler, more turnkey and out-of-the-box solution. They can also be costly to implement. Think of it like building your own bookshelf versus opening a box from Ikea. When you build your own, you can customize it exactly how you want it, but it can be alot trickier, especially if you don’t already have a direction for it. With a headless CMS we’re stripping away the typical frontend html, so the new content needs to be custom built.

Examples of why headless can be tricky to implement:

  • Lack of prebuilt themes (making it difficult for small businesses using Wordpress)
  • Traditional CMSes often inject a lot of SEO-friendly markup into the page automatically, but this needs to be manually coded into headless frontends
  • More limited ecosystem of plugins and addons. (While there's a lot of plugins that still work in headless scenarios, you are going to miss out on certain end-to-end solutions - i.e Drupal Commerce)
  • Learning curve for development teams who are used to coding for a traditional CMS

A headless CMS might not be the best fit for these instances:

  • Small brochure sites with tight budgets or timelines
  • Intranet sites
  • Organizations that are already accustomed to front-end editing tools

For these reasons, a headless CMS isn’t recommended for every organization out there.

Is a headless CMS right for you?

There are a number of considerations to ensuring a headless approach is the right one for you, as well as other options that combine aspects of both a traditional and headless CMS. Whether you’re weighing options or know you want to pursue headless, it’s important to have a trusted advisor on your side to help. Subscribe to FFW's emails for more future information on headless, or contact us if you’re ready to get started. 

 

Topics:
Headless
Digital Strategy

Fill out the form to learn how FFW can support your needs.

Read next:

Blog
Teaser image of UX blog part 2

How good and bad user experiences affect your reputation

Blog
Teaser of Novozymes report blog

Novozymes named best digital annual report of 2018

Blog
Teaser of Drupal and Sitecore blog

What's the difference between Drupal and Sitecore?

Blog
Teaser of Announcing three new eBooks blog

Announcing three new eBooks