renderApp() — react Function Reference

Architecture documentation for the renderApp() function in global.js from the react codebase.

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ renderApp() — react Function Reference

Dependency Diagram

graph TD
  72b7f075_2f16_ce2c_6a0e_5c9e2cdc520b["renderApp()"]
  d1f0edf7_278e_c88b_1679_e0804488767d["global.js"]
  72b7f075_2f16_ce2c_6a0e_5c9e2cdc520b -->|defined in| d1f0edf7_278e_c88b_1679_e0804488767d
  e9aed42d_8595_c259_0f8b_8410be9c9da2["request()"]
  72b7f075_2f16_ce2c_6a0e_5c9e2cdc520b -->|calls| e9aed42d_8595_c259_0f8b_8410be9c9da2
  style 72b7f075_2f16_ce2c_6a0e_5c9e2cdc520b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight/server/global.js lines 89–227

async function renderApp(req, res, next) {
  // Proxy the request to the regional server.
  const proxiedHeaders = {
    'X-Forwarded-Host': req.hostname,
    'X-Forwarded-For': req.ips,
    'X-Forwarded-Port': 3000,
    'X-Forwarded-Proto': req.protocol,
  };
  // Proxy other headers as desired.
  if (req.get('rsc-action')) {
    proxiedHeaders['Content-type'] = req.get('Content-type');
    proxiedHeaders['rsc-action'] = req.get('rsc-action');
  } else if (req.get('Content-type')) {
    proxiedHeaders['Content-type'] = req.get('Content-type');
  }
  if (req.headers['cache-control']) {
    proxiedHeaders['Cache-Control'] = req.get('cache-control');
  }
  if (req.get('rsc-request-id')) {
    proxiedHeaders['rsc-request-id'] = req.get('rsc-request-id');
  }

  const requestsPrerender = req.path === '/prerender';

  const promiseForData = request(
    {
      host: '127.0.0.1',
      port: 3001,
      method: req.method,
      path: requestsPrerender ? '/?prerender=1' : '/',
      headers: proxiedHeaders,
    },
    req
  );

  if (req.accepts('text/html')) {
    try {
      const rscResponse = await promiseForData;

      let virtualFs;
      let buildPath;
      if (process.env.NODE_ENV === 'development') {
        const {devMiddleware} = res.locals.webpack;
        virtualFs = devMiddleware.outputFileSystem.promises;
        buildPath = devMiddleware.stats.toJson().outputPath;
      } else {
        virtualFs = fs;
        buildPath = path.join(__dirname, '../build/');
      }
      // Read the module map from the virtual file system.
      const serverConsumerManifest = JSON.parse(
        await virtualFs.readFile(
          path.join(buildPath, 'react-ssr-manifest.json'),
          'utf8'
        )
      );

      // Read the entrypoints containing the initial JS to bootstrap everything.
      // For other pages, the chunks in the RSC payload are enough.
      const mainJSChunks = JSON.parse(
        await virtualFs.readFile(
          path.join(buildPath, 'entrypoint-manifest.json'),
          'utf8'
        )
      ).main.js;
      // For HTML, we're a "client" emulator that runs the client code,
      // so we start by consuming the RSC payload. This needs a module
      // map that reverse engineers the client-side path to the SSR path.

      // We need to get the formState before we start rendering but we also
      // need to run the Flight client inside the render to get all the preloads.
      // The API is ambivalent about what's the right one so we need two for now.

      // Tee the response into two streams so that we can do both.
      const rscResponse1 = new PassThrough();
      const rscResponse2 = new PassThrough();

      rscResponse.pipe(rscResponse1);
      rscResponse.pipe(rscResponse2);

      const {formState} = await createFromNodeStream(