A Content Management System or CMS is usually an essential part of any web project, whether you're developing an app, a website or even a SaaS project.
If you're developing your new project using React, then you'll need a CMS that works seamlessly with it.
But with so many different CMS options out there, how do you choose the right one for you?
In this guide we'll break down some of the most popular CMS options for React, their pros and cons, and what sort of projects they're best suited for.
What's the Best Type of CMS for React?
Before we delve into the different platforms available, let's talk about the type of CMS you need.
There are 3 main types of CMS (or, two and a hybrid!)
- Traditional, or Monolithic
- Headless
- Static, Decoupled or Hybrid
A traditional CMS is something like Wordpress, where all the code for the CMS sits alongside your website and any updates you make are instantly pushed through.
A headless CMS sits separately from your website. This means the front end doesn't need to load the CMS and all its code every time someone visits it. Updates made through the CMS are called through to the front end of the website via an API.
A decoupled or hybrid CMS is essentially when a traditional platform is used, but is separated from the front end of the website. That means you're still using the traditional CMS to store the content, but it's being pushed through to the front end by an API, just like for a headless CMS.
When you're working with React, headless is by far the best option for your CMS. Headless CMSs are faster, more flexible, and are especially more suitable if you're developing a web app or PWA.
The Best Headless CMS for React
So, now we know that headless is the way to go, what are the best options out there?
The answer probably won't be the same for everybody, so we'll help you through the pros and cons of each of our favourites. We'll talk about suitability for different users and projects, and the ongoing considerations of pricing and maintenance too.
Strapi - Great for Scalable Projects
Let's start with Strapi. This is an open source headless CMS that's set up for API integration.
That means it's flexible and easy to use with a wide range of different frameworks - including React.
Strapi is highly customisable, so your project won't be restricted in design or functionality by the limits of the CMS.
Strapi also has a lot of plugins, making it easier to add on features and functions. It can also be self-hosted, so if you have the capabilities in-house, you can manage the hosting and maintenance yourself.
Working with Strapi
Strapi is very popular with developers, as it's incredibly easy to set up and integrate.
For website managers and content marketers, there may be a little more of an onboarding process if you've not worked with Strapi before, but with its clear UI, it's usually fairly easy to get used to.
Ongoing considerations for Strapi
The basic Community account for Strapi is free, and its next tier up comes in at $15 per month, per seat, which is one of the more affordable options - particularly if you have a small team.
As with any open-source CMS, you'll also want to consider ongoing maintenance for your project. Obviously if you have your own in-house team, this shouldn't be an issue, but if you're working with an agency or freelancer, make sure they've got a suitable maintenance service to keep your CMS up to date.
What type of React project is Strapi best for?
Strapi is excellent for websites, PWAs and ecommerce,but it's particularly good for scalable projects.
Because of the flexibility of its system, this makes it ideal if you're starting with an MVP, or have expectations of expanding the project.
It's also a good choice if you want to keep control of the hosting, security and ongoing management of the CMS, as you can use their
PayloadCMS - Ideal for Complex Apps and Systems
Another open-source, headless CMS, PayloadCMS allows a deep level of customisation.
A key difference between PayloadCMS and Strapi, is that it needs to be self-hosted, so you'll need to make sure you've either got the skills to manage that in-house, or an agency who can sort it for you.
One new development with PayloadCMS, is that it's just announced a partnership with Figma. This could be a game-changer for designers and developers, and we are expecting integration between these two systems in the near future.
This could make PayloadCMS the go-to CMS for many businesses and agencies, allowing much greater collaboration between design and development teams.
Working with PayloadCMS
PayloadCMS is a favourite among developers, and has a growing community which is constantly expanding the documentation.
For website editors, PayloadCMS can be fantastic, because of its customisability. Your development team should be able to set you up with a UI that works perfectly for your needs.
And depending on the developments between PayloadCMS and Figma, it could also end up being a great choice for designers too
Ongoing considerations for PayloadCMS
Currently PayloadCMS's standard license is free, with $35 and $199 per month costs for more complex projects.
Because it's an open source CMS, you'll need ongoing maintenance either in-house or provided by your agency. And PayloadCMS doesn't offer hosting on its own platform, so that's also something you'll need to consider.
What type of React project is PayloadCMS best for?
PayloadCMS is an ideal choice for projects that need a bespoke CMS setup, including functional websites, PWAs and web apps and Saas platforms.
Even if you've got a really straightforward setup, PayloadCMS will absolutely do the job, but it really shines with more complex projects.
Statamic - Perfect for Simpler Projects
The Statamic CMS is built on Laravel, and while it's probably not as commonly used as PayloadCMS or Strapi for React based projects, it's still a good option.
Working with Statamic
Statamic is another open-source platform, and just like PayloadCMS and Strapi, it has a wide range of customisable features.
Because it's built on Laravel, it can be useful for developers to have a basic understanding of Laravel if you plan to use Statamic.
For website editors, Statamic provides a very clean, usable interface, and it may feel a bit more familiar to people used to using Wordpress.
Ongoing considerations for Statamic
Statmic's basic level Community account is free, with its mid-range "Pro" option at a flat fee of $275USD (although there's a $65 annual charge for updates).
Just like with the other open source platforms, ongoing maintenance is a must, and Statamic is also a self-host only platform, so you'll need to have that in place with your own in-house team, or through a provider.
What type of React project is Statamic best for?
Statamic can be ideal for smaller, less complex websites and apps, and offers a really streamlined editing experience.
Contentful - The Big Player in Cross Platform Content
Contentful has been one of the big players in the headless CMS industry for a while now, and is likely one of the options you've already heard of. Unlike most of the other options, it's a cloud-based SaaS (software as a service).
Working with Contentful
While Contentful absolutely does work as a CMS, and integrates well with React, its most significant features are for cross-platform content generation.
This makes it a really great choice for large websites, multi-language websites, and projects that involve a lot of content marketing, social media and email marketing.
For developers, you may find Contentful is less flexible than other options, with less customisation available.
Ongoing considerations for Contentful
While the basic level is free, Contentful gets more expensive quickly, with their "Lite" product coming in at $300 per month.
However, as Saas, there's no ongoing maintenance or updates required for Contentful itself, which removes the additional cost for hosting or maintenance.
What type of React project is Contentful best for?
Contentful is really more for marketers than developers, so if you're planning to do a lot of cross-platform content marketing, this system could be ideal.
However, for more functional projects, Contentful doesn't provide the flexibility of other CMSs, and for simpler projects it may simply be overkill.
Wordpress
Ok, so we've already gone a little bit into why Wordpress ISN'T a great option for React, but it's still something that clients often request, so it's worth going into the details regardless!
Working with Wordpress
If you want to use Wordpress for a React project, it's going to need to be a decoupled or hybrid setup. That means the content editing will be done on Wordpress, and then pushed through to the front end, which will be hosted separately to keep it fast loading.
Wordpress is rarely a first choice for developers, as despite it having a multitude of different options and plugins, it is still really quite restrictive in how it operates.
For website editors, a lot of the benefit of using Wordpress comes from familiarity. But there's also the fact that it may feel like editors can add features and functions through plugins without the help of developers.
This can be all well and good for theme based and simple websites, but typically the more complex a project, the less suitable it's going to be.
Ongoing considerations for Wordpress
Wordpress is free to use, but because of the huge number of updates to the platform and plugins, and because it's the biggest target for hackers due to its massive popularity, you absolutely need to have a maintenance service in place to keep it up to date.
What type of React project is Wordpress best for?
Realistically, Wordpress isn't going to be the best option for any React project! But while you can get by using if for simple, straightforward websites, you absolutely should avoid it for anything that's reasonably complex.
For PWAs, web apps or SaaS projects, Wordpress is going to be slow, cumbersome and awkward. But if a client insists they need to use both Wordpress and React, it's going to be workable - even though there are definitely better options out there.
What's the Best CMS for React?
The best CMS for React definitely depends on the type of project you've got. Here are our favourite choices for each React project type:
- Best for Scalable Projects - Strapi
- Best for Complex Apps and Systems - PayloadCMS
- Best for Simple Projects - Statamic
- Best for Content Marketing - Contentful
- Wordpress - Only for people who won't give up Wordpress!
So if you're looking to start a new React project, it's definitely worth thinking about what you want and need from your CMS, and these suggestions may help guide you to the right option.
