+
+
+ React Server Components Demo
+
+
+ This page is rendered using React Server Components with React on Rails Pro.
+ Server components run on the server and stream their output to the client, keeping
+ heavy dependencies out of the browser bundle entirely.
+
+
+
+
+ {/* Server Info - uses Node.js os module (impossible on client) */}
+
+
+ Server Environment
+
+ Server Only
+
+
+
+
+
+ {/* Interactive toggle - demonstrates mixing server + client components */}
+
+
+ Interactive Client Component
+
+ Client Hydrated
+
+
+
+
+
+ This toggle is a 'use client' component, meaning it ships JavaScript
+ to the browser for interactivity. But the content inside is rendered on the server
+ and passed as children — a key RSC pattern called the donut pattern.
+
+
+ - The
TogglePanel wrapper runs on the client (handles click events)
+ - The children content is rendered on the server (no JS cost)
+ - Heavy libraries used by server components never reach the browser
+
+
+
+ {/* Async data fetching with Suspense streaming */}
+
+
+ Streamed Comments
+
+ Async + Suspense
+
+
+
+ Comments are fetched directly on the server using the Rails API.
+ The page shell renders immediately while this section streams in progressively.
+
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+ }
+ >
+
+
+
+
+ {/* Architecture explanation */}
+
+
+ What makes this different?
+
+
+
+
Smaller Client Bundle
+
+ Libraries like lodash, marked, and Node.js os module
+ are used on this page but never downloaded by the browser.
+
+
+
+
Direct Data Access
+
+ Server components fetch data by calling your Rails API internally — no
+ client-side fetch waterfalls or loading spinners for initial data.
+
+
+
+
Progressive Streaming
+
+ The page shell renders instantly. Async components (like the comments feed)
+ stream in as their data resolves, with Suspense boundaries showing fallbacks.
+
+
+
+
Selective Hydration
+
+ Only client components (like the toggle above) receive JavaScript.
+ Everything else is pure HTML — zero hydration cost.
+
+
+
+
+ {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.
+ const rawHtml = marked.parse(comment.text || '');
+ const safeHtml = sanitizeHtml(rawHtml, {
+ allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+ allowedAttributes: {
+ ...sanitizeHtml.defaults.allowedAttributes,
+ img: ['src', 'alt', 'title', 'width', 'height'],
+ },
+ allowedSchemes: ['https', 'http'],
+ });
+
+ return (
+
+
+ {comment.author}
+
+ {new Date(comment.created_at).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+
+
+
+ {/* Content is sanitized via sanitize-html before rendering */}
+ {/* eslint-disable-next-line react/no-danger */}
+
+
+
{comment.text}
+
+ );
+ })}
+
+ {recentComments.length} comment{recentComments.length !== 1 ? 's' : ''} rendered on the server using{' '}
+ marked + sanitize-html (never sent to browser)
+
+