Server-side rendering a Drupal site with Next.js

camp: Twin Cities Drupal Camp, Minneapolis

Tip: the perils of a catch-all route - all components are imported for all paths

But Drupal can already render your website on the server! Why would you want to decouple your frontend and have it render your website in JavaScript on the server?

If JavaScript developers have just discovered that rendering on the server is faster, why aren’t we just going back to Drupal’s PHP server rendering? Because it’s simpler. With React Server Components, frontend developers can leverage their knowledge of Fetch-based API integration without having to learn any PHP, Twig, Render API, library definitions, or Drupal behaviors.

React Server Components are a new feature of React v19. This session will focus on Next Drupal, a set of Drupal and NPM modules that integrates Drupal’s JSON:API or GraphQL with Next.js, an opinionated React framework. We will discuss how the differences between JavaScript’s import statement and PHP’s include statement affect the way we need to build and route our application. And we will get into specifics of reducing bundle size and how to weave interactive features with server-rendered content.

In this session we will cover the following topics:

  • Why? Just why?
  • Okay, but how?
  • React Server Components in React 19 and Next.js’ App Router
  • Async promises on the server
  • Client Components and the "use client" directive
  • Suspense boundaries and React rehydration
  • How the Next module improves the Drupal content editor experience
Slides