React Server Components bindings for DOM using Webpack, enabling server-side rendering with streaming support and client-server communication.
—
Server-side functionality for rendering React Server Components to streams with client communication support and manifest-based module resolution.
Renders React Server Components to a ReadableStream for browser and edge environments with streaming support.
/**
* Renders server components to a readable stream
* @param model - React server component tree to render
* @param webpackMap - Client manifest for module resolution
* @param options - Optional rendering configuration
* @returns ReadableStream containing rendered component data
*/
function renderToReadableStream(
model: ReactClientValue,
webpackMap: ClientManifest,
options?: ServerOptions
): ReadableStream;Usage Example:
import { renderToReadableStream } from "react-server-dom-webpack/server.browser";
// Render server component to stream
async function handleRequest(request) {
const clientManifest = JSON.parse(await fs.readFile("./react-client-manifest.json"));
const stream = renderToReadableStream(
<App userId={request.params.userId} />,
clientManifest,
{
onError: (error) => {
console.error("RSC rendering error:", error);
},
identifierPrefix: "rsc-"
}
);
return new Response(stream, {
headers: {
"Content-Type": "text/x-component",
"Cache-Control": "no-cache"
}
});
}Renders React Server Components to a Node.js PipeableStream for server environments with pipe and abort capabilities.
/**
* Renders server components to a pipeable stream for Node.js
* @param model - React server component tree to render
* @param webpackMap - Client manifest for module resolution
* @param options - Optional rendering configuration
* @returns PipeableStream with pipe and abort methods
*/
function renderToPipeableStream(
model: ReactClientValue,
webpackMap: ClientManifest,
options?: ServerOptions
): PipeableStream;Usage Example:
import { renderToPipeableStream } from "react-server-dom-webpack/server.node";
import { createWriteStream } from "fs";
// Render to Node.js stream
const clientManifest = JSON.parse(fs.readFileSync("./react-client-manifest.json"));
const { pipe, abort } = renderToPipeableStream(
<ServerApp data={serverData} />,
clientManifest,
{
onError: (error) => {
console.error("Server rendering error:", error);
},
signal: abortController.signal
}
);
// Pipe to response or file
pipe(response);
// Abort if needed
setTimeout(() => abort("timeout"), 10000);Decodes client-to-server data transmitted from the client, supporting various formats.
/**
* Decodes client data sent to the server
* @param body - Request body containing encoded client data
* @param webpackMap - Server manifest for module resolution
* @param options - Optional temporary references for decoding
* @returns Promise resolving to decoded client data
*/
function decodeReply<T>(
body: string | FormData,
webpackMap: ServerManifest,
options?: {temporaryReferences?: TemporaryReferenceSet}
): Thenable<T>;Usage Example:
import { decodeReply } from "react-server-dom-webpack/server.browser";
// Handle server action request
async function handleServerAction(request) {
const serverManifest = JSON.parse(await fs.readFile("./react-ssr-manifest.json"));
// Decode client data
const clientData = await decodeReply(
await request.formData(),
serverManifest
);
// Process the action
const result = await processAction(clientData);
return Response.json(result);
}Decodes multipart form data using busboy for Node.js environments, handling file uploads and complex data.
/**
* Decodes multipart form data using busboy
* @param busboyStream - Busboy stream containing multipart data
* @param bundlerConfig - Optional server manifest for module resolution
* @returns Promise resolving to decoded form data
*/
function decodeReplyFromBusboy(
busboyStream: any,
bundlerConfig?: ServerManifest
): Promise<any>;Usage Example:
import { decodeReplyFromBusboy } from "react-server-dom-webpack/server.node";
import busboy from "busboy";
// Handle multipart form upload
async function handleUpload(request) {
const bb = busboy({ headers: request.headers });
const formData = await decodeReplyFromBusboy(bb, serverManifest);
// Process uploaded files and data
const { files, fields } = formData;
return processUpload(files, fields);
}Decodes form actions submitted from the client, returning executable action functions.
/**
* Decodes form action from client submission
* @param body - FormData containing action information
* @param bundlerConfig - Optional server manifest for module resolution
* @returns Promise resolving to executable action function or null
*/
function decodeAction(
body: FormData,
bundlerConfig?: ServerManifest
): Promise<() => any> | null;Usage Example:
import { decodeAction } from "react-server-dom-webpack/server.browser";
// Handle form action
async function handleFormAction(request) {
const formData = await request.formData();
const action = await decodeAction(formData, serverManifest);
if (action) {
// Execute the decoded action
const result = await action();
return Response.json(result);
}
return new Response("Invalid action", { status: 400 });
}Decodes form state information for progressive enhancement scenarios.
/**
* Decodes form state from action result and form data
* @param actionResult - Result from previous action execution
* @param body - FormData containing form state
* @param bundlerConfig - Optional server manifest for module resolution
* @returns Decoded form state
*/
function decodeFormState(
actionResult: any,
body: FormData,
bundlerConfig?: ServerManifest
): any;Usage Example:
import { decodeFormState } from "react-server-dom-webpack/server.browser";
// Handle progressive form enhancement
async function handleFormState(request, previousResult) {
const formData = await request.formData();
const formState = decodeFormState(
previousResult,
formData,
serverManifest
);
return renderFormWithState(formState);
}Functions for registering and managing server-side function references.
/**
* Registers a server function reference
* @param reference - Function to register as server reference
* @param id - Unique identifier for the function
* @param exportName - Export name of the function
* @returns Registered function reference
*/
function registerServerReference(
reference: Function,
id: string,
exportName: string | null
): Function;
/**
* Registers a client component reference
* @param reference - Component reference to register
* @param id - Unique identifier for the component
* @param exportName - Export name of the component
* @returns Registered component reference
*/
function registerClientReference(
reference: any,
id: string,
exportName: string | null
): any;
/**
* Creates a proxy for client module references
* @param moduleId - Module identifier for the client component
* @returns Proxy object for client module
*/
function createClientModuleProxy(moduleId: string): any;Usage Example:
import { registerServerReference, registerClientReference } from "react-server-dom-webpack/server.node";
// Register server function
const serverAction = registerServerReference(
async function updateUser(data) {
return await database.updateUser(data);
},
"user-actions#updateUser",
"updateUser"
);
// Register client component
const ClientButton = registerClientReference(
ButtonComponent,
"components/Button.tsx",
"Button"
);Server-side temporary reference management for complex object serialization.
/**
* Creates a set for tracking temporary references on the server
* @returns TemporaryReferenceSet for server-side reference tracking
*/
function createTemporaryReferenceSet(): TemporaryReferenceSet;Usage Example:
import { createTemporaryReferenceSet, renderToReadableStream } from "react-server-dom-webpack/server.browser";
// Use temporary references for complex object handling
const tempRefs = createTemporaryReferenceSet();
const stream = renderToReadableStream(
<App complexData={circularObject} />,
clientManifest,
{
temporaryReferences: tempRefs
}
);interface ServerOptions {
/** Error handling callback */
onError?: (error: Error) => void;
/** Postpone handling callback */
onPostpone?: (reason: string) => void;
/** Prefix for generated identifiers */
identifierPrefix?: string;
/** AbortSignal for cancelling rendering */
signal?: AbortSignal;
/** Temporary references for complex object serialization */
temporaryReferences?: TemporaryReferenceSet;
/** Environment name for development tools */
environmentName?: string | (() => string);
/** Filter stack frames in error reporting */
filterStackFrame?: (url: string, functionName: string) => boolean;
}
interface PipeableStream {
/** Pipe the stream to a writable destination */
pipe(destination: NodeJS.WritableStream): void;
/** Abort the rendering process */
abort(reason?: string): void;
}
type ReactServerValue = any;
type ClientManifest = Record<string, ImportManifestEntry>;
type ServerManifest = Record<string, any>;
type TemporaryReferenceSet = any;
interface ImportManifestEntry {
id: string;
chunks: string[];
name: string;
}Install with Tessl CLI
npx tessl i tessl/npm-react-server-dom-webpack