Building a Decoupled Frontend

We can use a decoupled approach when planning how to implement the frontend for a Drupal website.

In this chapter, we’ll explore some solutions available for building a JavaScript application that queries a Drupal backend to retrieve the information to render.

The first section discusses how Drupal exposes its content to the external systems. In the second part, we’ll build a frontend using a handmade solution with vanilla JavaScript and then with Next.js.

The topics covered in this chapter will be as follows:

• Setting up the environment to build a decoupled site
• Introduction to Next.js

Technical requirements

To run the examples in this chapter, make sure to follow the instructions explained in Chapter 1, Setting Up a Local Environment.

You can find the code for this chapter in the GitHub repository: https://github.com/PacktPublishing/Modernizing-Drupal-10-Theme-Development.

Setting up the environment to build a decoupled site

Since Drupal 8, the CMS can natively expose its internal structures (entities and configurations) to third-party systems.

With minimal or no configuration, you can start building the frontend of a Drupal website without using Twig and instead choose one of the many available JavaScript frameworks (such as Next.js, Vue.js, or React).

Drupal core provides two modules that can be used to expose content and other data to the to external systems:

• RESTful Web Services
• JSON:API

Both modules have pros and cons, and you should choose the one most appropriate for your use case. Sometimes, to fulfill requirements for some complex websites, you may have to use both.

In the following sections, we’ll expose data first with RESTful Web Services and then with JSON:API module to feed some vanilla JavaScript code. The output will be a fully decoupled HTML page that renders the details of a trip.

...

Introduction to Next.js

There are multiple ways to implement a decoupled frontend for Drupal using one of the many available frontend frameworks.

It’s mostly a matter of taste. You can use Angular, Vue.js, or React; all of them have some support for Drupal and its API.

Here we’ll use one of the community’s latest solutions: Next.js for Drupal (https://next-drupal.org).

Next.js

Next.js (https://nextjs.org) is a powerful and popular open source framework for building modern web applications and websites. Developed on top of React.js, Next.js simplifies and streamlines the process of creating dynamic and server-rendered applications. One of its key features is its ability to handle both client- and server-side rendering, allowing developers to balance performance and user experience. Next.js also provides built-in support for automatic code splitting, enabling efficient loading of only the necessary components for each page. With an intuitive API and a...

Summary

The Next for Drupal integration we covered in this chapter leveraged Next.js’s capabilities for server-side rendering, static site generation, and an enhanced user experience, while Drupal continued to serve as the backend CMS for managing and storing content, users, and other site data. By combining these technologies, developers can create high-performance, scalable, and SEO-friendly websites, taking advantage of the best features of both Next.js and Drupal in a cohesive manner.

We have completed a long journey to prepare our Drupal site for production. Along the way, you have gained extensive knowledge of how Drupal transforms data into HTML pages and API endpoints. However, technology advances rapidly, and the community releases a new version of Drupal every six months. As the focus is on user and developer ease of use, keeping up with news on upcoming Drupal versions is essential.

So, keep learning!