ContextQMD
Back to React On Rails

React Server Components in React on Rails Pro

docs/pro/react-server-components/index.md

16.6.05.9 KB
Original Source

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.

Direct Data Access

Server components can access databases, file systems, and internal APIs directly without exposing endpoints to the client. This simplifies data fetching and eliminates the need for client-side data fetching libraries in many cases.

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:

Deep Dives