The web development world is impressive: that much variety you won’t find anywhere else in the software business. That’s why, everything from frameworks to hosting platforms to databases requires careful choosing.
You might’ve heard about Remix, the new kid on the meta-frameworks block, and you’re probably tempted to give it a go, but if you take it for a ride, you’ll need a CMS or a database to make the most of it.
Remix gets you covered in terms of front-end. But to store and serve your data, you must also take care of your back-end. For instance, you can use a database service like Fauna or a headless CMS.
While dozens of headless CMSs are available on the market, some integrate with Remix better, but which is the best Remix CMS? Let’s find out!
This post covers
- What is Remix?
- The architecture behind Remix
- Best CMS for Remix
- Pound-for-pound comparison
- To sum up
What is Remix?
If you landed here, you might already be building a Remix website, so feel free to skip this explanation. But in case you don’t have a clue, we’ll give you a quick intro.
Remix is a React-based front-end framework that radically differs from other meta-frameworks.
How?
The thing is, most websites are complex. They use convoluted state management and are rich in JavaScript, so development takes time and accumulates mistakes. Ryan Florence, Remix’s founder, borrowed some techniques from the older web to simplify things for developers. These techniques, modernized and optimized to work on the cloud, are implemented in Remix.
To elaborate on simplicity, a Remix application supports only classic server side rendering (SSR) and has no static site generation (SSG) or deferred static generation (DSG). At this point a reasonable developer would say: “Hey, SSR used to be cool back in the day, and now it’s not fast enough compared to Jamstack!”
Well, every Remix application offers something that compensates for the delay: SSR happens on the Edge instead of a central server. But what exactly is the Edge? It’s a network with multiple servers in dozens of locations worldwide, and you can have service workers running on the nodes. So, response times get shorter. And it’s also harder to DDoS a website hosted on Edge because the traffic is balanced between the servers.
On the contrary, on a website or web app built on a traditional monolithic architecture, a central server is far from the users, and response times may be disappointing.
Remix has many more perks, like data loaders and progressive enhancement, but for now, let’s just say Remix is cool – it’s simple and fast. More than 8.5K business owners built their websites on Remix.
By the way, Shopify recently acquired the framework, so it now works exceptionally well with eCommerce.
Website examples: AppLift, Avantus, Academind
But as we claimed earlier, you have to couple your Remix app with a headless CMS to make it sing, and here’s why.
The architecture behind Remix
It’s called decoupled, meaning that the front-end is entirely independent (decoupled) from the back-end. The backend may consist of data and serverless functions. There’s such a thing as a headless content management system (CMS) to store your data.
So, what does a headless CMS offer? First, it allows you to store your data conveniently and give it out upon request. In fact, all your data is available via APIs, so many sites and devices can access it.
Then, with a Remix CMS, you can create new data entries and elaborated data models as easily as it used to be in WordPress.
All in all, a headless CMS is like a database coupled with an easy–to–use UI. It helps you manage data and assets – but in the cloud and with swag.
Best CMS for Remix
All CMSs are different: some are older and more established in the market, while others are recently released; some are more suited for developers, while others are more customer-oriented.
Common things to look for in a headless CMS are image optimization, CDN (including image CDN), and easy and configurable APIs to access the data. Luckily, most CMSs offer these to some extent.
Your choice will also depend on the following parameters:
Deployment model: A CMS can be hosted (SaaS) or self-hosted. The first saves you time and effort.
Data center location: A hosted CMS should have servers near your location.
Continuous integration. If you have to include your CMS in the CI process (if there’s some metadata from the CMS impacting the build), make sure the CMS allows for communication with external services via API calls.
SDKs: If there’s a good SDK available for your CMS, the development process will get easier.
Flexibility and integrations: Is the dashboard flexible and customizable enough? Are integrations easy, and is there a wide plugin ecosystem?
As for a Remix CMS, ensure that it has an SDK for React. Also, you’d be happy to know that Remix features REST and GraphQL content delivery API support, so the data exchange protocol won't limit your CMS choice.
So, what are the best headless CMSs for Remix?
DatoCMS
Remix was built with intuitiveness at its core, and so was DatoCMS. Remix is serverless, as it relies on Edge, and so is Dato, as it uses a CDN. This means you can host your front-end and back-end solutions on the same platform, Vercel. This architecture has a lot of perks from which you may benefit.
There’s good lazy loading support: images are re-scaled when needed and instantly previewed as they are loaded. This way, there’s no layout jumping, and all components are responsive, thanks to the image API.
As for SEO, you can combine Remix's meta function and the react-datocms library from Dato. This way, you can quickly integrate your DatoCMS meta tags into any Remix project. In other words, preparing your website for search engine optimization is quick and painless.
Also, Dato is renowned for its cost-effectiveness. For instance, it offers advanced features like granular user permissions for as low as $199.
React Bricks
React Bricks is a CMS that capitalizes on visual customizability of the dashboard. You can create a visually appealing interface in a site builder with “content blocks” (or “bricks”). Each content block comes with its schema static property.
When used with Remix, react Bricks lets you easily define fields as props of your components. You no longer need to waste time accessing a headless CMS to create fields and then come back to code and get the data.
Also, React Bricks optimizes your images, which are then served from a global CDN. Actually, a special cross-platform image component is offered by the React Bricks SDK to simplify image optimization.
The platform also supports localization, making your site suitable for a diverse range of population groups.
React Bricks allows you to deploy build hooks and automate a publishing schedule, ensuring your pages go live without hassle.
Strapi
Strapi’s main features are a flexible content modeling system and customizable APIs. So, you can make the best use of it if your APIs need a custom approach.
Also, Strapi has React support, so it’s no problem to couple it with Remix. And it has an intuitive admin panel and is easy to maintain and deploy.
Strapi may not be your ideal solution if you prefer text-based configurations, as you can specify content types only in the UI.
Additionally, Strapi has a per-admin-user pricing system, so if you plan to have multiple admin users, it may cost you more.
Payload
Even though Payload CMS is a new player on the CMS market, it’s already known for its flexibility: developers can swap any high-level component from the Admin dashboard with their own React component.
Payload's integration with Remix is a remarkably elegant solution, especially if you're running both Payload and Remix on the same Express server. This way, you can make use of Payload's local API from any Remix action or loader, you don’t have to use HTTP for communication between the front and back-end.
Additionally, the local API gives you the ability to enable role-based access control (RBAC) when needed!
Sanity
Sanity CMS is a comprehensive content platform that provides all the essential tools for content management, storage, and retrieval. It’s known for its Sanity Studio which enables you to create unique components for specific use cases, such as social media preview cards.
Content Lake is complementary to Sanity Studio. It’s a single repository for all content assets. There are also integrated tools that help orchestrate complex content workflows, for instance, localized content. In addition, Sanity has extensive plugin support and can easily be tailored to fit your team’s needs.
What’s interesting, Sanity developed its own version of GraphQL called GROQ. But developers will have to go through the configuration options and learn GROQ in order to get the most out of the platform.
Keep in mind that Sanity will take time to set up, as most configs are textual.
Storyblok
Storyblok is for teams who need communication flexibility. The CMS has a feature called Discussions: similarly to Google Docs-style commenting, you can comment on the blocks of data and open discussion threads.
Storyblok is also available for non-technical users: there’s no need to use technical configs or hooks. So, for instance, a team of marketers can communicate in the Storyblok.
Even though Storyblock is a JAMStack-first CMS, you can still set up a Remix boilerplate.
Hygraph
One of Hygraph's main features is its Content Federation. It can simplify your web service/API connection and allow you to pull data from multiple sources and unify them into a single API. With this feature, you can avoid writing custom middleware code and make your system less complex.
Image optimization is allowed by Assets API. There are also APIs for programmatic content management, and convenient localization.
Hygraph is an excellent choice for developers who need the flexibility and power of a GraphQL-based CMS for complex Remix projects.
Pound-for-pound comparison
| - | React integration | Visual Editor | Remix Setup Tutorial | New Column 1 | Documentation | Pricing | GraphQL / REST |
|---|---|---|---|---|---|---|---|
| Dato | + / GraphQL hooks | + / Dynamic layouts | - | + | $0-199+ | + | +/- |
| React Bricks | Is natively integrated with React | Rich and customizable visually | Just use create-reactbricks-app | + | $0 - $429+ | + | +/+ |
| Strapi | + / hooks | + | + | - | $0 - $29+ | + | +/+ |
| Payload | + / hooks | + | + | - | $0-89+ | + | +/+ |
| Sanity | + / hooks | + | + | + | $0-949+ | + | +/- |
| StoryBlok | Integrates with react via a plugin | Simple yet very clear | + | +/- | $0-$2,999+ | + | +/+ |
| Hygraph | + / hooks | + | + | +/- | $0-$799+ | + | +/- |
To sum up
At the end of the day, All CMSs have their pros and cons. But there’s a golden rule: look at your project’s requirements first. Determine its scope, where the users are located, and how much money you can invest in it.
TL; DR:
If you need a high level of visual flexibility for your dashboard, pick React Bricks, Sanity, or Payload. React Bricks offers to modify content blocks visually. Sanity lets you create unique components for different use cases in a UI. In Payload, you can completely replace blocks with custom React components.
If your content team communicates a lot, go for Storyblok. Choose Hygraph or Strapi if you need flexible APIs. Choose Dato if you want a robust CMS with little surprises for a reasonable amount of money.
Top comments (0)