Tim Ryan Development Logo Atom

Choosing the Right Headless CMS for Your Next Gatsby Project

Thanks for sharing:

CMS Options for a Gatsby Site are Plentiful

Posted April 4, 2021 in Gatsby

So you’ve made the (wise) decision to build your next website or online store with Gatsby.js. Now you have to figure out how to manage and deliver your content. As of this writing, there are over 85 different headless CMS options available. How do you even begin wading through so many options?

Thankfully, we can narrow the field with a few standard requirements for our chosen headless CMS platform.

CMS Requirements

While every project has its specific requirements and priorities, I would argue that there are a few features that any Gatsby CMS should deliver:

Flexibility: Any headless CMS should empower its developers to customize and deliver content models that can adapt to a project’s specific needs.

Gatsby Support: While you can configure Gatsby to work with virtually any content API, a few platforms provide Gatsby plugins and documentation that simplify the development process. Specifically, Gatsby currently offers incremental build support for a select group of content systems.

Active Community: We want a headless CMS that will be around next year. While there are never any guarantees in the tech world, an active development community offers hope that a platform has staying power and will grow alongside new technologies.

The Contenders

One could certainly argue for a more extensive list, but we’re going to compare Sanity,Netlify CMS, DatoCMS, Contentful, and WordPress. Our list provides at least one acceptable option for virtually any Gatsby deployment. Whether you’re building a small business website, an enterprise-level application, or a Jamstack e-commerce store, you could feel confident using one or more of our chosen platforms.

Except for Netlify CMS, each of our chosen contenders supports Gatsby’s incremental builds. Perhaps the most significant drawback to creating a large Gatsby site is the build time between updates. Thankfully, incremental builds provide the first step toward solving this problem. With incremental builds, Gatsby only re-renders the portions of your site impacted by updated content. Selectively building out recently updated pages rather than the entire website can save considerable development time and money.

Sanity

Sanity provides a truly unique offering in a crowded CMS marketplace. Their open-source Sanity Studio allows developers to go beyond creating custom content and document types. The JavaScript-based studio platform empowers developers to create custom plugins, dashboard elements, content layouts, production workflows, and more. You can host the studio yourself or let Sanity serve your studio at no additional cost.

Sanity’s API uses Graph-Relational Object Queries (GROQ), a proprietary language for data queries, but you can also set up a GraphQL server using the Sanity command-line tool. Sanity stores rich content using Portable Text, a schema that allows for unlimited flexibility in building blocks of rich content.

The Sanity Studio connects to the Sanity API and Content Delivery Network (CDN). Gatsby’s Sanity plugin makes it easy to connect your website to its content, and you can seamlessly serve Gatsby’s ‘blur-up’ images from Sanity’s CDN.

Sanity provides a generous free project tier that gives your project 100K API requests, 500K CDN requests, and 10GB bandwidth every month. From there, you pay based on what you use! Since prices are set at the project level rather than by the organization, developers have the freedom to experiment or work with multiple content sets without breaking the bank.

Because of its affordability and flexibility, Sanity is my choice for virtually any project. It can host content for a single website or efficiently deliver data for an enterprise-level organization.

Sanity Pros

Sanity provides developers with an open-source customizable content studio that connects to the Sanity API.

Project-level pricing offers a generous free tier that lets you pay based on actual use after your project exceeds initial thresholds.

Sanity provides thorough documentation and easy-to-use Gatsby source plugins.

Sanity uses a simple-to-use Graphical-Oriented GROC query language and Portable Text.

The Gatsby source plugin allows for incremental site builds.

Sanity Cons

There is a minimal learning curve to set up a custom studio deployment. Since, like Gatsby, the Sanity Studio is built using Node.js, this shouldn’t be too much of an issue for Gatsby developers.

Sanity’s GROQ queries and Portable Text take some getting used to even if the benefits outweigh the extra effort.

Netlify CMS

Netlify CMS (not to be confused with Netlify) is an open-source content solution built using a Git workflow. Unlike the other systems on this list, it doesn’t feed data into your project through an API. Instead, Netlify CMS stores and updates content within your Gatsby project using a single page React app and markdown files.

The Netlify CMS admin app loads from the same server as your Gatsby site deployment. As you make changes to your content, Netlify CMS pushes your content to the site’s central Git repository. Depending on your deployment settings, this push could automatically trigger a site rebuild.

With some extra code, you can use existing Gatsby components to provide live page previews within the content app. Developing site components that can render using both the preview source data and the saved markdown files presents a challenge but allows for a virtually seamless content creation experience.

Netlify CMS is a solid choice for building a small website when you don’t want to invest in an API-based solution. However, it’s helpful to think through any extensibility issues that could arise as the site grows or changes.

Netlify CMS Pros

Netlify CMS is open-source and free to use. Since the CMS stores data in your Gatsby site’s Git repository, you won’t have to pay for CMS hosting or API fees.

The content app delivers customizable previews using existing site components.

Netlify CMS works well (for obvious reasons) with Netlify’s hosting and identity management systems.

Netlify CMS Cons

Netlify CMS is not ideal for larger sites. Since the site code is stored and served with content, dealing with large amounts of data could become challenging.

To effectively use Netlify CMS, developers will have to invest time learning its systems and workflows. Delivering content previews adds an extra layer of complexity to site components.

Netlify CMS only allows for minimal separation of content and design.

There is no simple way to serve content to other applications.

DatoCMS

