React Server Components in React on Rails Pro

Pro Feature — React Server Components require React on Rails Pro with the node renderer. Free or very low cost for startups and small companies. Upgrade or licensing details →

[!NOTE] Summary for AI agents: Use this page when the user explicitly wants React Server Components or an RSC migration path. It routes to the tutorial, deep dives, and migration guides. Treat RSC as a Pro-only feature that runs with the Node renderer.

What Are React Server Components?

React Server Components (RSC) allow you to write components that execute on the server and stream their rendered output to the client. Unlike traditional server-side rendering, which renders the entire page to a string before sending it, RSC streams individual component trees progressively and keeps server-only dependencies out of the client bundle entirely.

With React on Rails Pro, RSC integrates directly into your Rails application:

• Server components run in the Node renderer alongside your Rails backend
• The RSC webpack loader and plugin handle bundling automatically
• Rails view helpers (stream_react_component, rsc_payload_react_component) manage the streaming lifecycle
• Auto-bundling detects 'use client' directives and generates the correct registrations

Why RSC Matters

Smaller Client Bundles

Server components and their dependencies never ship to the browser. Libraries like date-fns, marked, or sanitize-html stay entirely server-side, reducing bundle sizes significantly. Frigade reported a 62% reduction in client-side bundle size after adopting RSC.

Faster Time to First Byte

Combined with streaming SSR, RSC sends the initial HTML shell immediately while data-dependent components resolve and stream in progressively. Users see content sooner, and search engines can index the full page.

Selective Hydration

React's selective hydration allows client components to become interactive independently as their code loads, rather than waiting for the entire page's JavaScript to execute. Components that users interact with get priority hydration.

Server-Prepared Data, No Client Fetching

In React on Rails, Rails is the backend: your controller owns database access, authorization, and caching, then passes data to the component tree as props (or streams slow data as async props). Server components render from that data without exposing API endpoints to the client or shipping client-side data-fetching libraries. Unlike Next.js-style RSC, components don't fetch their own data — see RSC Data Fetching Patterns.

Real-World Results

Teams adopting RSC have reported dramatic wins — BlogHunch's 30% server-cost reduction, Frigade's 62% client-bundle reduction, and Mux's 50,000-line incremental migration — all documented in Migration Success Stories. DoorDash's 65% LCP improvement from an earlier Next.js SSR migration is included as a useful server-rendering baseline.

The Marketplace demo below shows how these ideas look in an inspectable React on Rails Pro application.

Live Demo and Evidence {#live-demo-and-evidence}

The public Marketplace demo shows the same marketplace-style surfaces rendered with traditional SSR, client rendering, and React Server Components. Use this canonical link list when you want inspectable proof instead of a static claim:

• RSC performance showcase — Lighthouse scores, transfer deltas, bootup time, and report links for each measured page family
• Bundle-size evidence — per-route resource and chunk breakdowns
• Raw Lighthouse reports — the underlying Lighthouse artifacts
• Why RSC — a non-framework-specific walkthrough of why server-only dependencies stay off the browser
• Demo source — Rails + React on Rails Pro implementation code

[!NOTE] Treat these public measurements as directional evidence, not a universal performance guarantee for every app.

Current Support Status

Current React on Rails Pro releases provide full RSC support with:

• RSC webpack loader (react-on-rails-rsc/WebpackLoader) for server/client component separation
• RSC webpack plugin (react-on-rails-rsc/WebpackPlugin) for client manifest generation
• Streaming view helpers for progressive rendering
• Auto-bundling integration that detects 'use client' directives
• Server-side rendering of RSC pages with hydration

Requirements

• React on Rails Pro v16.4.0 or higher
• React on Rails v16.4.0 or higher
• React 19 with a compatible react-on-rails-rsc version
• Node renderer — installed separately via react-on-rails-pro-node-renderer npm package (see Pro Installation)
• Shakapacker or Rspack for bundling

Getting Started

New to RSC?

Start with the tutorial series, which builds from basics to advanced features:

1. Create an RSC page without SSR — learn the fundamentals
2. Add streaming and interactivity — Suspense and client components
3. Add server-side rendering — full SSR for RSC pages
4. Selective hydration — how React prioritizes component hydration

See the full RSC tutorial for the complete learning path.

Upgrading an Existing Pro App?

See Upgrading an Existing Pro App to RSC for the generator-based runbook: prerequisites, rails g react_on_rails:rsc usage, legacy webpack compatibility, and a verification checklist.

Migrating Your React Components?

The migration guide covers how to incrementally adopt RSC in an existing React on Rails application, including:

• Preparing your app — infrastructure setup before changing components
• Component patterns — restructuring your component tree
• Context and state management — handling React Context across the server/client boundary
• Data fetching — migrating from client-side to server-side data access
• Third-party libraries — dealing with library compatibility
• Troubleshooting — common issues and solutions
• RSC performance validation — control/experiment methodology, visual regression gates, and PR metrics for performance claims
• Mostly static RSC shell with a tiny sidecar — public-page pattern for static RSC HTML plus narrow browser behavior

Deep Dives

• How RSC Works — bundling process, RSC payload format, and client references
• RSC Rendering Flow — detailed rendering lifecycle, bundle types, and architecture
• Critical Resource Hints — emit measured preload, preconnect, DNS, font, script, image, and stylesheet hints from an RSC render
• Flight Protocol Syntax — the wire format for streaming RSC data
• RSC Client Reference Diagnostics — inspect emitted client reference chunks and static-page manifest scope
• Static Shell Global JavaScript Opt-Out — Rails layout pattern for keeping global CSS while skipping app-wide JavaScript on opted-in static shells
• React on Rails Pro vs. Next.js — how both implement RSC, and the one architectural difference that explains the rest
• RSC Inside Client Components — composing server and client components
• System Specs for Streamed RSC Payloads — Capybara driver shape, Puffing Billy boundaries, and browser assertions for streamed Flight payloads
• Purpose and Benefits — waterfall loading patterns, bundle size, and selective hydration
• Migration Success Stories — reported results from DoorDash, Mux, Frigade, BlogHunch, and Developerway's independent analysis

Related Documentation

• Streaming Server Rendering — streaming SSR setup and best practices
• OSS vs Pro Feature Comparison — what's included in each tier
• Pro Installation — setting up React on Rails Pro
• RSC Glossary — terminology reference