Contrib.social

Add a server-side rendered (SSR or RSC) build for Umami JSX

Open on Drupal.org →
Created on 10 October 2023, almost 2 years ago
Updated 16 February 2024, over 1 year ago

Problem/Motivation

There are multiple benefits (performance, SEO, security, others) that rendering JSX on the server could bring. It would be good to demonstrate how Umami JSX can be rendered on the server. Perhaps we can do this as another build script in package.json (e.g., npm run build:react-ssr or npm run build:react-rsc)?

We need to decide whether for this issue to implement React's older style SSR or newer style RSC. RSC has some really nice capabilities that we might want to add to Umami JSX at some point, but Umami JSX doesn't currently need them. But RSC might also be harder to implement (unless Next.js makes it easy so might be worth researching a bit). So, not sure if it's worth doing RSC now, or whether it's better to only do SSR for now and defer work on RSC to later.

Steps to reproduce

Proposed resolution

With either SSR or RSC, we'll need to add a JS server (i.e., a Node.js app) into the mix. So instead of navigating the browser to the port that Drupal/PHP is serving, the user will need to navigate their browser to the port that the Node.js app is listening on and that app will need to fetch the same URL from the Drupal/PHP port, perform the React rendering, and send that result back to the browser.

Because Umami JSX uses the hyperscriptify library, which relies on DOM parsing (normally performed by the browser), to implement SSR or RSC we'll also need a server-side DOM library, such as happy-dom.

Remaining tasks

User interface changes

API changes

Data model changes

🌱 Plan
Status

Closed: outdated

Version

1.0

Component

Umami JSX Demonstration Theme

Created by

🇺🇸United States effulgentsia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @effulgentsia
  • Comment over 1 year ago →
    🇺🇸United States effulgentsia

    I looked into this some, and I think the best way to implement SSR/RSC support is to use the React frameworks that provide all of the foundations for that. From the little research I've done for this, I think the current best React frameworks are:

    • Next.js for an RSC architecture.
    • Remix for an SSR/hydration architecture.

    I think it would be great to eventually have demo apps that show how Drupal and this theme engine can integrate with both of those excellent frameworks, so I opened a child issue for each: #3396649: Add a demo Next.js app and subtheme → and #3396654: Add a demo Remix app and subtheme → .

    I think there's security benefits to RSC by not sending the template variables (Drupal component props) to the browser, so I think we should do #3396649: Add a demo Next.js app and subtheme → first.

    I think we could also implement a security model that works well for Remix, by writing our own code to partially execute the Drupal components on the server only, and meanwhile there might be some unique benefits to Remix, and I think it would be great to demonstrate that this theme engine can work well with multiple frameworks, so if/when there's time it would be great to do #3396654: Add a demo Remix app and subtheme → .

    Changing this to a Plan issue, since it doesn't need any implementation beyond the two child issues.

  • Status changed to Closed: outdated over 1 year ago
  • Comment over 1 year ago →
    🇺🇸United States effulgentsia

    Closing this because I think the child issues stand on their own and we don't need this separate Plan issue.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024