An exploding number of headless CMS platforms employ the web-based model used by DatoCMS. Such web-based interfaces allow developers to create content models without building out custom content platforms (i.e., Sanity). However, this ease-of-use comes with the tradeoff of limited flexibility and increased expense.

Despite not offering the flexibility of a custom content studio, DatoCMS allows users to build a virtually unlimited variety of content models. DatoCMS provides a free development tier with up to 10GB of bandwidth, 100K API calls, and three projects. Unfortunately, the standard plan only allows for one user, three projects, and 300 records. Most projects would eventually require at least the team-level tier that starts at about $150 for a single project.

DatoCMS integrates well with Gatsby, includes a CDN, and allows for incremental builds. Along with their flexible pricing model, these features make DatoCMS an ideal solution for small-to-medium sized projects.

DatoCMS Pros

DatoCMS provides a web-based content creation platform that’s easy to set up and manage.

A reasonably-priced team tier is available once your project exceeds the free plan’s allocated usage.

DatoCMS Cons

DatoCMS’s web interface does not offer the flexibility of a Sanity-style content platform.

The limited free tier could make launching experimental or small projects more costly than would be desired.

Contentful

If there were an 800-pound gorilla in the CMS world, Contentful would find its place at the top of the mountain. Like DatoCMS, Contentful is a web-based platform. It makes building content models easy, and its rich-text editor leads the industry.

A critical distinction between Contentful and other web-based headless CMS systems is that Contentful designed its platform primarily for enterprise users. Contentful provides a content hierarchy where organizations consist of members with different sets of roles or permissions who use, develop, and create content. Organizations separate content into spaces based on content categories and function.

Contentful offers a relatively generous free tier that will host 25K records and delivers 2 million API calls and .75TB of bandwidth each month. This free tier allows for more usage than most competitor products, but you have to upgrade to Team pricing once you exceed free tier limits. The Team plan starts at $489/mo.

Contentful integrates well with Gatsby and allows for incremental builds. It’s an excellent choice for large organizations and enterprise users but might not be a good fit for smaller companies.

Contentful Pros

Contentful is the industry standard for large organizations and enterprise users.

It provides one of the most generous free tiers among content APIs.

Organizations can break their members into a variety of roles and categorize their content into spaces.

It provides an easy-to-use web-based content studio.

Contentful’s plugin allows for incremental builds.

Contentful Cons

Contentful does not offer the flexibility of a customizable content studio.

Once an organization exceeds the free tier limits, its costs increase significantly.

WordPress

No discussion of content platforms would be complete without including WordPress. While building a Gatsby site using WordPress as a content API is possible, it is not without its challenges. In my opinion, the pre-Gutenberg version of WordPress would provide a more efficient headless API than the current rendition.

There are multiple ways to connect a WordPress deployment to Gatsby’s GraphQL build process. In most cases, Gutenberg blocks are either rendered directly to the Gatsby build or deconstructed as part of Gatsby’s compilation process. Developers may also face challenges with custom blocks and in-content images.

One might recommend using WordPress as a headless CMS if your organization already has a content team that prefers using the WordPress backend. Gatsby does support incremental builds for WordPress (and for Drupal).

WordPress Pros

WordPress is a viable option for organizations that are comfortable with their existing WordPress content workflow but want to upgrade to a Gatsby frontend.

WordPress is open-source and inexpensive to deploy.

Gatsby provides a WordPress source plugin and allows for incremental builds.

WordPress Cons

Rendering Gutenberg content blocks can be a challenge.

WordPress is transitioning to more of a page builder platform and less of a content API.

Custom blocks can create challenges when implemented with Gatsby.

Honorable Mention

A few other popular headless CMS systems are certainly worth keeping an eye on. While I didn’t include these platforms in my original CMS options list, they could see bright futures with Gatsby developers.

GraphCMS is a GraphQL-based content management system. Since Gatsby also relies on GraphQL, GraphCMS feels like a natural fit. The GraphCMS platform is project-based and easy to use. It even offers a generous free pricing tier. Unfortunately, Gatsby doesn’t currently provide incremental build support for GraphCMS. When incremental builds are supported, GraphCMS would immediately jump to the top of my web-based platform list.

Cosmic offers a different twist on the web-based content platform. The content model structure follows the classic WordPress model in that content objects include standard slug and content fields along with optional meta-data content. You can also automatically add localization to object types. Cosmic charges less than DatoCMS or Contentful but doesn’t provide for the same level of customization. Gatsby does support incremental builds through the Cosmic platform.

Strapi is an open-source and self-hosted CMS platform that compares well against web-based platforms such as DatoCMS and Contentful. Gatsby does not currently provide incremental build support for Strapi.

Summary

While there are many options to choose from when planning for Gatsby content API, each platform offers unique pros and cons. My pick across the board is Sanity for its competitive pricing and flexibility. If you’re a smaller organization looking for a web-based CMS, DatoCMS or GraphCMS might be right for you. Contentful remains the standard-bearer for enterprise-level organizations, and WordPress might be ideal for a company looking to upgrade its WordPress frontend without disrupting content creation. If you have a small site and don’t want to deal with a content API, Netlify CMS might be worth exploring.

That’s my list. What do you think? Was I too hard on your favorite CMS, or did I ignore it altogether? Let me know in the comments.

Tim Ryan Development
717 Green Valley Road, Guilford Hills
Suite 200
Greensboro, NC 27408
(336) 455-8956
© 2021 Zilifre, LLC