Top 5 headless CMS and their pros and cons (Gatsby JS edition)

One of the reasons why Gatsby JS has been so popular over the years is its vast plugin library that makes it almost as easy as drag-and-drop to add new functionality to your app.

Because of that, Gatsby has managed to make adding a headless CMS a straightforward and often very simple process that many other Static Site Generators (SSG) can only be astonished by.

In this post, I wanna go my top 5 headless CMS that I have used with Gatsby JS in the past and their pros and cons. Let's get started!

Contentful
Wordpress
Prismic
Netlify CMS
Strapi

Contentful

We start with Contentful. Probably being one of the biggest players in the headless CMS market, Contentful gets also introduced first in the official Gatsby docs for "sourcing data into Gatsby".

It provides a user-friendly interface and organized, flexible data models with support for a variety of data types and content editors (e.g. WYSIWYGs, form fields, raw text areas).

Pros:

Available free tier that allows you to use it with 1 website using 2 locales, 48 content types and 2 user roles (admin & editor)
Easy to set up
Work with up to 5 users on a team on the free tier
Great built-in versioning features with history and draft states
Intuitive user interface

Cons:

Step from free to tier to paid is very expensive (US$489/month)
Asset size max. 50MB
Just 1 site on the free tier

WordPress

Just recently Hosting Tribunal put out a new article on WordPress's latest statistics stating this:

WordPress powers 39.6% of the internet in 2021, a growth of nearly 5% from 35% in 2020, and a 4% rise from the year before.

HostingTribunal.com

But many people don't know that you could also use WordPress as their headless CMS. Just the way you are used, but with Gatsby or other Static Site Generators (SSG) as the front-end.

Made possible by the free and open-source WPGraphQL plugin.

Pros:

Extensive documentation on the WordPress GraphQL plugin
Many users are already familiar with the WordPress interface (usability+)
Unlimited assets, users & content types

Cons:

More tedious/difficult to set up than most headless CMS
WordPress needs to be hosted (not free)

Prismic

Prismic is my headless CMS of choice for my personal website as the content management process for different languages works really well.

The setup is a little tricky, but once you are through that the developing experience is very straightforward and easy. The extensive free tier is something I haven't been able to find anywhere else and for personal projects as a developer, I can recommend it.

However, as soon as you would like to have people to access content without admin access, Prismic's price-point at 100$/month rules itself unfortunately out.

Pros:

Very extensive free tier with unlimited API Calls, Documents, Custom Types, Locales, Assets, Image Optimizations & 100 GB of Built-in CDN
Very affordable plans for small teams (Starter Plan $7/month & Small Plan $15/month)
Live Previews for content changes (with Gatsby currently not very stable, use NextJS instead)

Cons:

Setup is not very straightforward with two different plugins gatsby-source-prismic-graphql & gatsby-source-prismic
User roles are only available on plans for "organizations" starting at $100/month, which makes Prismic unusable for small developers with individual clients.

Netlify CMS

Netlify CMS has been together with Prismic one of my go-to-solutions when setting up a headless CMS. It's more configurable than other headless Markdown CMS like Forestry and has a community with the Netlify forum that's quick to help if you run into any problems.

Pros:

Easy to set up with several starter/templates available
If properly set up, enjoy live previews within the CMS
Open-source with no paid plans (free only)
CMS lives right within your website and reads data from your Github repo markdown files

Cons:

Although managed separately from Netlify the hosting service, Netlify CMS is difficult to set up on any other host than Netlify
Not as versatile for users as other headless CMS
i18n (Localization) is possible but not user or developer to set up

Strapi

Strapi has been gaining a lot of traction recently and is becoming a popular solution as headless CMS. Providing an easy to configure Rest or GraphQL endpoint it can be virtually plugged in into any framework without a lot of trouble.

Together with its plugin library and the ability to also manage file storage as well as email for you, makes Strapi definitely worth checking out!

Pros:

Easy installation and ability to use rest and graphql
Extensive free tier (3 default roles etc.)
Plugin library to extend Strapi

Cons:

i18n (Localization) features are still not fully there yet
Hosting generally costs (if not hosted on free Heroku bucket)

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

Top 5 headless CMS and their pros and cons (Gatsby JS edition)

Comments (1)

More from this blog

The Definitive Guide to Netlify Serverless Functions

The best way to load and use Google Fonts with React, Gatsby and NextJS

Top 10 resources to get better at CSS and become a better front-end developer 👨‍🎨👨‍💻

React and Gatsby JS got me started 🚀🔥 But what’s next?

Table Of Contents

Contentful

Pros:

Cons:

WordPress

Pros:

Cons:

Prismic

Pros:

Cons:

Netlify CMS

Pros:

Cons:

Strapi

Pros:

Cons:

That’s pretty much it!

Command Palette

Comments (1)

More from this blog

Table Of Contents

Contentful

Pros:

Cons:

WordPress

Pros:

Cons:

Prismic

Pros:

Cons:

Netlify CMS

Pros:

Cons:

Strapi

Pros:

Cons:

That’s pretty much it!