Skip to main content
Edit

React Server Components in React on Rails Pro

Pro Feature — React Server Components require React on Rails Pro with the node renderer. Free in development, test, CI, and staging, and in production for small organizations, charities, schools, and hospitals; larger organizations subscribe at https://pro.reactonrails.com/ ($1,800 per year per organization). No license key is needed to run Pro.

Stable GA: React Server Components are supported in React on Rails Pro 17. The stable RSC stack uses React and React DOM 19.2.x (patch 19.2.7 or newer) with react-on-rails-rsc 19.2.x (patch 19.2.1 or newer).

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 supported GA feature of React on Rails Pro 17 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​

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:

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 17, installed at the same version as React on Rails 17
  • React and React DOM 19.2.x with patch 19.2.7 or newer
  • Stable react-on-rails-rsc 19.2.x with patch 19.2.1 or newer
  • 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. Its Pro 16.4+ prerequisite is only the minimum starting point for an existing app; upgrade the app to Pro 17 for the supported GA destination documented here.

Migrating Your React Components?​

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

Deep Dives​