Add a headless CMS to Astro in 3 easy steps

Building React Components from headless CMS markdown

How to use Next.js Image with a headless CMS

How to use Next.js Preview Mode with the Cosmic headless CMS

Creating a Developer Portfolio with Next.js and Cosmic

<p>With a variety of <a href="https://www.cosmicjs.com/headless-cms">headless CMS</a> choices out there, how do you know which one to pick? Image hosting, content writing experience, and developer experience are all things to consider during this tedious process.</p><p>In this article, we&rsquo;re going to dive into the many factors to consider when choosing a headless CMS. If you&rsquo;re new to headless CMS, let this be your guide to confidently making the best choice for your project and team needs.</p><h2>The evolution of CMS</h2><p>Founded in 1982, <a href="https://en.wikipedia.org/wiki/FileNet">FileNet</a> was the creator of software to help enterprises manage their content and business processes. Although this software is much different from a modern CMS, it could be coined as the very first CMS <em>ever created</em>.</p><p>About two decades later came the rise of the monolithic CMS. WordPress and Drupal would take a huge slice of the pie in this market, with WordPress being one of the most used CMS in the world. In the year 2022, there are about <a href="https://www.manaferra.com/wordpress-statistics/#:~:text=The%20number%20of%20WordPress%20websites,the%20total%20number%20of%20websites">835 million WordPress sites</a> currently active on the internet.</p><p>With the rising demand for omnichannel content delivery, headless CMS entered the scene with a solution that would allow content to be stored in a single content management system and delivered to several mediums using an API. A headless CMS cuts the
coupling between the presentation and content layers, allowing you to code your user interface and fetch content directly to your website or application.</p><h2>Content creation experience</h2><p>Organization and editing experience should be important factors when choosing a headless CMS. You have to consider what kind of user experience your content creators, marketing team, or editors should have.</p><ul><li><a href="https://docs.cosmicjs.com/api-reference/object-types">Content Types</a></li><li>Writing experience (<a href="https://www.cosmicjs.com/features/rich-text-multimedia">Rich text</a> and <a href="https://www.cosmicjs.com/blog/markdown-metafield-now-available">markdown</a>)</li><li><a href="https://www.cosmicjs.com/features/media-management">Managing media</a></li></ul><p>A great headless CMS empowers the user (of the CMS), providing them with many features and a pleasant content creation experience. An organized dashboard, limitless content types and content creation capabilities, and versioning/scheduling features are
all things that a great headless CMS is capable of.</p><h3>Media management capabilities</h3><p>Images on the web are <em>heavy</em>. Choosing a CMS with built-in media management and <a href="https://www.cosmicjs.com/knowledge-base/image-api-and-cdn">image optimization</a> is crucial. In the modern web, images make up the <a href="https://almanac.httparchive.org/en/2021/page-weight#fig-5">largest number of requests on a web page</a>.</p><p>Many CMSes come optimized with an <a href="https://www.cosmicjs.com/image-cdn">Image CDN</a> service, so lots of the heavy lifting is done for the developer. If you care about user experience, delivering optimized images will ensure that users around the globe are getting the best user experience when visiting your site.</p><p>When choosing a headless CMS, it&rsquo;s important to consider how media is managed in the dashboard and under the hood. Images, videos, and documents are all things that deserve some optimization out of the box. It would be a bit of a pain to have to
access your media from another service other than your headless CMS.</p><p>Consider the experience your content creators and editors will endure. They will be the ones constantly uploading and accessing media within the dashboard, and a good headless CMS will provide them with a smooth and understandable process.</p><h2>Developer experience</h2><p>Whether you are a developer or not, a developer will be needed to implement the headless CMS into your codebase. A great headless CMS should provide them with educational <a href="https://www.cosmicjs.com/articles">resources</a>, code examples, and templates
to lower the learning curve.</p><ul><li><a href="https://www.cosmicjs.com/features/rest-graphql-apis">RESTful and GraphQL APIs</a></li><li><a href="https://github.com/cosmicjs/cosmicjs-node">SDKs</a></li><li><a href="https://docs.cosmicjs.com/">Documentation</a> and <a href="https://docs.cosmicjs.com/examples/basic-queries">examples</a></li><li>Integration with web frameworks (like <a href="https://www.cosmicjs.com/react-cms">React</a>)</li><li>Pre-built <a href="https://www.cosmicjs.com/apps">application templates</a></li></ul><p>While the initial time spent integrating a headless CMS into your application or website may be higher than a monolithic CMS, great documentation, how-to guides, SDKs, and pre-coded templates will speed up this process for the developer. Don&rsquo;t hesitate
to explore the website for the headless CMS you are inquiring on. Are there plenty of articles and blog posts relating to headless CMS topics; &ldquo;how-to&rdquo; guides? Is there in-depth documentation? Can you read it from a technical perspective and
understand it from a non-technical perspective? The value is not just in the product itself, but also in the ecosystem of resources supporting it.</p><p>The next type of developer consideration is the integration capabilities. Many headless CMSes take on an <a href="https://tyk.io/blog/res-what-is-api-first/">API-first</a> approach, improving the underlying functionality of the CMS. Developers love having options, and having a choice between <a href="https://www.cosmicjs.com/features/rest-graphql-apis">Rest and GraphQL APIs</a> could be a make-or-break factor. Furthermore, having an <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">NPM module</a> is highly beneficial, making it easier to connect your code with your content, fetch data, perform CRUD operations, and handle file uploads. Being able to <code>npm install</code> a package provided by the headless CMS makes it that much easier to connect to the API.</p><p>Community is key. Look for an official Slack or Discord channel, as it will have developers that actually work on the headless CMS itself. They&rsquo;re there to help answer questions, walk you through problems, and consider feature integrations based
on feedback. The community will also have developers using the CMS for work, personal projects, and freelance. If developers enjoy using the headless CMS, chances are they&rsquo;re happy to help others when they run into an issue as well. This is a sign
of a healthy, active community that uses the CMS frequently.</p><h3>Architecture and support</h3><p>Ever implement a software product or service into your application, only to get stuck on a particular step of the process or find that a crucial feature is missing? This could be the make-or-break factor of your decision. Having great support from the
headless CMS provider is important.</p><p>Good support means direct conversation with the engineering team, guidance on the implementation of the headless CMS, and sometimes features built specifically for your company&rsquo;s case.</p><ul><li>Maintenance and scalability</li><li>Security</li><li>Customer support</li><li>Feature updates</li></ul><h3>Composability and content modeling</h3><p>When considering a headless CMS as a content management system, people often consider the composability aspect. A headless CMS simply does not care how you structure your content. It is entirely up to you how you build your landing pages, blog posts,
and menus. A monolithic CMS like WordPress or a website builder like Squarespace often lays out your content structure for you, whereas a headless CMS gives you the individual building blocks themselves.</p><p>Text fields, number inputs, radio switches, markdown editors, JSON blocks&hellip; the list goes on. Having a variety of <a href="https://docs.cosmicjs.com/api-reference/metafields">metafields</a> to choose from equals freedom. Constructing a cohesive experience for your content is an art in itself, and a great headless CMS allows you to be creative in this process.</p><p>When crafting your content model, content relationships are like superpowers. When selecting a headless CMS, take note if it provides the capability to create content relationships. This can streamline content reusability and related content fetching.</p><p>The API should make it possible to access related content easily. When fetching one content type, it should provide any related data without any additional API requests or technical challenges. For example, when fetching a single blog post it should also be possible to provide the related author and category information.</p><h2>Team workflows</h2><p>With any content management system, it&rsquo;s important to pay attention to the collaboration aspect. When you have a team working within a headless CMS, you will often have an array of roles like developers, editors, and administrators. Sometimes, you
may even need to simply share content externally.</p><p>Different tiers of permissions will be needed for different roles. For example, a manager should get access to several editing properties in the project itself. Creating new groups of content and setting the template for what content will be
accepted within that piece of content. An editor should really just be able to do simple tasks related to editing the actual content within the content. Editing copy and filling in input fields should suffice.</p><p>Some CMS solutions are innovating on content approval workflows, incorporating a Git-like process for branching and merging numerous pieces of content. Changes are made within a CMS and the author of the changes saves them to a <a href="https://www.cosmicjs.com/blog/introducing-merge-requests">merge request</a>.
Other members of the project can view the changes (the before and after), reviewing and iterating as needed. Once approved, the changes are then &lsquo;merged&rsquo; into the production &lsquo;branch&rsquo; of the content.</p><p>Another great feature is preview mode. Preview mode in a headless CMS will allow content updates to be previewed before changes go live. With this feature, you make changes in your headless CMS, save them as a draft, then are able to share a preview link with anyone. Anyone with the link will be able to access draft content. <a href="https://www.cosmicjs.com/articles/how-to-use-nextjs-preview-mode-with-the-cosmic-headless-cms">Using Next.js preview mode with a headless CMS</a>, you can achieve this through <a href="https://nextjs.org/learn/basics/api-routes">Next.js API routes</a>.</p><p>Small teams may not feel the effect of these features, though when it comes to larger teams of ten or even hundreds with access to a single project, they will be felt. These workflow features are crucial for high-performance teams prioritizing content velocity.</p><h2>In conclusion</h2><p>The market of headless CMS is plentiful, and this is a good thing. With many choices comes many things to consider, and with the right direction and information, you should have no problem finding the right headless CMS for your project. After all, one
size does not fit all, and you should test around a bit and choose the solution you enjoy using the most.</p><p>I hope this guide gave you a better understanding of the foundational features of a headless CMS and what to look for when choosing one.</p>

Blogs by Stefan Kudla

Start building today

Blogs by Stefan Kudla

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today