Different Types of Headless CMS

A Headless CMS (Content Management System) separates and allows content creation management from the Front-End presentation layer in real time. It connects content to the front end and retrieves and renders it via a Content Delivery Network (CDN). As time passed, this method increased its popularity. That happens because it allows developers, content editors, content creators, and content teams to approach content management tools they feel most comfortable with without having technical expertise. In this blog post, you'll learn the different headless approaches. Let's dive in!

How to Choose a Headless CMS?

Many headless CMS platforms are modern technologies. However, not all have the same modular architecture. While some CMS uses APIs to pull data, others come from Github. Some are self-hosted, while third-party cloud services host others. If all this doesn’t make quite sense, don’t worry! We’ll describe the main types of headless CMS, with their key features and examples.

Self-Hosted v. Open-Source vs Headless CMS

A free and open-source headless CMS lets you download and install it on your server of preference. They can run locally on your computer for free. If you want to access it from outside, you can install it on a server with a hosting service for a monthly fee. The CMS connects via an API to a website’s front end. When the website loads on the browser, it makes an Application Programming Interface (API) call with JavaScript to fetch the open-source headless CMS data.

Headless WordPress

WordPress is more famous for its non-headless architecture version. Yet, its WordPress headless solutions use the same dashboard as the regular. There are plugins, like Custom Post Type UI or Advanced Custom Fields, to extend stored data types. But there's an important thing to notice. Most WordPress plugins are useless since the back end doesn't connect with the presentation. WordPress is only a Database Management Software (DBMS) and a headless Content Management System.

You have two ways to connect a headless WordPress site: a REST API and WPGraphQL‘s plugin. A GraphQL API makes it easier to create data queries, as it only calls for the exact data needed. The plugin is still under development at the time of uploading this post. You may want to check its current status to see if the newest version is available. Other examples include Strapi and Ghost (with a paid hosted version, too)

Git-Based CMS

A Git-based CMS is the most developer-centric option. This type of CMS connects to the Git repository when you store a site’s code. The platform itself provides an admin panel to create structured content with the content repository. There's no external database: the content is directly in a folder in the codebase.

Netlify CMS

Netlify is a popular static website hosting platform. Also, it offers an open-source CMS. This CMS has a familiar User Interface (UI) to edit the content that non-technical users can use. Behind the scenes, the React app's admin panel assists the Git workflow. When a team member posts digital content, the changes go directly to Github. Its out-of-the-box admin options are easy and suitable for blogging purposes.

To add an option to the content model, put the corresponding line of code in the config.yml file. Further customization is possible since the admin code is open-source for developers to build and create custom configurations. Additionally, it stores the content as markdown files, an easy file type to process in the frontend code. Other examples include Grav and Crafter.

PaaS (Platform as a Service) Headless CMS

A PaaS is a third-party digital platform that hosts content in the cloud. These platforms charge a fee depending on the plan you’re signing up for. Some have a free tier, allowing you to change plans once the site gets more traffic. As a paid service, PaaS often has fancy dashboards and vast modeling possibilities for building User Interfaces. Cloud environments are an attractive choice, especially when having a free tier at the beginning.

Even if you start free, companies could change pricing or usage, forcing you to switch to a higher plan. Yet, it’s important to note that they’re also the safest option. A PaaS often has plugins and a starter site for static-site generators. That's the case with platforms like Gatsby. These will make quicker and easier connections to the service. Devs must dive into documentation for other types of sites to understand how to work with the PaaS API. Ensure that this process isn’t overly complicated. Further, make sure that it has robust documentation and customer support.

Sanity Headless CMS

Sanity is a third-party service. Furthermore, it has an entirely extendable content platform and an attractive editor user-friendly interface. In the beginning, it will need some developer setup. But, once you implement it, any member can log in and add content. Since it’s on the cloud, there’s no need for server setups or maintenance. Also, the cloud immediately syncs all additions and changes.

This SaaS is a React app, and its installation needs to be in a local environment via NPM. You can customize a template (blog, eCommerce, etc.). The content modeling handles JS objects. You’ll only need to add or subtract lines of code to make adjustments. It has its query language, GROQ. It’s like GraphQL but requires reading documentation to learn about it. Yet, it comes with an IDE plugin that makes writing queries easier. Sanity has a free tier with a pay-as-you-go structure if you exceed monthly usage limits. Other examples include Contentful and Prismic.

Conclusion

These digital experiences can work with the right amount of development time. Yet, some fit better for specific web services. The simplicity of a Git-base option is perfect for blogging. Large teams and sites with complex data types may benefit more from a PaaS offering. You may want to consider technical experience; if you're not used to programming languages, the hosted headless CMS could have drag-and-drop functionalities or even low-code or no-code capabilities to make it easier to work with. Further, businesses with budget constraints in their projects may choose an open-source platform. Know your case and understand how the headless vendors help you offer rich User Experiences!