Skip to main content

Headless CMS + React: Deploy Flexible and Scalable Digital Assets

Posted in Tech on March 20th 2019
author photo
Chief Technology Officer

In part 1 and part 2 of the headless architecture series, we have provided an overview of this advanced architecture - how it works exactly, what benefits it can bring and when we should apply it to our digital projects. Now, we will take one step further into the journey explaining how headless architecture is being used at IT Consultis. Specifically, we will discuss in detail the choices of front-end and back-end, as well as how they integrate together in the headless architecture. As mentioned in the previous article, headless architecture can be implemented on various platforms and devices. To make it simple, in this article, we will explain the most popular integration in our digital projects: Headless CMS with React as the front-end library.

Before diving into the technical details, let’s go through a quick introduction of the two elements: React and CMS.


React - One of the Most Preferred Front-end Libraries

React is an open-source JavaScript library for building user interfaces, more specifically, for single page applications. Officially open-sourced in 2013, React has grown rapidly in the tech community and has been widely adopted by front-end developers around the world. With distinct features like JSX (JavaScript syntax extension), server-side rendering and virtual DOM (document object model), React brings several benefits compared to other front-end technologies, which contribute to the easiness of building an architecture for publishing content on different channels.

The interest in ReactJS has been growing continuously after its launch in 2013. China is the country with the highest level of interest.


Content Management System

A Content management system (CMS) is an application that supports multiple users to create, modify and publish content in a collaborative environment. The basic features of a CMS include content creation, content storage, workflow management, and publishing. With a user-friendly interface, a CMS allows non-technical people to create and manage their content easily without the need of implementing HTML or CSS. Two of the most popular CMS on the market are Drupal and WordPress. Another very important technology which is conceived as an open source platform for e-commerce but incorporated newly added CMS capabilities is Magento. Labeling Magento as only an OMS (order management system) or just a regular CMS would be overly simplistic, as the services it entails are many and the distinction lines are blurry. Drupal, WordPress, and Magento have their specific features to serve determined purposes.


Choosing the Right CMS for Your Project

The correct CMS should be chosen depending on the end goal that we want to achieve, as each CMS is specialized in a different kind of content. At ITC, our choice of CMS must consider the following factors:

1. Open source vs. Closed source CMS

A CMS can be open source or closed source, each of which has its own advantages. A closed source CMS is owned and developed privately, cannot be modified and usually involves extra costs; while an open source CMS is free or requires very low costs, and it is built and updated by a community of developers. Despite the dedicated services that closed source CMS can provide, open source CMS such as Drupal and WordPress are much more flexible, which usually makes it our first choice at ITC.

2. API integration - Frontend

A CMS with an open API allows you to build digital assets that are detached from their content management tools and are integrated via the API, which is the headless architecture being discussed. The interaction between the frontend and the API provided is slightly different among CMSs and needs to be considered. For example, Drupal 8 is using the JSON-API query standard. WordPress and other CMS are all using different JSON objects.

3. Optimized plugins or extensions

When dealing with CMS, we have to choose carefully plugins or extensions:

  • Plugins that only return HTML should be avoided as they are breaking the principle of rendering the front-end code on the client device and are only compatible with certain end applications.
  • Plugins which have script tags injected into the page directly should also be avoided since the supplied scripts will generally conflict with the way React is rendering the DOM.
  • Plugins that have native API endpoints support are more favorable than others since they are designed with this principle in mind

What Are the Benefits of React - CMS Integration?

1. React provides you with several advantages

React has been a fruitful front-end technology at ITC because of its great benefits, especially when implementing headless architecture for digital projects. We have a dedicated article discussing the benefits of React in website and app development, which can be summarized as follows:

  • Thanks to virtual DOM, websites using React are blazing fast despite the huge amount of dynamic contents.
  • React uses a component-based structure, which is highly reusable, scalable and easy to maintain.
  • React in companion with JSX helps to standardize your codebase, making it easier to organize and refactor in the long run
  • React has a large ecosystem and support from the technical experts at Facebook.

Apart from React, VueJS is also a strong candidate for implementing this integration. VueJS is a Javascript framework with some similar advantages as ReactJS that starts to gain traction recently despite much smaller market share.


2. Front-end and back-end can be developed in parallel

An additional benefit of React - CMS integration is that with this architecture, our front-end and back-end developers are able to work separately and communicate with each other about the API endpoints. To enable parallel development of front-end and back-end, the API documentation can be prepared in advance and adapted to changes during the development.

Parallel development between front-end and back-end connected through API

By now you should be all clear about React, CMS and their roles in the headless architecture, let’s go further then and see how the integration works. Stay focused.


How Does This All Fit Together?

To better understand how everything works, we have to understand what happens when a user visits the website. When the user opens the website’s URL, the Web Server will receive the request and send the code to the user, the react code will run in the browser and analyze the URL using react-router to decide which part of the application should be displayed. Then, the application will send appropriate API requests to the CMS to gather the content needed to properly display this section of the site and finally, render the content.

The CMS will send back a response to the frontend containing the data that define what a page should be composed of, in other words, which template a page should use. At this point, React can render the content of a page which consists of many different content types: user information, article content, sharing information, comments, etc. These content types are treated as separate things and different kind of React components will be developed to render those content types.


When Do We Use This Integration at ITC?

At ITC, we use the headless CMS with React integration for medium to large projects that require the development of a lot of features. It is the component-based architecture that allows us to deal with larger projects with utmost accuracy. Apart from better integrating single features independently, the architecture allows us to reuse them efficiently.


Bonus: The Importance of SEO

Last but not least, SEO is a very important aspect of a complete website. In this case, we have React helmet, which is a package that can help set meta tags, allowing React applications to adapt to custom SEO needs for every section of the website. SEO is a powerful tool for the success of any website and investing in it would provide an exceptional return on investment for your headless CMS. More details on SEO best practices for React website can be found in this article.


Summary

Managing content can be a tedious job, but a headless CMS can do the wonder by eliminating the hassle that slows down the focus of developers on consumer experience design. With the great benefits of React - CMS integration, a headless architecture can be the best option for your upcoming digital project, especially when being managed by technical experts in the field.

At ITC, we have developers with diverse skills across multiple technical development technologies. Our hands-on experience in headless architecture allows us to understand the opportunities and complexities involved in carrying out a great project. Check out our Project Digest for some cool projects finalized leveraging Headless architecture!



About the authors