0
# Client APIs
1

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

4
## Capabilities
5

6
### Create from Fetch
7

8
Creates a React Server Component response from a fetch promise, enabling client-side consumption of server-rendered components.
9

10
```javascript { .api }
11
/**
12
 * Creates RSC response from a fetch promise
13
 * @param promiseForResponse - Promise resolving to server response
14
 * @param options - Optional configuration for client behavior
15
 * @returns Thenable resolving to the server component
16
 */
17
function createFromFetch<T>(
18
  promiseForResponse: Promise<Response>,
19
  options?: ClientOptions
20
): Thenable<T>;
21
```
22

23
**Usage Example:**
24

25
```javascript
26
import { createFromFetch } from "react-server-dom-webpack/client.browser";
27

28
const ServerComponent = createFromFetch(
29
  fetch("/api/server-component", {
30
    headers: { "Accept": "text/x-component" }
31
  }),
32
  {
33
    callServer: async (id, args) => {
34
      const response = await fetch("/api/server-action", {
35
        method: "POST",
36
        body: JSON.stringify({ id, args })
37
      });
38
      return response.json();
39
    }
40
  }
41
);
42
```
43

44
### Create from Readable Stream
45

46
Creates a React Server Component response from a ReadableStream, useful for custom streaming scenarios.
47

48
```javascript { .api }
49
/**
50
 * Creates RSC response from a readable stream
51
 * @param stream - ReadableStream containing server component data
52
 * @param options - Optional configuration for client behavior
53
 * @returns Thenable resolving to the server component
54
 */
55
function createFromReadableStream<T>(
56
  stream: ReadableStream,
57
  options?: ClientOptions
58
): Thenable<T>;
59
```
60

61
**Usage Example:**
62

63
```javascript
64
import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
65

66
// Custom stream from WebSocket or other source
67
const customStream = new ReadableStream({
68
  start(controller) {
69
    // Stream server component data
70
    controller.enqueue(serverComponentChunk);
71
  }
72
});
73

74
const ServerComponent = createFromReadableStream(customStream, {
75
  environmentName: "development",
76
  replayConsoleLogs: true
77
});
78
```
79

80
### Create from Node Stream
81

82
Creates a React Server Component response from a Node.js Readable stream, specifically for Node.js environments.
83

84
```javascript { .api }
85
/**
86
 * Creates RSC response from a Node.js readable stream
87
 * @param stream - Node.js Readable stream containing server component data
88
 * @param serverConsumerManifest - Manifest for module resolution
89
 * @param options - Optional configuration for Node.js client
90
 * @returns Thenable resolving to the server component
91
 */
92
function createFromNodeStream<T>(
93
  stream: Readable,
94
  serverConsumerManifest: ServerConsumerManifest,
95
  options?: NodeClientOptions
96
): Thenable<T>;
97
```
98

99
**Usage Example:**
100

101
```javascript
102
import { createFromNodeStream } from "react-server-dom-webpack/client.node";
103
import { createReadStream } from "fs";
104

105
// Load manifest for module resolution
106
const manifest = JSON.parse(fs.readFileSync("./react-ssr-manifest.json"));
107

108
const ServerComponent = createFromNodeStream(
109
  serverStream,
110
  manifest,
111
  {
112
    nonce: "security-nonce-123",
113
    encodeFormAction: (id, args) => ({ action: `/api/form/${id}` })
114
  }
115
);
116
```
117

118
### Encode Reply
119

120
Encodes client-to-server data for transmission, supporting various data formats including FormData.
121

122
```javascript { .api }
123
/**
124
 * Encodes client data for server transmission
125
 * @param value - Value to encode for server communication
126
 * @param options - Optional encoding configuration
127
 * @returns Promise resolving to encoded data (string, URLSearchParams, or FormData)
128
 */
129
function encodeReply(
130
  value: ReactServerValue,
131
  options?: EncodeReplyOptions
132
): Promise<string | URLSearchParams | FormData>;
133
```
134

135
**Usage Example:**
136

137
```javascript
138
import { encodeReply } from "react-server-dom-webpack/client.browser";
139

140
// Encode complex data for server action
141
const formData = await encodeReply({
142
  action: "updateUser",
143
  data: { name: "John", email: "john@example.com" },
144
  files: [file1, file2]
145
}, {
146
  signal: abortController.signal
147
});
148

149
// Send to server
150
await fetch("/api/server-action", {
151
  method: "POST",
152
  body: formData
153
});
154
```
155

