What Is Headless or Decoupled Drupal?

Decoupled Drupal is the practice of using Drupal as a headless CMS for your Jamstack site. Decoupled Drupal separates the content layer from the presentation layer, so that you can use Drupal, as the content management systems, with whatever frontend you choose.

In a tightly coupled Drupal architecture, themes control your site’s appearance using PHP and bit of Drupal DSL. A theme is a collection of HTML-based template files, each of which manages the layout for a particular Drupal node or content type.

When a visitor requests a URL, Drupal retrieves the requested content from the database and merges it with the appropriate template to create an HTML response. The downside of such an architecture is that your site’s content is only available as HTML. HTML limits where and how your content can be used.

In a decoupled architecture, Drupal’s only responsibility is content. Rather than returning HTML documents, Drupal returns JSON from its REST or JSON:API interfaces. Or you can use GraphQL by installing the GraphQL module.

A decoupled Drupal architecture offers two key advantages over a tightly coupled one.

  • You can use one content management system to serve multiple frontends — for example, your Gatsby site, your mobile application, and your smart TV application.
  • You can develop, change, and upgrade the frontend and backend independently of each other. Upgrading Drupal doesn’t require you to modify your site’s appearance.

To use Drupal as a content source for Gatsby, add the gatsby-source-drupal plugin to your project. As with Gatsby itself, you install the gatsby-source-drupal plugin using npm.

A decoupled Drupal architecture lets you use the full power of Drupal’s content management tools while gaining the performance advantages of a static Gatsby site.

Learn more about decoupled Drupal

Edit this page on GitHub