What does it mean to implement a “headless CMS”?
It means that you use a CMS tool for creating and editing content and then a custom frontend (perhaps more that one) to display content to the user. This is an alternative to using the presentation layer provided by a monolithic (traditional) CMS or a backend with an associated database. This approach fully seperates the presentation layer (where developers are required in both approaches) from the tools used by business users to manage content and allow each to be better optimized.
Large sites with many pages and multiple content creators that want a high level of performance both from the content and UI/UX perspective should consider this approach. Here are some of the particular benefits:
For Business Users
- The CMS offers the business user a 'no code' experience with familiar drag and drops, dropdown menus and checkboxes.
- You have access to publishing flows with role-based access.
- There is a possibility of mixing CMS’s.
- Depending on the choice of CMS, you have the out of the box ability to promote content between environments (e.g. staging to production) that support full testing before release.
For Developers
- You can use the more common developer tools such as Javascript/React which leads to faster, more efficient development and higher levels of productivity, because of the chosen tools and developer experience using them.
- You have pixel perfect control of the user interface - this is important for responsive views (desktop, tablet, and mobile).
- Easier site-wide updates (for example if you wanted to change the layout of posts for all items).
- A rich ecosystem of frontend libraries (especially for graphs, tables, etc.).
- Increases development output since the React components can be developed independently of the CMS.
- Accessibility testing can be done at a component level, ensuring compliance with ADA and WCAG requirements.
Overall
- There is a clear role separation, which can be helpful between teams.
- It supports multiple presentation layers (web, mobile, voice, etc.).
- Easier integration of other services via APIs into the site (Search engines, RSS feeds, sharing platforms, tracking services).
- Less likely to face obsolescence or migration issues.
There are certain considerations when deciding to go with a headless CMS that we particularly found with WordPress:
- There is a more involved setup process (WordPress, frontend, deployment scripts, etc.), and therefore time and care must be taken.
- One must follow a design-centric process, i.e. designs first and then develop - Note, we recommend this approach regardless of the tech stack chosen.
- It requires more technical skill to do basic items (again, this is good and keeps you out of trouble) while allowing you to do more complex layouts much more easily.
- It requires a local development environment to preview changes (this is usually relatively easy to set up).
- It can lead to a relatively more complex process for content approvals, as in the case of Wordpress you cannot use their preview flow.
One distinctive advantage of the Headless approach with React is the option to build it as a static site with Gatsby. By static, it means that all the content is already part of the site's HTML. This means that there are no API calls in runtime, and therefore:
- Supports increased performance with faster load times, due to reduced network traffic.
- Once built the content is fully public and does not require authentication or security for API calls to the CMS.
- The site content is available for site crawlers, making it very SEO performant.
In addition to Gatsby, if the build is performed in a service like Gatsby cloud, then partial builds are possible. Partial builds accelerate the development and review process since only pages within the site are rebuilt when changes occur.
While considering a CMS platform apart from the performance and strictly technical aspects, you need to ensure that you are comfortable with its user interface, permission handling, and publishing flow. Your content creators and editors are going to be the users of it so you need to make sure you have them try it out and confirm it meets there needs as is as customization of the backend is quite challenging. The headless approach rests on two pillars: content on one hand and UI/UX on the other, and in order to achieve success both need to be sound.
One of the services Ballast Lane Applications provides is a deep dive technical discovery during the first phase of a project. This enables us to evaluate the uniqueness of the project and the client and business needs, to ensure that the right decisions are made with regard to the technical stack. We believe that the headless CMS approach is worth considering if it is the right fit, and we have a full-stack team with the experience to take you through the process.