Add React Server Components with React on Rails Pro

.github/workflows/rspec_test.yml

@@ -33,6 +33,7 @@ jobs:
       DRIVER: selenium_chrome
       CHROME_BIN: /usr/bin/google-chrome
       USE_COVERALLS: true
+      RENDERER_PASSWORD: devPassword
 
     steps:
       - name: Install Chrome
@@ -82,6 +83,20 @@ jobs:
       - name: Build shakapacker chunks
         run: NODE_ENV=development bundle exec bin/shakapacker
 
+      - name: Start Node renderer for SSR
+        run: |
+          node react-on-rails-pro-node-renderer.js &
+          echo "Waiting for Node renderer on port 3800..."
+          for i in $(seq 1 30); do
+            if nc -z localhost 3800 2>/dev/null; then
+              echo "Node renderer is ready"
+              exit 0
+            fi
+            sleep 1
+          done
+          echo "Node renderer failed to start within 30 seconds"
+          exit 1
+
       - name: Run rspec with xvfb
         uses: coactions/setup-xvfb@v1
         with:

.gitignore

@@ -57,6 +57,9 @@ client/app/bundles/comments/rescript/**/*.bs.js
 # Using React on Rails default directory
 /ssr-generated/
 
+# Node renderer bundle cache
+.node-renderer-bundles/
+
 # Generated React on Rails packs
 **/generated/**
 

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,7 @@ 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
+# 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/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,6 @@
+<%= append_javascript_pack_tag('rsc-client-components') %>
+<%= react_component("ServerComponentsPage",
+    prerender: false,
+    auto_load_bundle: false,
+    trace: Rails.env.development?,
+    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 @@
-// eslint-disable-next-line max-classes-per-file
+/* eslint-disable max-classes-per-file */
+'use client';
+
 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
 

client/app/bundles/comments/startup/App/ror_components/App.jsx

@@ -1,6 +1,8 @@
+'use client';
+
 import { Provider } from 'react-redux';
 import React from 'react';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 
 import NonRouterCommentsContainer from '../../../containers/NonRouterCommentsContainer.jsx';
 import 'intl/locale-data/jsonp/en';

client/app/bundles/comments/startup/ClientRouterAppExpress.jsx

@@ -1,7 +1,7 @@
 // Compare to ../ServerRouterApp.jsx
 import { Provider } from 'react-redux';
 import React from 'react';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 import { Router, browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 

client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx

@@ -1,9 +1,11 @@
+'use client';
+
 // Top level component for client side.
 // Compare this to the ./ServerApp.jsx file which is used for server side rendering.
 
 import { Provider } from 'react-redux';
 import React from 'react';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 
 import NavigationBar from '../../../components/NavigationBar/NavigationBar.jsx';
 import NavigationBarContainer from '../../../containers/NavigationBarContainer.jsx';

client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx

@@ -1,7 +1,9 @@
+'use client';
+
 // Compare to ./RouterApp.server.jsx
 import { Provider } from 'react-redux';
 import React from 'react';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 import { BrowserRouter } from 'react-router-dom';
 import routes from '../../../routes/routes.jsx';
 

client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx

@@ -1,8 +1,10 @@
+'use client';
+
 // Compare to ./RouterApp.client.jsx
 import { Provider } from 'react-redux';
 import React from 'react';
 import { StaticRouter } from 'react-router-dom/server';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 import routes from '../../../routes/routes.jsx';
 
 function ServerRouterApp(_props, railsContext) {

client/app/bundles/comments/startup/serverRegistration.jsx

@@ -1,5 +1,5 @@
 // Example of React + Redux
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 
 import App from './App/ror_components/App';
 import RouterApp from './RouterApp/ror_components/RouterApp.server';