Headless CMS with React.js

Headless CMS is a concept that has been a topic that has been in the limelight for some years now. Essentially this means that a content management system will simply provide a feed of content that is then consumed by clients written JavaScript or other languages.

React in the meanwhile has largely positioned as a solution for building custom applications, rather than a headless client. While the merits and usefulness of a Headless CMS approach can be questioned as you loose a lot of functionality provided by a CMS when going headless, it's still at least a complementary approach Content Management professionals should be versed with.

Many content management solutions currently offer public APIs that are accessible via HTTP. These are commonly referred to as REST APIs, but the term itself is no guarantee of the functionality provided by such and API. This is why a better term is to call them RESTful to describe that they simply follow an architectural model.

An alternative to REST APIs is something called GraphQL. GraphQL is an open standard originally developed by Facebook. It is widely deployed in mobile applications, but is only now rising to the awareness of CMS core developers, such as in the form of the Drupal GraphQL module.

The advantage of the GraphQL approach is that as a standard there are readily built client libraries for it that can be used with various backends. Apollo GraphQL client, for example, offers support for both React.js and Angular 2. This offers true freedom from CMS backends, which should ultimately be the target of a decoupled CMS approach.

REST APIs and Client Libraries

There is a vast amount of CMSes in the wild. WordPress, Drupal and eZ Platform are some popular CMSes that offer REST APIs to their content model. Each of these have a separate REST API that is implemented in their own way. For functionality the Open Source WordPress REST API is in a gridlock, where as the commercial backend powered WordPress Calypso Shell has a proprietary REST API based on WordPress.com.

Drupal 8 on the other hand is a very capable RESTful citizen with quite a bit of backend functionality already accessible via RESTful services framework. The same applies to eZ Platform, which offers a comprehensive API for developers to work with. This includes everything from managing the content types to getting semantic relationships and more from the content repository.

GraphQL is not included in any of the three content management systems by default. eZ Platform and WordPress both offer a client library that helps developers work with: eZ CAPI and WP-API. For Drupal there is nothing official, but community efforts like jDrupal can work. Each of these additional abstraction layers aim to hide the details of the underlying REST API with a JavaScript library.

An example of using the eZ Platform JavaScript Client Library as a part of headless CMS implementation with React.js can be seen below.

A similar approach can be used with Drupal or WordPress, but the capabilities of the client libraries vary case-by-case. For more information on headless content management approache, follow the links below: