diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md index 3d031ec5687b2..faf6f88cc0486 100644 --- a/docs/docs/glossary.md +++ b/docs/docs/glossary.md @@ -98,6 +98,10 @@ A database is a structured collection of data or content. Often a [CMS](#cms) wi Decoupling describes the separation of different concerns. With [Gatsby](#gatsby) this most commonly means decoupling the [frontend](#frontend) from the [backend](#backend), like with [Decoupled Drupal](https://dri.es/how-to-decouple-drupal-in-2019) or [Headless WordPress](https://www.smashingmagazine.com/2018/10/headless-wordpress-decoupled/). +### [Decoupled Drupal](/docs/glossary/decoupled-drupal) + +Decoupling refers to the practice of using Drupal as a [headless CMS](#headless-cms). A decoupled Drupal instance functions as a content API that returns JSON for your [frontend](#frontend) to consume. + ### Deploy The process of [building](#build) your website or app and uploading onto a [hosting provider](#hosting). diff --git a/docs/docs/glossary/decoupled-drupal.md b/docs/docs/glossary/decoupled-drupal.md new file mode 100644 index 0000000000000..b797b44b69dfe --- /dev/null +++ b/docs/docs/glossary/decoupled-drupal.md @@ -0,0 +1,35 @@ +--- +title: Decoupled Drupal +disableTableOfContents: true +--- + +Learn what decoupled Drupal means, how it differs from other ways of using Drupal, and how you can use decoupled Drupal with Gatsby. + +## What is Decoupled Drupal? + +_Decoupled Drupal_ is the practice of using Drupal as a [headless CMS](/docs/headless-cms/) for your [JAMstack](/docs/glossary/jamstack/) site. Decoupled Drupal separates the content layer from the presentation layer, so that you can use Drupal with whatever frontend you choose. + +In a tightly coupled Drupal architecture, themes control your site's appearance. 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](https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview) or [JSON:API](https://www.drupal.org/docs/8/modules/jsonapi/api-overview) interfaces. Or you can use [GraphQL](/docs/glossary/graphql) by installing the [GraphQL module](https://www.drupal.org/docs/8/modules/graphql). + +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`](/packages/gatsby-source-drupal/) plugin to your project. As with Gatsby itself, you install the `gatsby-source-drupal` plugin using [npm](/docs/glossary/#npm). + +```shell +npm install --save gatsby-source-drupal +``` + +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 + +- Watch [Kyle Mathews’ presentation on Gatsby + Drupal](https://2017.badcamp.net/session/coding-development/beginner/headless-drupal-building-blazing-fast-websites-reactgatsbyjs) +- Documentation for the [GraphQL Drupal module](https://drupal-graphql.gitbook.io/graphql/) +- [Sourcing from Drupal](/docs/sourcing-from-drupal/) in the Gatsby docs diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index 181164fd5d1cc..6c89b84bc8e9e 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -736,6 +736,8 @@ items: - title: Continuous Deployment link: /docs/glossary/continuous-deployment + - title: Decoupled Drupal + link: /docs/glossary/decoupled-drupal - title: GraphQL link: /docs/glossary/graphql - title: Headless CMS