Add Node renderer and fix RSC page rendering

- Add react-on-rails-pro-node-renderer for SSR and RSC payload generation
- Configure Pro initializer with NodeRenderer, renderer_url, password
- Alias react-dom/server.browser to react-dom/server.node in server
  webpack config (React 19's browser build requires MessageChannel which
  isn't available in the Node renderer VM)
- Add auto_load_bundle: false to RSC view (server components use
  registerServerComponent, not ror_components auto-loading)
- Add node-renderer to Procfile.dev

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: justin808

Procfile.dev

@@ -14,3 +14,5 @@ wp-client: RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
 wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
 # RSC Rspack watcher for React Server Components bundle
 wp-rsc: RSC_BUNDLE_ONLY=true bin/shakapacker --watch
+# React on Rails Pro Node renderer for SSR and RSC payload generation
+node-renderer: RENDERER_PASSWORD=devPassword node react-on-rails-pro-node-renderer.js

app/views/pages/server_components.html.erb

@@ -1,5 +1,6 @@
 <%= append_javascript_pack_tag('rsc-client-components') %>
 <%= react_component("ServerComponentsPage",
     prerender: false,
+    auto_load_bundle: false,
     trace: true,
     id: "ServerComponentsPage-react-component-0") %>

config/initializers/react_on_rails_pro.rb

@@ -1,6 +1,11 @@
 # frozen_string_literal: true
 
 ReactOnRailsPro.configure do |config|
+  # Node renderer for server-side rendering and RSC payload generation
+  config.server_renderer = "NodeRenderer"
+  config.renderer_url = ENV["REACT_RENDERER_URL"] || "http://localhost:3800"
+  config.renderer_password = ENV.fetch("RENDERER_PASSWORD", "devPassword")
+
   # Enable React Server Components support
   config.enable_rsc_support = true
 

config/webpack/serverWebpackConfig.js

@@ -95,7 +95,6 @@ const configureServer = () => {
   serverWebpackConfig.output = {
     filename: 'server-bundle.js',
     globalObject: 'this',
-    // If using the React on Rails Pro node server renderer, uncomment the next line
     // libraryTarget: 'commonjs2',
     path: path.resolve(__dirname, '../../ssr-generated'),
     publicPath: config.publicPath,
@@ -164,10 +163,14 @@ const configureServer = () => {
   // The default of cheap-module-source-map is slow and provides poor info.
   serverWebpackConfig.devtool = 'eval';
 
-  // If using the default 'web', then libraries like Emotion and loadable-components
-  // break with SSR. The fix is to use a node renderer and change the target.
-  // If using the React on Rails Pro node server renderer, uncomment the next line
-  // serverWebpackConfig.target = 'node'
+  // Alias react-dom/server to the Node.js version for the Pro Node renderer.
+  // The default browser version uses MessageChannel which isn't available in the Node VM.
+  serverWebpackConfig.resolve = serverWebpackConfig.resolve || {};
+  serverWebpackConfig.resolve.alias = {
+    ...serverWebpackConfig.resolve.alias,
+    'react-dom/server.browser$': 'react-dom/server.node',
+    'react-dom/server.browser.js$': 'react-dom/server.node.js',
+  };
 
   // RSC: Generate react-server-client-manifest.json for SSR component resolution
   serverWebpackConfig.plugins.push(new RspackRscPlugin({ isServer: true }));

package.json

@@ -30,7 +30,8 @@
     "test:client": "yarn jest",
     "build:test": "rm -rf public/packs-test && RAILS_ENV=test NODE_ENV=test bin/shakapacker",
     "build:dev": "rm -rf public/packs && RAILS_ENV=development NODE_ENV=development bin/shakapacker",
-    "build:clean": "rm -rf public/packs || true"
+    "build:clean": "rm -rf public/packs || true",
+    "node-renderer": "node ./react-on-rails-pro-node-renderer.js"
   },
   "dependencies": {
     "@babel/cli": "^7.21.0",
@@ -81,6 +82,7 @@
     "react-dom": "19.0.4",
     "react-intl": "^6.4.4",
     "react-on-rails-pro": "16.5.1",
+    "react-on-rails-pro-node-renderer": "16.5.1",
     "react-on-rails-rsc": "19.0.5-rc.1",
     "react-redux": "^8.1.0",
     "react-router": "^6.13.0",

react-on-rails-pro-node-renderer.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const { reactOnRailsProNodeRenderer } = require('react-on-rails-pro-node-renderer');
+
+const config = {
+  serverBundleCachePath: path.resolve(__dirname, '.node-renderer-bundles'),
+  logLevel: process.env.RENDERER_LOG_LEVEL || 'debug',
+  password: process.env.RENDERER_PASSWORD || 'devPassword',
+  port: process.env.RENDERER_PORT || 3800,
+  supportModules: true,
+  workersCount: Number(process.env.NODE_RENDERER_CONCURRENCY || 3),
+};
+
+if (process.env.CI) {
+  config.workersCount = 2;
+}
+
+reactOnRailsProNodeRenderer(config);