Server-side rendering a Drupal site with Next.js

8 Dec 2024, 10:30 pm
45 minutes

Reflecting on my experience at DrupalCon Singapore 2024, I had the opportunity to attend several insightful sessions on December 9th and 10th, present my own session on December 10th, and participate as a mentor during the Contribution Day on the 11th.

Sessions Attended on December 9th:

1.    Server-side Rendering a Drupal Site with Next.js
This session explored the benefits and challenges of decoupling Drupal's frontend and implementing server-side rendering with Next.js. The discussion provided valuable insights into enhancing performance and user experience through modern JavaScript frameworks.
2.    Beyond Boundaries: The Triumph of a Decoupled Web Portal for IDMC
The presentation showcased the development of a decoupled web portal for the Internal Displacement Monitoring Centre, highlighting the project's success in delivering dynamic content and improved user engagement.
3.    Automating Behavior-Driven Development: Boosting Productivity with Template-Driven Test Experience
This session delved into establishing a development process for Drupal custom modules, emphasizing automated testing using PHPUnit and GitLab CI/CD pipelines to enhance productivity and code quality.

Sessions Attended on December 10th:

1.    Drupal CMS Panel: Key Leads Answer Your Questions
An engaging panel featuring key leaders from the Drupal community discussing the future of Drupal, current challenges, and opportunities, while addressing questions from the audience.
2.    Building Multi-Language Sites in Drupal: Unlocking Global Potential
This session provided insights into extending website reach to a global audience by building robust multi-language sites in Drupal, ensuring seamless user experience and content quality.
3.    Innovation and the Future of Drupal
A discussion on the innovative directions and future prospects of Drupal, highlighting the community's efforts in adapting to emerging technologies and market needs.

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.

Other Sessions