Skip to main content
Edit
Edit on GitHub

React Server Components Rendering Flow

This document explains the rendering flow of React Server Components (RSC) in React on Rails Pro.

Types of Bundles​

In a React Server Components project, there are three distinct types of bundles:

RSC Bundle (rsc-bundle.js)​

  • Contains only server components and references to client components
  • Generated using the RSC Webpack Loader which transforms client components into references
  • Used specifically for generating RSC payloads
  • Configured with react-server condition to enable RSC-specific code paths that tell the runtime that this bundle is used for RSC payload generation.

Server Bundle (server-bundle.js)​

  • Contains both server and client components in their full form
  • Used for traditional server-side rendering (SSR)
  • Enables HTML generation of any components
  • Does not transform client components into references

Client Bundle​

  • Split into multiple chunks based on client components
  • Each file with 'use client' directive becomes an entry point
  • Code splitting occurs automatically for client components
  • Chunks are loaded on-demand during client component hydration

React Server Component Rendering Flow​

When a request is made to a page using React Server Components, the following optimized sequence occurs:

  1. Initial Request Processing:

    • The stream_react_component helper is called in the view
    • Makes a request to the node renderer
    • Server bundle's rendering function calls generateRSCPayload with the component name and props
    • This executes the component rendering in the RSC bundle
    • RSC bundle generates the payload containing server component data and client component references
    • The payload is returned to the server bundle

  2. Server-Side Rendering with RSC Payload:

    • The server bundle uses the RSC payload to generate HTML for server components using RSCServerRoot
    • RSCServerRoot splits the RSC payload stream into two parts:
      • One stream for rendering server components as HTML
      • Another stream for embedding the RSC payload in the response
    • RSCPayloadContainer component embeds the RSC payload within the HTML response
    • HTML and embedded RSC payload are streamed together to the client

  3. Client Hydration:

    • Browser displays HTML immediately
    • React runtime uses the embedded RSC payload for hydration
    • Client components are hydrated progressively without requiring a separate HTTP request

This approach offers significant advantages:

  • Eliminates double rendering of server components
  • Reduces HTTP requests by embedding the RSC payload within the initial HTML response
  • Provides faster interactivity through streamlined rendering and hydration
sequenceDiagram
    participant Browser
    participant RailsView
    participant NodeRenderer
    participant RSCBundle
    participant ServerBundle

    Note over Browser,ServerBundle: 1. Initial Request
    Browser->>RailsView: Request page
    RailsView->>NodeRenderer: stream_react_component
    NodeRenderer->>ServerBundle: Execute rendering request
    ServerBundle->>RSCBundle: generateRSCPayload(component, props)
    RSCBundle-->>ServerBundle: RSC payload with:<br/>- Server components<br/>- Client component refs
    ServerBundle-->>NodeRenderer: Generate HTML using RSC payload

    Note over Browser,ServerBundle: 2. Single Response
    NodeRenderer-->>Browser: Stream HTML with embedded RSC payload

    Note over Browser: 3. Client Hydration
    Browser->>Browser: Process embedded RSC payload
    loop For each client component
        Browser->>Browser: Fetch component chunk
        Browser->>Browser: Hydrate component
    end

Next Steps​

To learn more about how to render React Server Components inside client components, see React Server Components Inside Client Components.