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 EnvironmentServer Only

This data comes from the Node.js os module — it runs only on the server. The lodash library used to format it never reaches the browser.

Platformlinux

Architecturex64

Node.jsv22.12.0

Uptime (hrs)165

Total RAM (GB)123.8

Free RAM (GB)73.0

CPU Cores16

Interactive Client ComponentClient Hydrated

Live Server ActivityRSCRoute + ErrorBoundary

Click Refresh to fetch a new RSC payload — the server re-renders this section and streams the result back, no client-side JSON parsing or loading state plumbing. Click Simulate Error to make the server component throw; the failure surfaces as ServerComponentFetchError and is caught by <ErrorBoundary>, which renders a Retry button that calls refetchComponent with corrected props.

Refresh count: 0

Server Time

—

Free RAM

—

Uptime (hrs)

—

Streamed CommentsAsync + Suspense

Comments come from the Rails controller as props — the canonical React on Rails Pro pattern. The page shell renders immediately while this section streams in progressively as Suspense boundaries resolve.

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.