render() — react Function Reference

Architecture documentation for the render() function in server.tsx from the react codebase.

Function tsx BabelCompiler Entrypoint called by 1

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  076cff57_541c_4f9e_ddd8_39161a3860b3["render()"]
  a79cd622_5834_df3e_54e0_56ba202376a6["server.tsx"]
  076cff57_541c_4f9e_ddd8_39161a3860b3 -->|defined in| a79cd622_5834_df3e_54e0_56ba202376a6
  eeec41c8_f382_b987_ad4a_7541ae858115["handleAction()"]
  eeec41c8_f382_b987_ad4a_7541ae858115 -->|calls| 076cff57_541c_4f9e_ddd8_39161a3860b3
  style 076cff57_541c_4f9e_ddd8_39161a3860b3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight-parcel/src/server.tsx lines 52–84

async function render(
  req: ExpressRequest,
  res: ExpressResponse,
  component: ReactElement,
  actionResult?: any,
) {
  // Render RSC payload.
  let root: any = component;
  if (actionResult) {
    root = {result: actionResult, root};
  }
  let stream = renderToReadableStream(root);
  if (req.accepts('text/html')) {
    res.setHeader('Content-Type', 'text/html');

    // Use client react to render the RSC payload to HTML.
    let [s1, s2] = stream.tee();
    let data: Promise<ReactElement>;
    function Content() {
      data ??= createFromReadableStream<ReactElement>(s1);
      return ReactClient.use(data);
    }

    let htmlStream = await renderHTMLToReadableStream(<Content />, {
      bootstrapScriptContent: (Todos as any).bootstrapScript,
    });
    let response = htmlStream.pipeThrough(injectRSCPayload(s2));
    Readable.fromWeb(response as NodeReadableStream).pipe(res);
  } else {
    res.set('Content-Type', 'text/x-component');
    Readable.fromWeb(stream as NodeReadableStream).pipe(res);
  }
}