Skip to content

Suggestion: renderReactTree performance improvement  #41

@arnaudbzn

Description

@arnaudbzn

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions