Blazing fast websites with Gatsby and Decoupling Drupal

F. Scott Fitzgerald’s ultra-modernist novel about jazz-age America, The Great Gatsby, has been regarded as one of the best books ever written. It has fascinated the readers by creating a sort of aftermath of wonder. Enter the digital age, there is another ‘Gatsby’ which is getting a wondrous reception and is in the reckoning for being a great tool when it comes to web development.

The emergence of the static site generation, where views are rendered in advance for mitigating the burden on APIs and other backend systems, is proving to be a remarkable solution for great web performance. Gatsby, as a static site generator, can dramatically metamorphose the web performance. It can be a magnificent option in combination with Drupal as the backend for building an enriching single page applications.

No wonder Kyle Mathews, the founder of GatsbyJS, tweeted in 2017:

GatsbyJS: Explained

Currently, GatsbyJS is on the rise when it comes to its usage as can be seen in the graph above. So, what is it? GatsbyJS, an open source static site generator, stitches together the best of ReactJS, Webpack, routing, GraphQL and other front-end tools into one very enjoyable developer experience.

Gatsby leverages powerful pre-configuration for developing a website. It has out-of-the-box capabilities for spectacularly fast page loads, data prefetching, asset optimisation, code splitting, server-side rendering, service workers, and intelligent image loading.

Features of Gatsby

Following are the reasons that should be considered while choosing Gatsby:

Well-architected plugin system

With Gatsby, content is written as React components and is rendered at build time to the Document Object Model (DOM) as static HTML, CSS and JavaScript files. With a rich data plugin ecosystem, the static content rendered can be sourced from a plethora of sources and formats constituting markdown, CSV (Comma-separated values), and from content management systems (CMS) like Drupal.

Magnificent Scalability

Gatsby can scale to the entire internet as it builds the site as static files that can be deployed with ease on numerous services. It helps in letting go of intricate deploys involving databases and servers, their time-intensive setup costs, maintenance among others.

Performance and Progressive Web Apps out-of-the-box

Gatsby enforces best practices and optimises your site by default. When the build process runs, static HTML files are created for individual pages to offer swift initial load times.

When the page is loaded by the browser, Gatsby boots up React and navigates around your site as if you were navigating through a single page application with near-instant transitions without page reloads.

Gatsby prefetches adjacent/related page content in the background which nullifies any chances of delay when the user clicks on a link. The client-side experience is awesome with JavaScript enabled as there is no loss of content or navigation if the user has JavaScript disabled.

Gatsby can offer offline support as well with the addition of a single plugin thereby making your site into a full-blown progressive web app (PWA).

JAMstack setup

A paradigm shift has been occurring in the web development arena with JAMstack setup taking the centre stage. The amalgamation of client-side JavaScript, reusable APIs, and prebuilt Markup is the future of web development. Gatsby can be a stupendous JavaScript framework for a JAMstack-powered web application.

Merits of Integrating Gatsby and Drupal

Drupal is great for its provision of intricate page layouts or content modelling with numerous sections per page. It is an amazing solution for the teams with multi-stage content creation and assessment processes. Decoupled Drupal is an astounding solution for building enterprise-grade websites and has the deep-rooted support of Drupal Community leaders. 

Leveraging the benefits of Drupal with Gatsby is an amazing approach towards getting an enterprise-level CMS for free in addition to modern development experience and the merits of JAMstack such as security, scalability and performance. One of the great examples of implementation of decoupled Drupal and Gatsby can be seen through the demo site of Umami Food Magazine which is powered by Contenta CMS, headless Drupal distribution, and GatsbyJS.

Incorporating Gatsby in a decoupled Drupal setup enables you to access the impressive content architecture and access workflow capabilities of Drupal 8 in addition to the splendid UI creation and performance toolset of Gatsby. Moreover, both Drupal and Gatsby are open source, have a huge and active community presence and a wonderful ecosystem of add-on modules or plugins. To add to that, the built-in web services of Drupal 8 streamlines the integration process.

Demonstration

To integrate Gatsby to a new or existing Drupal site, gatsby-source-drupal plugin is added to the Gatsby site. Gatsby-source-drupal plugin is a source plugin that is used to pull data into Gatsby from Drupal sites and it does so with the help of JSON:API module. It is followed by configuration of the plugin with your Drupal credentials and hosted URL. You can, then, access the Drupal data with the help of GraphQL queries.

A digital agency exhibited a demonstration that pulls Drupal content into a Gatsby site. It had a Drupal 8 site already installed and created a content type named Coffee with three fields: Title, Body and Image. Drupal was made into an API server with the installation of JSON:API and JSON:API Extras modules. For accessing the JSON API resource list, anonymous user permission was given.

This was followed by building process of Gatsby site called coffees.gatsby by making sure that the node and npm are installed on the computer. Then, the content was fetched from the Drupal server. For this, a simple page was created to display all the coffee types from the Drupal site.

Then, gatsby_source_drupal plugin was used to read Drupal content from the default endpoint /jsonapi. GraphQL was utilised to query all the coffee nodes from Drupal. Finally, the Gatsby site was published by simply copying or pushing contents in /public to the server.

Conclusion

Gatsby is an incredible static site generator that streamlines the process of creating blazing fast websites. Gatsby extracts data from sources like Drupal and then uses that data for generating static pages at build time. The data sourced from numerous backends can even be merged. This technique helps in extracting the benefits of both static sites like speed, ease of deployment etc. and the content management systems like the easy update process, user-friendly editorial interface etc.

Coming together of Drupal and Gatsby renders incredibly fast static pages and then merges that with traditional React for user authentication and personalisation.

We are committed to the provision of ambitious digital experiences with our expertise in Drupal development.

Contact us at [email protected] to get the most out of Drupal + Gatsby integration.