156
### Server Reference Functions
157

158
Functions for creating and managing references to server-side functions that can be called from the client.
159

160
```javascript { .api }
161
/**
162
 * Creates a reference to a server function
163
 * @param id - Unique identifier for the server function
164
 * @param callServer - Function to handle server communication
165
 * @returns Function that calls the server when invoked
166
 */
167
function createServerReference<A extends Iterable<any>, T>(
168
  id: any,
169
  callServer: CallServerCallback
170
): (...args: A) => Promise<T>;
171

172
/**
173
 * Registers a server function reference
174
 * @param reference - Function reference to register
175
 * @param id - Unique identifier for the server function
176
 * @param exportName - Export name of the function
177
 * @returns Registered reference
178
 */
179
function registerServerReference(
180
  reference: Function,
181
  id: string,
182
  exportName: string | null
183
): Function;
184
```
185

186
**Usage Example:**
187

188
```javascript
189
import { createServerReference } from "react-server-dom-webpack/client.browser";
190

191
// Create reference to server function
192
const serverAction = createServerReference(
193
  "user-actions#updateProfile",
194
  async (id, args) => {
195
    const response = await fetch(`/api/actions/${id}`, {
196
      method: "POST",
197
      body: JSON.stringify(args)
198
    });
199
    return response.json();
200
  }
201
);
202

203
// Use in component
204
async function handleSubmit(formData) {
205
  const result = await serverAction(formData);
206
  console.log("Server response:", result);
207
}
208
```
209

210
### Temporary Reference Management
211

212
Functions for managing temporary object references during client-server serialization.
213

214
```javascript { .api }
215
/**
216
 * Creates a set for tracking temporary references
217
 * @returns TemporaryReferenceSet for reference tracking
218
 */
219
function createTemporaryReferenceSet(): TemporaryReferenceSet;
220
```
221

222
**Usage Example:**
223

224
```javascript
225
import { createTemporaryReferenceSet, encodeReply } from "react-server-dom-webpack/client.browser";
226

227
// Create reference set for complex object serialization
228
const tempRefs = createTemporaryReferenceSet();
229

230
const encodedData = await encodeReply(complexObject, {
231
  temporaryReferences: tempRefs
232
});
233
```
234

235
## Types
236

237
```javascript { .api }
238
interface ClientOptions {
239
  /** Function to handle server communication */
240
  callServer?: CallServerCallback;
241
  /** Set for tracking temporary object references */
242
  temporaryReferences?: TemporaryReferenceSet;
243
  /** Function to resolve source map URLs for debugging */
244
  findSourceMapURL?: FindSourceMapURLCallback;
245
  /** Whether to replay console logs from server */
246
  replayConsoleLogs?: boolean;
247
  /** Environment name for debugging */
248
  environmentName?: string;
249
}
250

251
interface NodeClientOptions {
252
  /** Nonce for security purposes */
253
  nonce?: string;
254
  /** Function to encode form actions */
255
  encodeFormAction?: EncodeFormActionCallback;
256
  /** Function to resolve source map URLs */
257
  findSourceMapURL?: FindSourceMapURLCallback;
258
  /** Whether to replay console logs from server */
259
  replayConsoleLogs?: boolean;
260
  /** Environment name for debugging */
261
  environmentName?: string;
262
}
263

264
interface EncodeReplyOptions {
265
  /** Set for tracking temporary references */
266
  temporaryReferences?: TemporaryReferenceSet;
267
  /** AbortSignal for cancelling encoding */
268
  signal?: AbortSignal;
269
}
270

271
interface ServerConsumerManifest {
272
  /** Mapping of modules for client consumption */
273
  moduleMap: ServerConsumerModuleMap;
274
  /** Module loading configuration */
275
  moduleLoading: ModuleLoading;
276
  /** Server-side module manifest */
277
  serverModuleMap: null | ServerManifest;
278
}
279

280
type CallServerCallback = <A, T>(id: string, args: A) => Promise<T>;
281
type EncodeFormActionCallback = (id: any, args: Promise<any>) => ReactCustomFormAction;
282
type FindSourceMapURLCallback = (fileName: string, sourceMapURL: string) => string;
283

284
type ReactServerValue = any;
285
type TemporaryReferenceSet = any;
286
type Thenable<T> = Promise<T> | { then(resolve: (value: T) => void, reject: (error: any) => void): void };
287
```