I have a confession: for a long time, I thought all content management systems were alike. In 10 years of content editing, I’d never heard of a headless CMS. From my perspective, the popular CMSes had slightly different UIs, but the same functionality. Squarespace, WordPress, Drupal, Sitecore, Wix, it didn’t matter to me. If I needed to edit a web page, I just logged into the What You See Is What You Get (WYSIWIG) tool and made the changes myself. And while none of these tools were perfect, they got the job done—for me at least.
It wasn’t until I worked at a small startup that I saw that the UI of the CMS—the part I interacted with as a content editor—was only a piece of the puzzle. At the time, this company didn’t have a CMS at all. While I admit it was a tad intimidating to learn git workflows and markdown syntax, it was obvious from the start that the tradeoff was worth it. I’d never worked on a faster site. It had great Lighthouse Scores, and our development team could make branded site customizations left and right. If I had a request, they could make it happen. That simply wasn’t the case for traditional sites I’d worked on, like a monolithic Sitecore.
This workflow worked when we were a marketing team of four. But as we grew, it began to take too long to onboard new marketers, and soon became untenable. As a fast-growing company, new hires needed to be able to make site edits quickly from day one. We needed a new tool. We needed a CMS.
On the other hand, the development team had grown so accustomed to the flexibility the hand-coded site offered. If the docs team wanted to switch from Jekyll to Gatsby, they could do it. If we wanted to add an embedded product demo on a page, that was no problem. And without widgets and plugins weighing the site down, our Core Web Vitals were out of this world.
We needed a solution that would offer the development team the flexibility they wanted. The solution? A headless CMS. This solution would allow the marketing team to make edits without relying on developers, while keeping the agility our development team required.
For a lot of companies, the path to a headless CMS happens in the opposite direction. Instead of marketers making the case for a CMS, it’s the development team making the case for cutting the head off the existing CMS like WordPress, Drupal, or Sitecore, or migrating to a different headless solution. (If some of those words are still jargon to you, hang in there: we’ll define them all!)
In this post, we’ll dive into what a headless CMS is, why they’re helpful for development teams and marketers alike, and answer some frequently asked questions about what, why, and how headless CMSes work.
What’s a headless CMS? And where’s its “head?”
A headless CMS is a backend content management system that separates (or decouples) the content repository from the frontend user interface layer.
The “head,” in the term “headless CMS” is where the content is presented. For websites, this usually means the browser from which your user accesses your content. And for a lot of traditional CMSes, a browser is, ultimately, the only place your content can live. Traditional WordPress, Sitecore, and Drupal monoliths are built to serve content to web browsers, and not much else.
Headless CMSes, unlike their monolithic counterparts, can deliver content to all sorts of “heads,” like mobile apps, chatbots, voice apps–anywhere content can be delivered.
This means the term “headless” is a bit of a misnomer. Even “headless” sites have heads. That is, the content from the CMS ultimately lands up on a presentation layer (otherwise no one sees your amazing content!). A headless approach, however, bundles up all the components of your site into static HTML where possible, allowing data to be pulled in dynamically by APIs, such that the content can be served to multiple heads (i.e., a mobile app), if you wish.
Here’s a helpful video from our friends at Sanity:
However, the ability to serve your content to different “heads” is only a small part of why headless CMSes are increasingly popular.
Headless CMS vs. Traditional CMS
In a traditional CMS like WordPress, Drupal, or Sitecore, the database where all content–from product pages to blog posts to checkout workflows–is done by the same tool that ultimately renders the content and serves it to the place where it’s displayed (usually a web browser).
Top Benefits of a Headless CMS
Why do teams adopt a headless CMS? While there are lots of different benefits to using a headless CMS, it all boils down to one core concept: headless CMSes enable everyone on the team to do their best work.
Web development is a team sport, and the different players on the team (designers, copywriters, product marketers, web developers, and dev ops), have different preferences for tools and workflows. By taking a headless approach and separating the content repository from the frontend, headless architectures allow teams to select best-of-breed tools that work for their needs.
Here are some concrete examples of the benefits that a headless CMS can offer, and how it can help content creators, content editors, development teams, and even end users.
1. An API-first Approach Improves Developer Productivity
One of the primary benefits of this approach is that it allows every team member to focus on their area expertise. Content editors can use the CMS that makes sense for them, while developers can use the tools and services they prefer–and the workflows they like, as well. This has huge implications not only for developer experience, but developer productivity.
Headless CMSes are compatible with popular frameworks like Vue, React, and Next.js, not to mention any microservice your development team wants to use. Since microservices that handle everything from serverless databases to authentication can easily integrate with a headless CMS (either via GraphQL or a REST API), headless approaches offer immense extensibility. There’s no longer a need to wrestle with a plugin, or build a custom approach to integrating tools with a monolithic platform. So long as a service has an API, developers can add it to their headless site, and get to market faster.
The superior developer experience provided by headless CMSes is well summarized in the findings of the Jamstack Community Survey 2021. The survey of over 7,000 developers found that while WordPress is the leading CMS when it comes to usage, it also has the lowest satisfaction score. However, when you look at using WordPress as a headless CMS, you get a much higher satisfaction score. That’s because developers no longer have to deal with WordPress plugins, updates, and maintaining PHP code. They can build in whatever framework they like–like Next.js or Vue–and content editors still get to use the familiar WordPress UI.
2. Content Editors Ship More Frequently with a Headless CMS
Locked, scheduled deploys are a common process with traditional CMSes. Not so with headless CMSes. Of course, teams are still able to do this, but a headless approach makes it significantly easier for teams to ship content edits on their own, without assistance from developers.
European mall leader Kleppiere saw a 300% improvement in content creation time after taking their traditional, monolithic Sitecore CMS headless. Now, Kleppiere uses Sitecore as a headless CMS, while using Next.js and Uniform to render static content.
3. Headless Approaches are More Scalable
Pre-rendered frontends provided by headless approaches are inherently scalable. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN. This means if your site or app experiences a sudden spike in traffic, your CDN can elastically scale, and you don’t have to worry about server maintenance. Advanced CDNs, like Netlify’s High-Performance Edge, offer additional features like multi-cloud deployment and even the ability to run serverless functions at the edge. Scale away!
4. Site Performance and Core Web Vitals
Most traditional CMSes build pages on the fly, when a user requests them. A decoupled approach instead pre-renders pages at deploy time, which means when a user requests them, they’re already built. They’re also then served globally over a CDN, and when it comes to minimizing time to first byte (TTFB), nothing beats pre-built files served at the edge.
This often has massive implications for Lighthouse scores and Core Web Vitals, and improves a site’s SEO.
5. Headless CMSes Can Deliver Omnichannel Content
Headless CMSs offer a single source of truth for content. Since content is delivered via APIs, it can easily be delivered to different interfaces, or “heads.” This empowers teams to deliver content to not only web browsers, but mobile apps, voice-activated digital assistants, digital displays, and more.
In a different configuration, updating copy in multiple places requires copy/pasting, and leaves lots of room for error. With a headless approach, the content only needs to be updated in one place–the CMS–and it will be updated everywhere. The Morning Brew team uses Sanity CMS to build out not only their website, over eight different email newsletters. If copy changes are required, they no longer need to make the updates to each newsletter individually.
6. Headless Sites Offer More Security
Decoupled approaches inherently bear less security risk. Since server-side processes are abstracted into microservice APIs, the surface area for attacks is reduced. Most of the site is static, so you’re not exposing the whole server to the internet, and taking on the traditional security vulnerabilities that come along with that.
7. Internationalization and Localization is easier on a headless CMS
Does your company do business in more than one country? You’re probably familiar with the pain of internationalizing content for each country. Localization of content on a monolith is incredibly difficult and tedious, and often requires copy/pasting versions of the site to a different CMS for each country.
DTC e-commerce company MANSCAPED initially had multiple instances of their Shopify site for each country they operated in, which was time intensive and error prone. After moving to a headless approach with Netlify, content editors and marketers are able to make copy changes from a centralized location.
Common Headless CMS Use Cases
Use Case: Headless CMSes for Marketing Sites
Another popular use case is building marketing sites on headless architectures. Marketing teams often need the ability to spin up microsites, make copy changes on the fly, or quickly add translations for new markets. A headless approach can allow marketing teams to get their content to market without assistance or intervention from DevOps.
Additionally, headless approaches offer lots of benefits to site performance, which has important implications on the metrics marketing teams care about, like Core Web Vitals and SEO rankings. By using a headless CMS, marketing teams can see huge gains to their web performance metrics, while still using the tools they rely on.
Example: Medallia’s Headless Marketing Sites See SEO Gains
Medallia Experience Cloud is a customer feedback management software platform, so they deeply understand the importance of web performance in user experience. That’s why they took their main marketing sites headless. Medallia achieved 50% improvement in their Core Web Vital scores after migrating to a headless approach, using Netlify HP Edge as their CDN and Prismic as their CMS.
Use Case: Headless CMSes for Ecommerce
Headless architectures are increasingly popular in the ecommerce space. There are a lot of tools specific to the ecommerce space for headless approaches, which have important storefront functionality, like cart management and checkout capabilities. Some of these headless commerce tools (like headless Shopify or BigCommerce) have CMS functionality baked into them. But others just take care of a piece of the puzzle–like the API layer to connect to inventory–and need an additional tool explicitly for content editing and product information.
Example: ButcherBox uses WordPress as a Headless CMS
The fast-growing startup ButcherBox uses a headless WordPress approach for their e-commerce site. They started on a monolithic WordPress approach, and after page load times kept increasing and the PHP ecosystem became a blocker to site development, they realized they needed to try another approach. By using Netlify and Gatsby on the backend, ButcherBox was able to keep WordPress as their headless CMS for content editing, but bring agility and responsiveness to the site (and use tools their developers are excited about).
Popular Headless CMS Platforms (with free starter templates)
Need a headless CMS for your Jamstack project? There are a lot out there, and we’ll do some deeper dives in the future on how to choose which CMS to use for your project.
For a comprehensive list of open source headless CMS projects, check out Jamstack.org’s repository of headless CMSes for Jamstack projects.
Here are a few of our favorites, and templates for getting started right away. Once you click the “Deploy to Netlify” button in any of the following sections, you’ll be dropped into a simple signup workflow. Just connect your Git repository, hit save, and Netlify will deploy your site. You’ll receive a link to your live site’s URL.
Contentful
Contentful is the #2 most-used CMS for Jamstack sites, just after WordPress. It’s an API-first (rather than browser-first) headless CMS, which makes it a great fit for omnichannel content. Since they’re “content-centric” instead of “page-centric, you can organize and structure content in a way that makes sense for your team. Instead of working with fixed, predefined templates, teams can build a custom content model.
Headless CMS Starter Template for Contentful
Build a starter blog with Gatsby and Contentful with our free template! With Contentful and Gatsby, you can connect your favorite static site generator with an API that provides an easy to use interface for people writing content and automate the publishing using services like Netlify.
Strapi
Strapi is an open source Node.js headless CMS. Their product is entirely JavaScript (making it Jamstack-friendly), and they focus on building a developer-first experience. It supports GraphQL and REST APIs, and offers an images API directly in the editor.
Headless CMS Starter Template for Strapi
In this tutorial, you’ll learn how to deploy a React blog on Netlify that fetches content from a Strapi instance. Your content will then be deployed to Heroku, which is a cloud platform where you can host a Strapi server for free.
Ghost
Ghost is a self-consuming, RESTful JSON API with decoupled admin client and front-end. Ghost comes with a default Handlebars.js frontend, which can help you get a site running as quickly as possible, as well as detailed documentation for working with the API directly or using provided SDKs and headless front-end framework integrations.
Headless CMS Starter Template for Ghost
Ready to get started quickly? This starter template will generate a completely static content-rich site built with with Ghost and Eleventy (11ty).
Forestry
One of the primary reasons people choose Forestry is its clean UI. Forestry is a headless CMS that focuses on the content editing experience, and while it’s customizable, its out-of-the box implementation offers few bells and whistles, making it a great choice for getting started quickly.
Headless CMS Starter Template for Forestry
This free starter template uses Novela, which is an easy way to publish with Hugo and Forestry.
Sanity
Sanity is an open-source real-time headless CMS that you can customize with JavaScript and React. It’s what we use at Netlify! One primary benefit of Sanity is their focus on “content as data.” This means that content modeling looks a bit different in Sanity. Content is stored its properties, not how it’s presented. This is the foundation of reusability and unlocks integrations that make work easier for designers, editors, and developers.
Headless CMS Starter Template for Sanity
This free starter template will launch a multi-country e-commerce site with Sanity Studio as the headless CMS, a frontend layer built with Commerce Layer and Next.js, and deployed to Netlify. As a bonus, it comes with React components library, and Tailwind CSS alongside international shopping capabilities powered by Commerce Layer APIs.
Headless WordPress
Headless WordPress is a popular approach to a headless CMS, largely because WordPress is such a dominating force in the CMS world. So many content editors are familiar with its interface, so for content editors, workflows are more or less the same. Taking a WordPress site headless lets you store and manage your content on WordPress’s familiar user interface while publishing to a custom frontend framework with APIs and plugins.
Also, open source APIs like WPGraphQL help ease the transition for taking a monolithic WordPress instance headless.
Headless CMS Starter Template for WordPress
This starter template comes from our friends at Smashing Magazine, who built a headless WordPress site using Vue and Nuxt.
More Headless CMS Resources
- How to preview content with a headless CMS: Want to see a decoupled content management workflow in action? Watch step by step how you can preview blog posts on a shareable URL, as a static asset, served from a CDN using Contentful and Netlify.
- What is headless WordPress: This blog post takes a deep dive into the what, why, and how of WordPress as a headless CMS.
- Start your migration to a headless architecture: Ready to learn more about how to migrate from a monolithic architecture to microservices? Check out our step-by-step guide to incrementally migrating to a new tech stack with a microservice architecture.
