Add React Server Components with React on Rails Pro

Upgrade from react_on_rails to react_on_rails_pro gem (16.5.1) and
corresponding npm packages. Add RSC infrastructure with a demo page
at /server-components that showcases:

- Server components using Node.js os module and lodash (never shipped
  to client)
- Async data fetching with Suspense streaming (comments from Rails API)
- Interactive client components ('use client' TogglePanel) mixed with
  server-rendered content (donut pattern)
- Markdown rendering with marked + sanitize-html on server only

Key changes:
- Three-bundle build: client, server, and RSC bundles via Rspack
- Custom RspackRscPlugin for manifest generation (the standard
  RSCWebpackPlugin uses webpack internals incompatible with Rspack)
- 'use client' directives on all existing client component entry points
- Alias react-on-rails to react-on-rails-pro in webpack resolve to
  handle third-party packages (rescript-react-on-rails)
- Dedicated rsc-bundle.js entry with registerServerComponent
- RSC payload route and client-side registration

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

Author: justin808

Gemfile

@@ -5,7 +5,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 ruby "3.4.6"
 
-gem "react_on_rails", "16.6.0.rc.0"
+gem "react_on_rails_pro", "16.5.1"
 gem "shakapacker", "10.0.0.rc.0"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"

Gemfile.lock

@@ -78,6 +78,12 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.3)
+    async (2.38.1)
+      console (~> 1.29)
+      fiber-annotation
+      io-event (~> 1.11)
+      metrics (~> 0.12)
+      traces (~> 0.18)
     autoprefixer-rails (10.4.16.0)
       execjs (~> 2)
     awesome_print (1.9.2)
@@ -115,6 +121,10 @@ GEM
     coffee-script-source (1.12.2)
     concurrent-ruby (1.3.6)
     connection_pool (3.0.2)
+    console (1.34.3)
+      fiber-annotation
+      fiber-local (~> 1.1)
+      json
     coveralls_reborn (0.25.0)
       simplecov (>= 0.18.1, < 0.22.0)
       term-ansicolor (~> 1.6)
@@ -146,16 +156,24 @@ GEM
       railties (>= 5.0.0)
     ffi (1.17.2-arm64-darwin)
     ffi (1.17.2-x86_64-linux-gnu)
+    fiber-annotation (0.2.0)
+    fiber-local (1.1.0)
+      fiber-storage
+    fiber-storage (1.0.1)
     foreman (0.88.1)
     generator_spec (0.10.0)
       activesupport (>= 3.0.0)
       railties (>= 3.0.0)
     globalid (1.3.0)
       activesupport (>= 6.1)
+    http-2 (1.1.3)
+    httpx (1.7.5)
+      http-2 (>= 1.1.3)
     i18n (1.14.8)
       concurrent-ruby (~> 1.0)
     interception (0.5)
     io-console (0.8.2)
+    io-event (1.14.5)
     irb (1.17.0)
       pp (>= 0.6.0)
       prism (>= 1.3.0)
@@ -165,6 +183,8 @@ GEM
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     json (2.19.1)
+    jwt (2.10.2)
+      base64
     language_server-protocol (3.17.0.5)
     launchy (3.0.1)
       addressable (~> 2.8)
@@ -182,6 +202,7 @@ GEM
     marcel (1.1.0)
     matrix (0.4.2)
     method_source (1.1.0)
+    metrics (0.15.0)
     mini_mime (1.1.5)
     minitest (6.0.2)
       drb (~> 2.0)
@@ -296,13 +317,23 @@ GEM
       erb
       psych (>= 4.0.0)
       tsort
-    react_on_rails (16.6.0.rc.0)
+    react_on_rails (16.5.1)
       addressable
       connection_pool
       execjs (~> 2.5)
       rails (>= 5.2)
       rainbow (~> 3.0)
       shakapacker (>= 6.0)
+    react_on_rails_pro (16.5.1)
+      addressable
+      async (>= 2.29)
+      connection_pool
+      execjs (~> 2.9)
+      http-2 (>= 1.1.1)
+      httpx (~> 1.5)
+      jwt (~> 2.7)
+      rainbow
+      react_on_rails (= 16.5.1)
     redcarpet (3.6.0)
     redis (5.3.0)
       redis-client (>= 0.22.0)
@@ -425,6 +456,7 @@ GEM
     tins (1.33.0)
       bigdecimal
       sync
+    traces (0.18.2)
     tsort (0.2.0)
     turbo-rails (2.0.11)
       actionpack (>= 6.0.0)
@@ -486,7 +518,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_best_practices
   rainbow
-  react_on_rails (= 16.6.0.rc.0)
+  react_on_rails_pro (= 16.5.1)
   redcarpet
   redis (~> 5.0)
   rspec-rails (~> 6.0.0)

Procfile.dev

@@ -12,3 +12,5 @@ rails: bundle exec thrust bin/rails server -p 3000
 wp-client: RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
 # Server Rspack watcher for SSR bundle
 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

app/controllers/pages_controller.rb

@@ -38,6 +38,8 @@ def simple; end
 
   def rescript; end
 
+  def server_components; end
+
   private
 
   def set_comments

app/views/pages/server_components.html.erb

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

client/app/bundles/comments/components/Footer/ror_components/Footer.jsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from 'libs/components/BaseComponent';

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -102,6 +102,14 @@ function NavigationBar(props) {
                 Rescript
               </a>
             </li>
+            <li>
+              <a
+                className={navItemClassName(pathname === paths.SERVER_COMPONENTS_PATH)}
+                href={paths.SERVER_COMPONENTS_PATH}
+              >
+                RSC Demo
+              </a>
+            </li>
             <li>
               <a
                 className={navItemClassName(false)}

client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx

@@ -1,9 +1,11 @@
+'use client';
+
 // eslint-disable-next-line max-classes-per-file
 import React from 'react';
 import request from 'axios';
 import Immutable from 'immutable';
 import _ from 'lodash';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 import { IntlProvider, injectIntl } from 'react-intl';
 import BaseComponent from 'libs/components/BaseComponent';
 import SelectLanguage from 'libs/i18n/selectLanguage';

client/app/bundles/comments/constants/paths.js

@@ -5,3 +5,4 @@ export const RESCRIPT_PATH = '/rescript';
 export const SIMPLE_REACT_PATH = '/simple';
 export const STIMULUS_PATH = '/stimulus';
 export const RAILS_PATH = '/comments';
+export const SERVER_COMPONENTS_PATH = '/server-components';

client/app/bundles/comments/rescript/ReScriptShow/ror_components/RescriptShow.jsx

@@ -1,3 +1,5 @@
+'use client';
+
 // Wrapper for ReScript component to work with react_on_rails auto-registration
 // react_on_rails looks for components in ror_components/ subdirectories