Drupal, Gatsby, Next and friends
Tags: drupal, gatsby, nextjs, decoupled
Published: 2021-04-20 19:33:53

_Originally posted on [colorfield.be](https://colorfield.be/blog/drupal-gatsby-next-and-friends)_

Gatsby and Next are both based on React and become more and more adopted, far beyond the Drupal sphere.  
Choosing a decoupled solution comes with a resource cost though (budget, team-wise), and might not be the right fit for every project.

We will not go too much into technical details here, and briefly cover these topics: why not just Drupal Twig and jQuery, when to use a Drupal backend or frontend, and how can we integrate it with Gatsby or Next today.

## 1\. Why Gatsby or Next and not Drupal Twig with jQuery

What brings decoupled solutions that Drupal could not offer?

Modern JS frameworks are fast and secure by design especially while using SSG (Static Site Generator). No matter the rendering method, the Drupal API can be accessed by a reverse proxy to increase security and reduce the load on the backend.

It opens the possibility to outsource frontend hosting to rather cheap platforms. There is a large variety nowadays like Gatsby Cloud, Vercel, Netlify, or GitHub pages that offer out-of-the-box a deployment pipeline, and most of the time a CDN. It will reduce server provisioning, maintenance, and security risks.

Static generation removes caching complexity as Drupal frontend caching can be ignored in this case. Cache tags/contexts for invalidation can be rather complex for common cases like progressive decoupling or a site that has per region and language content. Also, Varnish is not a must-have when using SSG, so it can simplify the infrastructure.

Some considerations, among others:

*   A way better DX: jQuery in 2021 is not so awesome when we have EcmaScript 6+ and TypeScript available for the whole frontend stack
*   Schema stitching is quite powerful when multiple sources are needed
*   React / Node stack is popular, so a larger developer base can join the project and team
*   Drupal might not even be needed for smaller projects: decoupled content services like Prismic, Contentful, Cosmic, Sanity, or Wordpress can perfectly fit. Some platforms are also providing their own CMS (e.g. Netlify)

With CMS as a service, how can Drupal stay relevant compared to fully decoupled SaaS solutions with excellent developer and adopter experience?

## 2\. When shall we use a Drupal backend (instead of any other decoupled CMS)

The following non exhaustive cases could lead to the use of Drupal for the backend:

*   A rather complex content model
*   A requirement for workflows (content moderation) or workspaces
*   Translation systems
    *   Drupal 8 and 9 are coming with a mature translation system for content, locale, and configuration
    *   The [TMGMT](https://www.drupal.org/project/tmgmt) module integrates with many translation providers (e.g. DeepL, Google or Supertext)
*   Media management: Drupal is powerful when it is about extending / exposing / searching internal or external media
*   When a high level of backend customization is needed

Also, I've heard so many times that Drupal editor experience was far below solutions like Wordpress.  
Well, Wordpress is aimed to stay simple, so no multilingual and content modeling (e.g. field builder) features out of the box means also less to expose on the UI.  
My opinion could be biased, but the Media Library is there for a while now, and with the rise of Claro, [Gin](https://www.drupal.org/project/gin), and [Gutenberg](https://www.drupal.org/project/gutenberg), Drupal might be one of the best in class open source CMS regarding editorial experience.

![Drupal Gutenberg editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nndrd6quwe5x9c2bz6di.png)

![Gin Drupal admin theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfztcq95pc8yqhtrggvy.png)

## 3\. When shall we use a Drupal frontend

The project size shouldn't matter here, it's perfectly valid to build a decoupled blog, portfolio or just keep it as a standalone Drupal solution (or also use progressive/soft decoupling).

*   Obviously, when the team is familiar with Drupal frontend specificities like template suggestions or preprocess hooks, and the stack is not already including a decoupled framework
*   When Drupal caching/performance solutions (page cache, big pipe, Varnish) can be used in production
*   When using many Webforms. It's possible to solve this with e.g. [Webform JSON schema](https://www.drupal.org/project/webform_jsonschema) but can be rather complex for smaller projects
*   If the application exposes many content edit forms. In this case, Drupal also provides the heavy lifting out of the box. A possible way to go is to do the MVP or proof of concept in Drupal then progressively adopt a decoupled solution if it is needed
*   If the application already relies on many views
*   Some integrations are harder to implement, as the menu system or translations

## 4\. React and Vue

Why not Vue and [Gridsome](https://gridsome.org/)?

It could be a matter of preference. The React ecosystem has more integration for really common use cases. Just to name the most wanted: Multilingual and [Forms](https://stackshare.io/stackups/formik-vs-vue-formulate) systems are both getting a larger support and documentation of common libraries.

## 5\. Gatsby and Next

Also, can be a matter of preference, but should not be chosen based on the backend, as both can source content from basically any backend. Next is still simpler for the routing system and shines when it comes to having SSR and SSG in the same project.

There are plenty of resources that are comparing both, here are a few of them:

*   [Comparison of Gatsby vs Next.js (Gatsby)](https://www.gatsbyjs.com/features/jamstack/gatsby-vs-nextjs)
*   [Gatsby.JS vs Next.JS — Which one to choose when?](https://www.solutelabs.com/blog/gatsby-js-vs-next-js-which-one-to-choose-when)
*   [Next.js vs. GatsbyJS: comparing two React frameworks](https://blog.logrocket.com/next-js-vs-gatsbyjs-a-developers-perspective/)

## 6\. SSR and SSG

As mentioned above, it can make sense to mix SSR with SSG. Both [Gatsby](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) and [Next](https://nextjs.org/docs/basic-features/typescript#static-generation-and-server-side-rendering) have SSG and SSR, but Gatsby is mostly used with SSG.

#### SSR (Server Side Rendering)

*   Lower level of entry, less boilerplate code
*   Pain points: rehydration, isomorphism, caching - see [The Cost Of Client-side Rehydration (Addy Osmany)](https://addyosmani.com/blog/rehydration/)
*   The time to first byte is slower

#### SSG (Static Site Generation)

*   It's static, so blazing fast
*   Pain points could be: [incremental builds](https://www.gatsbyjs.com/blog/gatsby-v3/) time
*   Pagination and multilingual routes are generated at build time

Read more on [Next.js: Should I use SSR or SSG?](https://www.netlify.com/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/) by Cassidy Williams

## 7\. Integration of Gatsby and Next with Drupal

### Gatsby

The [Gatsby module](https://www.drupal.org/project/gatsby) leverages preview and integration with incremental builds.

To source content, both JSON:API and GraphQL modules will end up in a GraphQL API on Gatsby. See [Sourcing from Drupal](https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-drupal/) and [Gatsby source plugins](https://www.gatsbyjs.com/plugins/gatsby-source-drupal-graphql/?=gatsby-source) for other sources than Drupal.

![GraphiQL Gatsby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jppoavl8c0dii0qs8lp9.png)

There are 2 ways to source content from Drupal:

#### JSON:API

*   In core, can be completed with [JSON:API extras](https://www.drupal.org/project/jsonapi_extras) and [Consumer Image Styles](https://www.drupal.org/project/consumer_image_styles)
*   Integrates with [Gatsby source plugin for JSON:API](https://www.gatsbyjs.com/plugins/gatsby-source-drupal/)

#### GraphQL

*   Is a [contributed module](https://www.drupal.org/project/graphql)
*   GraphQL v3 is a bit like JSON:API regarding the setup, and aims to be a zero-config, with schema out of the box. It exposes everything, Drupalisms included. Persisted queries can bring some limitation (e.g. remove the permission to execute arbitrary queries)
*   GraphQL v4 requires you to write your own schema. The advantages are a more readable, predictable API for frontenders that might not know about Drupal. Also, it opens more possibilities regarding processing.
*   Integrates with [Gatsby source plugin for GraphQL](https://www.gatsbyjs.com/plugins/gatsby-source-drupal-graphql/)

### Next

The person that is behind the [Next Drupal module](https://www.drupal.org/project/next) also provides a demo hosted on Vercel, with some [examples](https://github.com/arshad/next-drupal/tree/master/examples). Resources regarding the integration of Drupal with Next can be found on [https://next-drupal.org/](https://next-drupal.org/).

## 8\. Learning resources

### Wes Bos courses

Perhaps the fastest way to have good coverage of the full stack.

*   [Advanced React and GraphQL](https://advancedreact.com/) covers Next with SSR, with Keystone.js for the backend
*   [Master Gatsby](https://mastergatsby.com/) with Sanity.io for the backend

### Support, discuss: Drupal Slack

*   [#gatsby](https://drupal.slack.com/archives/CDQC1MDU6)
*   [#graphql](https://drupal.slack.com/archives/C6LMJ0ZAT)
*   [#nextjs](https://drupal.slack.com/archives/C01E36BMU72)

### Examples

*   [Gatsby with Drupal](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal)
*   [Next integration](https://github.com/vercel/next.js/tree/canary/examples) (includes various decoupled CMS)

Decoupled solutions are out there for a few years now and become more and more mature. If they do not find a direct match in your projects,  just like learning a new language every year, they are opening perspectives and remain time well invested, even if this just opens new ways to think in Drupal.  

_Photo by [Ju Guan](https://unsplash.com/@guanju223?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/astronaut?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_