@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:

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.

• vite.config.ts • entry.rsc.tsx • entry.ssr.tsx • entry.browser.tsx

Environment helper API

The plugin provides an additional helper for multi environment interaction.

Available on rsc or ssr environment

import.meta.viteRsc.loadModule

• Type: (environmentName: "ssr" | "rsc", entryName?: string) => Promise

This allows importing ssr environment module specified by environments.ssr.build.rollupOptions.input[entryName] inside rsc environment and vice versa. When entryName is omitted, the function automatically uses the single entry from the target environment's rollupOptions.input.

During development, by default, this API assumes both rsc and ssr environments execute under the main Vite process as RunnableDevEnvironment. Internally, loadModule uses the global VITE_ENVIRONMENT_RUNNER_IMPORT function to import modules in the target environment (see VITE_ENVIRONMENT_RUNNER_IMPORT below).

When enabling rsc({ loadModuleDevProxy: true }) plugin option, the loaded module is implemented as a proxy with fetch-based RPC to call in node environment on the main Vite process, which for example, allows rsc environment inside cloudflare workers to access ssr environment on the main Vite process. This proxy mechanism uses turbo-stream for serializing data types beyond JSON, with custom encoders/decoders to additionally support Request and Response instances.

During production build, this API will be rewritten into a static import of the specified entry of other environment build and the modules are executed inside the same runtime.

For example,

import.meta.viteRsc.import

• Type: (specifier: string, options: { environment: string }) => Promise

A more ergonomic alternative to loadModule:

1. No manual rollupOptions.input config needed - entries are auto-discovered 2. Specifier matches the path in typeof import(...) type annotations

Comparison:

During development, this works the same as loadModule, using the VITE_ENVIRONMENT_RUNNER_IMPORT function to import modules in the target environment.

During production build, the plugin auto-discovers these imports and emits them as entries in the target environment. A manifest file (__vite_rsc_env_imports_manifest.js) is generated to map module specifiers to their output filenames.

Available on rsc environment

import.meta.viteRsc.loadCss

[!NOTE] The plugin automatically injects CSS for server components. See the CSS Support section for detailed information about automatic CSS injection.

• Type: (importer?: string) => React.ReactNode

This allows collecting css which is imported through a current server module and injecting them inside server components.

When specifying loadCss(), it will collect css through the server module resolved by .

Available on ssr environment

getClientEntryUrl()…

Description from the npm listing.