Function render

packages/render/src/node/render.tsx:9–86

(node: React.ReactNode, options?: Options)

import { readStream } from './read-stream';

export const render = async (node: React.ReactNode, options?: Options) => {
  const reactDOMServer = await import('react-dom/server').then((m) => {
    if ('default' in m) {
      return m.default;
    }
    return m;
  });

  let html!: string;
  await new Promise<void>((resolve, reject) => {
    if (
      Object.hasOwn(reactDOMServer, 'renderToReadableStream') &&
      typeof WritableStream !== 'undefined'
    ) {
      const ErrorBoundary = createErrorBoundary(reject);
      reactDOMServer
        .renderToReadableStream(
          <ErrorBoundary>
            <Suspense>{node}</Suspense>
          </ErrorBoundary>,
          {
            progressiveChunkSize: Number.POSITIVE_INFINITY,
            onError(error) {
              // Throw immediately when an error occurs to prevent CSR fallback
              reject(error);
            },
          },
        )
        .then(async (stream) => {
          await stream.allReady;
          return readStream(stream);
        })
        .then((result) => {
          html = result;
          resolve();
        })
        .catch(reject);
    } else {
      const ErrorBoundary = createErrorBoundary(reject);
      const stream = reactDOMServer.renderToPipeableStream(
        <ErrorBoundary>
          <Suspense>{node}</Suspense>
        </ErrorBoundary>,
        {
          async onAllReady() {
            html = await readStream(stream).then((s: string) => {
              // Workaround for https://github.com/facebook/react/pull/26228
              // (fixed in React 19, not backported to 18)
              return s.replaceAll('\0', '');
            });
            resolve();
          },
          onError(error) {
            reject(error);
          },
          progressiveChunkSize: Number.POSITIVE_INFINITY,
        },
      );