Refactor RSC demo to canonical RoR Pro data flow

Drop self-fetch (Server Component → fetch → Rails) anti-pattern that
docs/oss/migrating/rsc-data-fetching.md and rsc-troubleshooting.md
explicitly warn against (circular request: Node renderer → Rails →
Node renderer). Move comments loading into the Rails controller and
pass them as props through stream_react_component, matching every
maintained RSC demo and the dummy app.

Changes:
- PagesController#server_components now loads @server_components_comments
  from the Rails DB and renders via stream_view_containing_react_components.
  Includes ReactOnRailsPro::Stream (provides the helper + ActionController::Live).
- View switches react_component → stream_react_component, passes comments
  as props.
- ServerComponentsPage receives comments and forwards to CommentsFeed.
- CommentsFeed becomes a pure-render Server Component: receives comments
  as a prop, drops fetch / AbortController / RAILS_INTERNAL_URL handling
  / try-catch error fallback / lodash. Keeps marked + sanitize-html for
  server-side markdown rendering. Suspense boundary stays; the demo
  delay (default-on, RSC_SUSPENSE_DEMO_DELAY=false to disable) gives
  Suspense visible work to wait on.
- ServerInfo: drop unused async keyword.
- No PropTypes added (React 19 removed propTypes runtime validation).

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

Author: ihabadham

app/controllers/pages_controller.rb

@@ -2,6 +2,7 @@
 
 class PagesController < ApplicationController
   include ReactOnRails::Controller
+  include ReactOnRailsPro::Stream
   before_action :set_comments
 
   def index
@@ -38,7 +39,11 @@ def simple; end
 
   def rescript; end
 
-  def server_components; end
+  def server_components
+    @server_components_comments = Comment.order(id: :desc).limit(10)
+                                         .as_json(only: %i[id author text created_at])
+    stream_view_containing_react_components(template: "/pages/server_components")
+  end
 
   private
 

app/views/pages/server_components.html.erb

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

client/app/bundles/server-components/components/CommentsFeed.jsx

@@ -1,65 +1,22 @@
-// Server Component - fetches comments directly from the Rails API on the server.
-// Uses marked for markdown rendering. Both fetch and marked stay server-side.
-
 import React from 'react';
 import { Marked } from 'marked';
 import { gfmHeadingId } from 'marked-gfm-heading-id';
 import sanitizeHtml from 'sanitize-html';
-import _ from 'lodash';
 import TogglePanel from './TogglePanel';
 
 const marked = new Marked();
 marked.use(gfmHeadingId());
 
-function resolveRailsBaseUrl() {
-  if (process.env.RAILS_INTERNAL_URL) {
-    return process.env.RAILS_INTERNAL_URL;
-  }
-
-  // Local defaults are okay in development/test, but production should be explicit.
-  if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
-    return 'http://localhost:3000';
-  }
-
-  throw new Error('RAILS_INTERNAL_URL must be set outside development/test');
-}
-
-async function CommentsFeed() {
-  // Simulate network latency only when explicitly enabled for demos.
-  if (process.env.RSC_SUSPENSE_DEMO_DELAY === 'true') {
+// Default-on small delay so the surrounding <Suspense> fallback is visible
+// in the demo. Set RSC_SUSPENSE_DEMO_DELAY=false to disable (CI / tests).
+async function CommentsFeed({ comments = [] }) {
+  if (process.env.RSC_SUSPENSE_DEMO_DELAY !== 'false') {
     await new Promise((resolve) => {
       setTimeout(resolve, 800);
     });
   }
 
-  let recentComments = [];
-  try {
-    // Fetch comments directly from the Rails API — no client-side fetch needed
-    const baseUrl = resolveRailsBaseUrl();
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 5000);
-    const response = await fetch(`${baseUrl}/comments.json`, { signal: controller.signal });
-    clearTimeout(timeoutId);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch comments: ${response.status} ${response.statusText}`);
-    }
-    const data = await response.json();
-    const comments = data.comments;
-
-    // Use lodash to process (stays on server)
-    const sortedComments = _.orderBy(comments, ['created_at'], ['desc']);
-    recentComments = _.take(sortedComments, 10);
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('CommentsFeed failed to load comments', error);
-    return (
-      <div className="bg-rose-50 border border-rose-200 rounded-lg p-6 text-center">
-        <p className="text-rose-700">Could not load comments right now. Please try again later.</p>
-      </div>
-    );
-  }
-
-  if (recentComments.length === 0) {
+  if (comments.length === 0) {
     return (
       <div className="bg-amber-50 border border-amber-200 rounded-lg p-6 text-center">
         <p className="text-amber-700">
@@ -75,10 +32,8 @@ async function CommentsFeed() {
 
   return (
     <div className="space-y-3">
-      {recentComments.map((comment) => {
-        // Render markdown on the server using marked + sanitize-html.
-        // sanitize-html strips any dangerous HTML before rendering.
-        // These libraries (combined ~200KB) never reach the client.
+      {comments.map((comment) => {
+        // marked + sanitize-html (~200KB combined) stay server-side.
         const rawHtml = marked.parse(comment.text || '');
         const safeHtml = sanitizeHtml(rawHtml, {
           allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
@@ -119,7 +74,7 @@ async function CommentsFeed() {
         );
       })}
       <p className="text-xs text-slate-400 text-center pt-2">
-        {recentComments.length} comment{recentComments.length !== 1 ? 's' : ''} rendered on the server using{' '}
+        {comments.length} comment{comments.length !== 1 ? 's' : ''} rendered on the server using{' '}
         <code>marked</code> + <code>sanitize-html</code> (never sent to browser)
       </p>
     </div>

client/app/bundles/server-components/components/ServerInfo.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import os from 'os';
 import _ from 'lodash';
 
-async function ServerInfo() {
+function ServerInfo() {
   const serverInfo = {
     platform: os.platform(),
     arch: os.arch(),

client/app/bundles/server-components/ror_components/ServerComponentsPage.jsx

@@ -7,7 +7,7 @@ import ServerInfo from '../components/ServerInfo';
 import CommentsFeed from '../components/CommentsFeed';
 import TogglePanel from '../components/TogglePanel';
 
-const ServerComponentsPage = () => {
+const ServerComponentsPage = ({ comments = [] }) => {
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
       <header className="mb-10">
@@ -81,7 +81,7 @@ const ServerComponentsPage = () => {
               </div>
             }
           >
-            <CommentsFeed />
+            <CommentsFeed comments={comments} />
           </Suspense>
         </section>