Drupal is a well-rounded CMS, it manages both the back-end content management as well as rendering the content in the front-end, and it does so with great flexibility and a good user-experience.

Starting with Drupal 8, an “API-first” architecture was introduced, with REST API being in core Drupal, and this approach saw so much interest and was continuously improved upon  and it allowed developers to build websites using Drupal on the backend for its great content management abilities, and a front-end JS framework (React JS, Angular JS, Vue JS..) to communicate using APIs and render the content using JavaScript and this approach is called a “Headless” or “Decoupled” architecture.

There are different ways to implement a decoupled solution with Drupal, and it mainly depends on the level of control being handed to the frontend as opposed to the default Drupal approach, we can split these architectures to 2 types, Progressive Decoupling approach and a Fully decoupled approach.

Progressive Decoupling approach, is an approach closer to a typical Drupal setup, where you preserve the Drupal Theme layer. The initial server request is managed by Drupal, however, you can embed interactive elements built in JavaScript that use the data provided by Drupal’s REST API and create a highly interactive page/section.

The advantage of using such an architecture is that the user benefits from certain functionalities specific to Drupal like error handling, security, layout management, etc.

Fully decoupled approach, this is an approach where Drupal’s presentation layer is completely replaced with a client-side framework. In this case, Drupal is used as a storage of content and data that will be consumed by the front-end framework of choice. Such an architecture makes it possible to benefit from the user experience offered by other technologies instead of theming from Drupal and can result in highly-interactive, app-like websites.