Pro RSC migration 3/3: React Server Components demo on webpack

Adds a React Server Components demo page at /server-components, riding
on top of Sub-PR 2's NodeRenderer + webpack setup.

The page demonstrates four RSC capabilities:

- Server Environment: ServerInfo reads Node's `os` module and lodash on
  the server; neither reaches the browser.
- Interactive Client Component: a 'use client' TogglePanel nested
  inside a Server Component tree, demonstrating the donut pattern.
- Live Server Activity: client-driven server-component re-fetching via
  useRSC().refetchComponent + RSCRoute, with react-error-boundary
  catching simulated errors and a Retry button that re-primes the cache
  before resetting the boundary. Local Suspense fallback prevents the
  in-flight RSC fetch from collapsing the page.
- Streamed Comments: async Server Component receiving comments as
  props from the controller per the canonical Pro data-fetching
  pattern, streaming in via Suspense after the page shell.

Renderer config (renderer/node-renderer.js) needs stubTimers: false
(the default `true` no-ops setTimeout, which React's RSC server
renderer uses for Flight-protocol yielding — without the override, RSC
streams emit zero chunks and hang until the idle timeout fires) and
replayServerAsyncOperationLogs: true (surfaces async-Server-Component
console output through consoleReplayScript).

Build setup uses upstream RSCWebpackPlugin and WebpackLoader. The RSC
bundle reuses the server-bundle entry; entry name, RSC loader injection,
and a few resolve overrides (react-server condition,
react-dom/server: false) are the only differences from the SSR build.
The webpack-config dispatch gains an RSC_BUNDLE_ONLY env-var gate
matching the existing SERVER_BUNDLE_ONLY / CLIENT_BUNDLE_ONLY pattern;
default builds now produce three bundles (client + server + RSC).

Covered by request + system specs at
spec/requests/server_components_spec.rb and
spec/system/server_components_demo_spec.rb.

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

Author: ihabadham

.controlplane/templates/app.yml

@@ -34,6 +34,10 @@ spec:
       value: '2'
     - name: RENDERER_URL
       value: http://localhost:3800
+    # Enable the artificial Suspense demo delay so the streaming fallback is
+    # visible on the review-app. Off by default in production deployments.
+    - name: RSC_SUSPENSE_DEMO_DELAY
+      value: 'true'
     # RENDERER_PASSWORD and REACT_ON_RAILS_PRO_LICENSE must be created in the
     # Control Plane Secret named by {{APP_SECRETS}} before deploy. cpflow
     # resolves {{APP_SECRETS}} to `{APP_PREFIX}-secrets` — which means review

Procfile.dev

@@ -12,4 +12,6 @@ rails: bundle exec thrust bin/rails server -p 3000
 wp-client: RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
 # Server webpack watcher for SSR bundle
 wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
+# RSC webpack watcher for React Server Components bundle
+wp-rsc: RSC_BUNDLE_ONLY=yes bin/shakapacker --watch
 node-renderer: NODE_ENV=development node renderer/node-renderer.js

app/controllers/pages_controller.rb

@@ -2,7 +2,8 @@
 
 class PagesController < ApplicationController
   include ReactOnRails::Controller
-  before_action :set_comments
+  include ReactOnRailsPro::Stream
+  before_action :set_comments, only: %i[index no_router]
 
   def index
     # NOTE: The below notes apply if you want to set the value of the props in the controller, as
@@ -38,6 +39,12 @@ def simple; end
 
   def rescript; end
 
+  def server_components
+    @server_components_comments = Comment.order(id: :desc).limit(10)
+                                         .as_json(only: %i[id author text created_at updated_at])
+    stream_view_containing_react_components(template: "/pages/server_components")
+  end
+
   private
 
   def set_comments

app/views/pages/server_components.html.erb

@@ -0,0 +1,5 @@
+<%= stream_react_component("ServerComponentsPage",
+    props: { comments: @server_components_comments },
+    prerender: true,
+    auto_load_bundle: true,
+    trace: Rails.env.development?) %>

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,3 +1,5 @@
+'use client';
+
 // eslint-disable-next-line max-classes-per-file
 import React from 'react';
 import request from 'axios';

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,3 +1,5 @@
+'use client';
+
 import { Provider } from 'react-redux';
 import React from 'react';
 import ReactOnRails from 'react-on-rails-pro';