server-components-demo icon indicating copy to clipboard operation
server-components-demo copied to clipboard

Suggestion: renderReactTree performance improvement

Open arnaudbzn opened this issue 4 years ago • 0 comments

In renderReactTree the following block of code is only required once at runtime:

 await waitForWebpack();
 const manifest = readFileSync(
    path.resolve(__dirname, '../build/react-client-manifest.json'),
    'utf8'
 );
 const moduleMap = JSON.parse(manifest);

In the current example, the performance impact is minor but with a large number of components, doing this treatment for each server request can have bigger impact.

A quick optimization below:

let moduleMap;

async function renderReactTree(res, props) {
  if (!moduleMap) {
    await waitForWebpack()
    const manifest = readFileSync(
      path.resolve(__dirname, '../build/react-client-manifest.json'),
      'utf8'
    );
    moduleMap = JSON.parse(manifest);
  }
  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

The NextJS demo is optimized: https://github.com/vercel/next-server-components/blob/master/libs/send-res.js

arnaudbzn avatar Jan 05 '21 11:01 arnaudbzn