0
# React Server DOM Webpack
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: react-server-dom-webpack
7
- **Package Type**: npm
8
- **Language**: JavaScript (with Flow types)
9
- **Installation**: `npm install react-server-dom-webpack`
10
- **Peer Dependencies**: `react@^19.1.1`, `react-dom@^19.1.1`, `webpack@^5.59.0`
11

12
## Core Imports
13

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

16
```javascript
17
// Client-side (browser)
18
import { createFromFetch, createFromReadableStream, encodeReply } from "react-server-dom-webpack/client.browser";
19

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

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

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

29
// Webpack plugin
30
import ReactFlightWebpackPlugin from "react-server-dom-webpack/plugin";
31
```
32

33
For CommonJS environments:
34

35
```javascript
36
const { createFromFetch } = require("react-server-dom-webpack/client.browser");
37
const { renderToReadableStream } = require("react-server-dom-webpack/server.browser");
38
const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");
39
```
40

41
## Basic Usage
42

43
### Client-Side Component Rendering
44

45
```javascript
46
import { createFromFetch } from "react-server-dom-webpack/client.browser";
47

48
// Create RSC response from server fetch
49
const ServerComponent = createFromFetch(
50
  fetch("/api/rsc"),
51
  {
52
    callServer: async (id, args) => {
53
      const response = await fetch("/api/server-action", {
54
        method: "POST",
55
        headers: { "Content-Type": "application/json" },
56
        body: JSON.stringify({ id, args })
57
      });
58
      return response.json();
59
    }
60
  }
61
);
62

63
// Use in React component
64
function App() {
65
  return (
66
    <Suspense fallback={<div>Loading...</div>}>
67
      {ServerComponent}
68
    </Suspense>
69
  );
70
}
71
```
72

73
### Server-Side Component Streaming
74

75
```javascript
76
import { renderToReadableStream } from "react-server-dom-webpack/server.browser";
77

78
// Render server component to stream
79
const stream = renderToReadableStream(
80
  <MyServerComponent data={serverData} />,
81
  clientManifest,
82
  {
83
    onError: (error) => console.error("RSC Error:", error)
84
  }
85
);
86

87
// Send stream to client
88
return new Response(stream, {
89
  headers: { "Content-Type": "text/x-component" }
90
});
91
```
92

93
### Webpack Configuration
94

95
```javascript
96
const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");
97

98
module.exports = {
99
  plugins: [
100
    new ReactFlightWebpackPlugin({
101
      isServer: false,
102
      clientReferences: [
103
        {
104
          directory: "./src",
105
          recursive: true,
106
          include: /\.(js|jsx|ts|tsx)$/,
107
        }
108
      ]
109
    })
110
  ]
111
};
112
```
113

114
## Architecture
115

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

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

125
## Capabilities
126

127
### Client APIs
128

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

131
```javascript { .api }
132
function createFromFetch<T>(
133
  promiseForResponse: Promise<Response>, 
134
  options?: ClientOptions
135
): Thenable<T>;
136

137
function createFromReadableStream<T>(
138
  stream: ReadableStream, 
139
  options?: ClientOptions
140
): Thenable<T>;
141

142
function createFromNodeStream<T>(
143
  stream: Readable,
144
  serverConsumerManifest: ServerConsumerManifest,
145
  options?: NodeClientOptions
146
): Thenable<T>;
147
```
148

149
[Client APIs](./client-apis.md)
150

151
### Server APIs
152

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

155
```javascript { .api }
156
function renderToReadableStream(
157
  model: ReactClientValue,
158
  webpackMap: ClientManifest,
159
  options?: ServerOptions
160
): ReadableStream;
161

162
function renderToPipeableStream(
163
  model: ReactClientValue,
164
  webpackMap: ClientManifest,
165
  options?: ServerOptions
166
): PipeableStream;
167
```
168

169
[Server APIs](./server-apis.md)
170

171
### Webpack Plugin
172

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

175
```javascript { .api }
176
class ReactFlightWebpackPlugin {
177
  constructor(options: PluginOptions);
178
  apply(compiler: WebpackCompiler): void;
179
}
180

181
interface PluginOptions {
182
  isServer: boolean;
183
  clientReferences?: ClientReferencePath | ClientReferencePath[];
184
  chunkName?: string;
185
  clientManifestFilename?: string;
186
  serverConsumerManifestFilename?: string;
187
}
188
```
189

190
[Webpack Plugin](./webpack-plugin.md)
191

192
### Data Encoding & Communication
193

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

196
```javascript { .api }
197
function encodeReply(
198
  value: ReactServerValue,
199
  options?: EncodeOptions
200
): Promise<string | URLSearchParams | FormData>;
201

202
function decodeReply(
203
  body: string | FormData,
204
  bundlerConfig?: ServerManifest
205
): any;
206

207
function decodeAction(
208
  body: FormData,
209
  bundlerConfig?: ServerManifest
210
): Promise<() => any> | null;
211
```
212

213
[Data Communication](./data-communication.md)
214

215
### Node.js Integration
216

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

219
```javascript { .api }
220
function register(): void;
221
```
222

223
[Node.js Integration](./nodejs-integration.md)
224

225
### Static Rendering
226

227
Static pre-rendering capabilities for React Server Components.
228

229
```javascript { .api }
230
function unstable_prerender(
231
  model: ReactClientValue,
232
  webpackMap: ClientManifest,
233
  options?: StaticOptions
234
): Promise<StaticResult>;
235
```
236

237
[Static Rendering](./static-rendering.md)
238

239
## Common Types
240

241
```javascript { .api }
242
interface ClientOptions {
243
  callServer?: CallServerCallback;
244
  temporaryReferences?: TemporaryReferenceSet;
245
  findSourceMapURL?: FindSourceMapURLCallback;
246
  replayConsoleLogs?: boolean;
247
  environmentName?: string;
248
}
249

250
interface ServerOptions {
251
  environmentName?: string | (() => string);
252
  filterStackFrame?: (url: string, functionName: string) => boolean;
253
  identifierPrefix?: string;
254
  signal?: AbortSignal;
255
  temporaryReferences?: TemporaryReferenceSet;
256
  onError?: (error: Error) => void;
257
  onPostpone?: (reason: string) => void;
258
}
259

260
interface ServerConsumerManifest {
261
  moduleMap: ServerConsumerModuleMap;
262
  moduleLoading: ModuleLoading;
263
  serverModuleMap: null | ServerManifest;
264
}
265

266
type ReactClientValue = any;
267
type ClientManifest = Record<string, ImportManifestEntry>;
268
type ServerManifest = Record<string, any>;
269
type TemporaryReferenceSet = any;
270

271
type CallServerCallback = <A, T>(id: string, args: A) => Promise<T>;
272
type FindSourceMapURLCallback = (fileName: string, sourceMapURL: string) => string;
273
```