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

Overview

Eval results

Files

React Server DOM Webpack

Name: tessl/npm-react-server-dom-webpack
Author: tessl

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;

Install with Tessl CLI

npx tessl i tessl/npm-react-server-dom-webpack

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/react-server-dom-webpack@19.1.x
Publish Source: CLI
Badge