@vitejs/plugin-rsc weekly downloads statistics

@vitejs/plugin-rsc

This package provides React Server Components (RSC) support for Vite.

Features

• Framework-agnostic: The plugin implements RSC bundler features and provides low level RSC runtime (react-server-dom) API without framework-specific abstractions.
• Runtime-agnostic: Built on Vite environment API and works with other runtimes (e.g., @cloudflare/vite-plugin).
• HMR support: Enables editing both client and server components without full page reloads.
• CSS support: CSS is automatically code-split both at client and server components and they are injected upon rendering.

Getting Started

You can create a starter project by:

npm create vite@latest -- --template rsc

Examples

Start here: ./examples/starter - Recommended for understanding the package

• Provides an in-depth overview of API with inline comments to explain how they function within RSC-powered React application.

Integration examples:

• ./examples/basic - Comprehensive showcase of standard RSC features and the primary E2E test fixture.
• ./examples/use-cache - Local cached functions and components demonstrating argument keys, Flight replay, dynamic children, captured values, and invalidation.
• ./examples/use-cache-callable - Cached server references demonstrating inline and file directives, client invocation, argument admission, and encrypted closure captures.
• ./examples/use-cache-persistent - Persistent callable cache entries demonstrating Flight value replay and dependency-aware development invalidation.
• ./examples/custom-server-function - Third-party Server Function directive integration using server reference claims.
• ./examples/ssg - Static site generation with MDX and client components for interactivity.
• ./examples/ppr - Partial prerendering with a reusable static HTML shell and request-time RSC content.
• ./examples/no-ssr - RSC application without an SSR environment.
• ./examples/node-stream - Starter application served end to end through Node.js request, response, and stream APIs.
• ./examples/client-first - Experimental client-owned page that consumes RSC function results.
• ./examples/action-reachability - Route-aware dispatch for a retained server action.
• ./examples/browser-mode - Advanced setup that runs both RSC and React client environments in the browser with custom module loading.
• ./examples/performance-track - Minimal React Server Components performance track probe.
• ./examples/react-router - React Router RSC integration
  • Demonstrates how to integrate experimental React Router RSC API. React Router now provides official RSC support, so it's recommended to follow React Router's official documentation for the latest integration.

Basic Concepts

This example is a simplified version of ./examples/starter. You can read ./examples/starter/src/framework/entry.{rsc,ssr,browser}.tsx for more in-depth commentary, which includes server function handling and client-side RSC re-fetching/re-rendering.

This is the diagram to show the basic flow of RSC rendering process. See also https://github.com/hi-ogawa/vite-plugins/discussions/606.

graph TD

    subgraph "<strong>rsc environment</strong>"
        A["React virtual dom tree"] --> |"[@vitejs/plugin-rsc/rsc/server]<br /><code>renderToReadableStream</code>"| B1["RSC Stream"];
    end

    B1 --> B2
    B1 --> B3

    subgraph "<strong>ssr environment</strong>"
        B2["RSC Stream"] --> |"[@vitejs/plugin-rsc/ssr]<br /><code>createFromReadableStream</code>"| C1["React virtual dom tree"];
        C1 --> |"[react-dom/server]<br/>SSR"| E["HTML String/Stream"];
    end

    subgraph "<strong>client environment</strong>"
        B3["RSC Stream"] --> |"[@vitejs/plugin-rsc/browser]<br /><code>createFromReadableStream</code>"| C2["React virtual dom tree"];
        C2 --> |"[react-dom/client]<br/>CSR: mount, hydration"| D["DOM Elements"];
    end

    style A fill:#D6EAF8,stroke:#333,stroke-width:2px
    style B1 fill:#FEF9E7,stroke:#333,stroke-width:2px
    style B2 fill:#FEF9E7,stroke:#333,stroke-width:2px
    style B3 fill:#FEF9E7,stroke:#333,stroke-width:2px
    style C1 fill:#D6EAF8,stroke:#333,stroke-width:2px
    style C2 fill:#D6EAF8,stroke:#333,stroke-width:2px
    style D fill:#D5F5E3,stroke:#333,stroke-width:2px
    style E fill:#FADBD8,stroke:#333,stroke-width:2px

• vite.config.ts

import rsc from '@vitejs/plugin-rsc'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // add plugin
    rsc(),
  ],

  // specify entry point for each environment.
  environments: {
    // `rsc` environment loads modules with `react-server` condition.
    // this environment is responsible for:
    // - RSC stream serialization (React VDOM -> RSC stream)
    // - server functions handling
    rsc: {
      build: {
        rollupOptions: {
          input: {
            index: './src/framework/entry.rsc.tsx',
          },
        },
      },
    },…