Startups

What is headless CMS? A simple guide with examples for Strapi.

An abstract banner image with the words, 'headless CMS'.

Headless CMSs are increasingly popular, and for good reason. But what is a headless CMS and why use one? Here's our guide to the headless CMS, with examples.

Contents:

    What is a CMS?

    A content management system (CMS) allows creators to store and organize their content, such as blog posts, images, and videos in a digital repository.

    Many ‘traditional’ CMSs have the ability to handle both the display of content to the site visitor on the frontend and the management of the content on the backend.

    These are often referred to as monolithic CMSs because they combine the various functions of both the front and backend into a single application that the site manager - often a member of the marketing team - uses to both manage their content and display it to visitors.

    Examples of ‘traditional’ or ‘coupled’ CMSs include:

    Imagine instead of visiting your website, your potential customer walks into your office to come and speak with a real person. It’s all very edgy and pre-COVID.

    When they approach you, they naturally talk to your face. They ask you questions and you respond with your mouth, smiling nicely as you explain the benefits of your product and generous pricing structure.

    If this were a website, you’d the front end. The part that the customer sees, interacts with, and uses to engage with the underlying value your company provides. In the real world, we might call you a sales associate and you’re the messenger.

    And as a sales associate, you’re replaceable. The company doesn’t have to replace or rebuild it’s pricing structure, its sales pitch, or its customer database if it fires you. Sorry. A week later, the same potential customer walks in the door and the new salesperson delivers the same content in a new way.

    The face (or ‘head’) may change, but the underlying operations and content the company has on file - like your super-optimized pitch on why your office coffee delivery service is the best in town - stays the same. It’s only the presentation that changes.

    A visual representation illustrating the difference between a headless and traditional CMS. It indicates that a headless CMS provides the opportunity for a variety of front end solutions, which a traditional CMS can limit you to one.

    The flexibility of the headless CMS is one reason why at Develocraft, we use a headless CMS. And Strapi in particular.


    That’s headless CMS. It separates content management from the presentation of that content. This allows for greater flexibility and control of user experience by ‘decoupling’ the front end from the management of that content on the back end.

    A screenshot of Strapi's main admin view on intial setup.

    In a headless CMS like Strapi, content management is decoupled from front-end management


    It is for this reason that a headless CMS is sometimes referred to as a ‘decoupled CMS.’ However, this can be a little misleading.

    Decoupled vs. headless CMS: what’s the difference?

    A decoupled CMS includes:

    • A database where the content is stored
    • An interface used by the administrator to create, edit, and manage content
    • A frontend content delivery system that is separate from the backend, connected via an API
    • An API

    Note that in the case of a decoupled CMS the frontend is included, even if its on the other side of an API.

    A headless CMS includes:

    • Your backend content management system
    • An API

    The key difference here is that the frontend is not included. It's up to those running the development project to either build one, select an out-of-the-box solution, or adapt and introduce an existing frontend.

    To summarise, a headless CMS consists of an API and the back end technology necessary to store content before it is delivered to the front end.

    Examples of headless CMS

    Open source headless CMSs include:

    • Strapi (which we recommend from our own experience)
    • Cockpit
    • Directus

    However, non-open source solutions exist. SaaS options include:

    • Core dna
    • Contentful
    • Kentico Cloud

    Flexibility and speed. A headless CMS doesn’t commit you to a frontend in any form. Your business can quickly rebuild its frontend site without needing to recreate the entire backend, or spend an eternity reuploading old content into a new system just so it can reach your visitors through a new display layer. Instead, once your new frontend is ready, you’ll be able to ‘plug in’ all your old content smoothly and at speed.

    Use your language of choice. There are plenty of front end development languages floating around out there and almost as many opinions about which is “best”. Whatever wacky language your team is using to craft their code, a headless CMS empowers you on the backend while granting you freedom on the front end.

    Multiple ‘heads’. It’s true! If you’re serving multiple audiences and have multiple user-facing content experiences - perhaps you’re a single media organization managing multiple websites, for instance - you can connect your single backend to a variety of frontend ‘heads.’ This means you can keep your content management simple with a single admin interface for your team to handle, even as they pump out rich content across your properties. Hail hydra!

    A flow diagram shows the content stored in the CMS being transferred, via an API, to three distinct front end experiences, where different sections from the same CMS are displayed in different configuarations.

    The headless CMS: one place to store and manage, multiple places to display.


    More control over display across device types. While traditional CMSs offer WYSIWYG (what you see is what you get) content editing, they can also be susceptible to display issues - for example, when ‘squeezing’ content that looks great on a desktop to fit the narrower space available with mobile. The solution is often some design compromise whereby the content is arranged in WYSIWYG by eyeball so that it looks acceptable in both desktop and mobile, but may not be optimal in either.

    By contrast, a headless CMS offers much more control and specificity around how content will be displayed on each type of device. This could mean less fiddling around to make the content look good when preparing a blog post. At Develocraft, we have this precise arrangement with our Strapi-based solution, and as a writer I do not miss spending my time tweaking content to make it look good when I could be preparing more content!

    A flow diagram shows the flow of content from the CMS, through an API, to different display configurations on different devices.

    It may take more work initially, but a headless CMS can give you more control of how content is displayed on different device types.


    Why use Strapi as your headless CMS

    We’ve been using Strapi to manage our own content. Here’s what we like about it:

    • 100% Javascript. This means it’s not only written in a great programming language, but it’s easy to hire staff with the know-how to work with it.
    • Easy to customize. Particularly the admin panel. As we build our blog, we sometimes find ways we’d like to improve our CMS (not just our front end). Because of this, as well as the custom plugins, it’s easy to get the results we want as we learn more about our own requirements.
    • It’s open source. This keeps our costs down and, due to the popularity of the platform and vitality of the GitHub community, we’re confident in its long term viability.
    • It’s React-friendly. And we use React.
    • Self-hosted. Which is great for data privacy (and the bank balance).
    • NASA uses it. Which is just cool.
    2020-10-028.3 mins

    Alexander Smithers

    Hello! I'm the head of content at Develocraft. I'm also a startup guy (no joke)! I've worked with a lot of them and learned so much. I'm here to help you by sharing that knowledge. I'm always open to collaborations. Find me on LinkedIn.


    Share article