Server-side rendering a Drupal site with Next.js
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
About the Speaker
John Albin Wilkins
Frontend & Full Stack Developer
https://2024.twincitiesdrupal.org/session/server-side-rendering-drupal-site-nextjs
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
About the Speaker
John Albin Wilkins
Frontend & Full Stack Developer
https://2024.twincitiesdrupal.org/session/server-side-rendering-drupal-site-nextjs