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
Overview
Eval results
Files

server-apis.mddocs/

Server APIs

Server-side functionality for rendering React Server Components to streams with client communication support and manifest-based module resolution.

Capabilities

Render to Readable Stream

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"
    }
  });
}

Render to Pipeable Stream

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);

Decode Reply

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);
}

Decode Reply from Busboy

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);
}

Decode Action

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 });
}

Decode Form State

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);
}

Server Reference Management

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"
);

Temporary Reference Management

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
  }
);

Types

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

docs

client-apis.md

data-communication.md

index.md

nodejs-integration.md

server-apis.md

static-rendering.md

webpack-plugin.md

tile.json