CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-server-dom-webpack

React Server Components bindings for DOM using Webpack, enabling server-side rendering with streaming support and client-server communication.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

React Server DOM Webpack

React Server DOM Webpack provides React Server Components (RSC) bindings for DOM environments using Webpack as the bundler. It enables server-side rendering of React components with streaming support, facilitating seamless server-client communication for React applications with Webpack-based toolchains.

Package Information

  • Package Name: react-server-dom-webpack
  • Package Type: npm
  • Language: JavaScript (with Flow types)
  • Installation: npm install react-server-dom-webpack
  • Peer Dependencies: react@^19.1.1, react-dom@^19.1.1, webpack@^5.59.0

Core Imports

The package provides environment-specific entry points for different runtime environments:

// Client-side (browser)
import { createFromFetch, createFromReadableStream, encodeReply } from "react-server-dom-webpack/client.browser";

// Client-side (Node.js)
import { createFromNodeStream } from "react-server-dom-webpack/client.node";

// Server-side (browser/edge)
import { renderToReadableStream, decodeReply } from "react-server-dom-webpack/server.browser";

// Server-side (Node.js)
import { renderToPipeableStream, decodeReplyFromBusboy } from "react-server-dom-webpack/server.node";

// Webpack plugin
import ReactFlightWebpackPlugin from "react-server-dom-webpack/plugin";

For CommonJS environments:

const { createFromFetch } = require("react-server-dom-webpack/client.browser");
const { renderToReadableStream } = require("react-server-dom-webpack/server.browser");
const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");

Basic Usage

Client-Side Component Rendering

import { createFromFetch } from "react-server-dom-webpack/client.browser";

// Create RSC response from server fetch
const ServerComponent = createFromFetch(
  fetch("/api/rsc"),
  {
    callServer: async (id, args) => {
      const response = await fetch("/api/server-action", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, args })
      });
      return response.json();
    }
  }
);

// Use in React component
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {ServerComponent}
    </Suspense>
  );
}

Server-Side Component Streaming

import { renderToReadableStream } from "react-server-dom-webpack/server.browser";

// Render server component to stream
const stream = renderToReadableStream(
  <MyServerComponent data={serverData} />,
  clientManifest,
  {
    onError: (error) => console.error("RSC Error:", error)
  }
);

// Send stream to client
return new Response(stream, {
  headers: { "Content-Type": "text/x-component" }
});

Webpack Configuration

const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");

module.exports = {
  plugins: [
    new ReactFlightWebpackPlugin({
      isServer: false,
      clientReferences: [
        {
          directory: "./src",
          recursive: true,
          include: /\.(js|jsx|ts|tsx)$/,
        }
      ]
    })
  ]
};

Architecture

React Server DOM Webpack implements React's Flight protocol for server components, providing:

  • Multi-Environment Support: Separate builds for browser, Node.js, and edge runtimes
  • Webpack Integration: Deep integration with Webpack for code splitting and module resolution
  • Streaming Protocol: Built-in support for streaming server-rendered content
  • Module Manifests: Webpack-generated manifests for client/server module mapping
  • Directive Processing: Automatic handling of "use client" and "use server" directives
  • Bundle Configuration: Support for both bundled and unbundled runtime variants

Capabilities

Client APIs

Client-side functionality for consuming server-rendered React components with streaming support and server communication.

function createFromFetch<T>(
  promiseForResponse: Promise<Response>, 
  options?: ClientOptions
): Thenable<T>;

function createFromReadableStream<T>(
  stream: ReadableStream, 
  options?: ClientOptions
): Thenable<T>;

function createFromNodeStream<T>(
  stream: Readable,
  serverConsumerManifest: ServerConsumerManifest,
  options?: NodeClientOptions
): Thenable<T>;

Client APIs

Server APIs

Server-side functionality for rendering React Server Components to streams with client communication support.

function renderToReadableStream(
  model: ReactClientValue,
  webpackMap: ClientManifest,
  options?: ServerOptions
): ReadableStream;

function renderToPipeableStream(
  model: ReactClientValue,
  webpackMap: ClientManifest,
  options?: ServerOptions
): PipeableStream;

Server APIs

Webpack Plugin

Webpack plugin for processing React Server Components and generating client/server manifests.

class ReactFlightWebpackPlugin {
  constructor(options: PluginOptions);
  apply(compiler: WebpackCompiler): void;
}

interface PluginOptions {
  isServer: boolean;
  clientReferences?: ClientReferencePath | ClientReferencePath[];
  chunkName?: string;
  clientManifestFilename?: string;
  serverConsumerManifestFilename?: string;
}

Webpack Plugin

Data Encoding & Communication

Functions for encoding client-to-server data and decoding server responses.

function encodeReply(
  value: ReactServerValue,
  options?: EncodeOptions
): Promise<string | URLSearchParams | FormData>;

function decodeReply(
  body: string | FormData,
  bundlerConfig?: ServerManifest
): any;

function decodeAction(
  body: FormData,
  bundlerConfig?: ServerManifest
): Promise<() => any> | null;

Data Communication

Node.js Integration

Node.js-specific utilities for server component module loading and directive processing.

function register(): void;

Node.js Integration

Static Rendering

Static pre-rendering capabilities for React Server Components.

function unstable_prerender(
  model: ReactClientValue,
  webpackMap: ClientManifest,
  options?: StaticOptions
): Promise<StaticResult>;

Static Rendering

Common Types

interface ClientOptions {
  callServer?: CallServerCallback;
  temporaryReferences?: TemporaryReferenceSet;
  findSourceMapURL?: FindSourceMapURLCallback;
  replayConsoleLogs?: boolean;
  environmentName?: string;
}

interface ServerOptions {
  environmentName?: string | (() => string);
  filterStackFrame?: (url: string, functionName: string) => boolean;
  identifierPrefix?: string;
  signal?: AbortSignal;
  temporaryReferences?: TemporaryReferenceSet;
  onError?: (error: Error) => void;
  onPostpone?: (reason: string) => void;
}

interface ServerConsumerManifest {
  moduleMap: ServerConsumerModuleMap;
  moduleLoading: ModuleLoading;
  serverModuleMap: null | ServerManifest;
}

type ReactClientValue = any;
type ClientManifest = Record<string, ImportManifestEntry>;
type ServerManifest = Record<string, any>;
type TemporaryReferenceSet = any;

type CallServerCallback = <A, T>(id: string, args: A) => Promise<T>;
type FindSourceMapURLCallback = (fileName: string, sourceMapURL: string) => string;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-server-dom-webpack@19.1.x
Publish Source
CLI
Badge
tessl/npm-react-server-dom-webpack badge