Add server support for React Flight Webpack Plugin

[AbanoubGhadban]

Summary

I know this PR is still a work in progress, but I wanted to share the changes I made to enable webpack-bundled server bundle in my project work and get feedback on whether this approach makes sense.

I've been working on adding server-side support to the React Flight Webpack Plugin and would like to validate my approach before submitting a PR.

Current Implementation

I've modified the ReactFlightWebpackPlugin to handle server-side bundling by:

1. Generating a react-server-client-manifest.json file for the server bundle that maps client component file paths to their server module IDs and chunks. This manifest parallels the client-side react-client-manifest.json but contains server-specific metadata.

2. For server bundles, the plugin tracks module IDs and chunks without creating AsyncDependenciesBlock for client components, as my implementation works with single-chunk server bundles (at least this is the case that I used the updated version of the plugin for).

The plugin combines these manifests during SSR to enable proper client component hydration, mapping between client and server representations of components.

const createSSRManifest = (
  reactServerManifestFileName = 'react-server-client-manifest.json',
  reactClientManifestFileName = 'react-client-manifest.json',
) => {
  const reactServerManifest = loadJsonFile(reactServerManifestFileName);
  const reactClientManifest = loadJsonFile(reactClientManifestFileName);
  const ssrManifest = {
    moduleLoading: {
      prefix: "/webpack/development/",
      crossOrigin: null,
    },
    moduleMap: {}
  };
  // Map client IDs to server chunks for SSR
  Object.entries(reactClientManifest).forEach(([absoluteFileUrl, clientFileBundlingInfo]) => {
    const serverFileBundlingInfo = reactServerManifest[absoluteFileUrl];
    ssrManifest.moduleMap[clientFileBundlingInfo.id] = {
      '': {
        id: serverFileBundlingInfo.id,
        chunks: serverFileBundlingInfo.chunks,
        name: '*',
      }
    };
  });
  return ssrManifest;
}

The SSR manifest is then used with:

const ssrManifest = createSSRManifest(reactServerManifestFileName, reactClientManifestFileName);
return use(createFromFetch(fetch('http://localhost:3000/rsc/<component-name>'), ssrManifest));

The implementation worked for my use case, but I'm not sure if it's the correct approach for handling server-side compilation in the webpack plugin.

Questions for Discussion

1. Is this the correct approach for handling server-side rendering of server and client components?

2. Manifest Generation:

• Is generating separate manifests (react-client-manifest.json and react-server-client-manifest.json) the right approach?
• Is my method of combining them into an SSR manifest correct?

3. If it's not the correct approach, what is the planned approach for handling server-side rendering of server and client components when the server bundle is bundled with Webpack?

How did you test this change?

[facebook-github-bot]

Hi @AbanoubGhadban!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[react-sizebot]

Comparing: 9b042f9...0aa1da3

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	515.71 kB	515.71 kB	=	92.09 kB	92.09 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	565.64 kB	565.64 kB	=	100.84 kB	100.84 kB
facebook-www/ReactDOM-prod.classic.js	=	636.70 kB	636.70 kB	=	112.08 kB	112.08 kB
facebook-www/ReactDOM-prod.modern.js	=	627.02 kB	627.02 kB	=	110.50 kB	110.49 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+2.64%	14.30 kB	14.68 kB	+1.85%	3.84 kB	3.91 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+2.64%	14.30 kB	14.68 kB	+1.85%	3.84 kB	3.91 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+2.64%	14.30 kB	14.68 kB	+1.85%	3.84 kB	3.91 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+2.64%	14.30 kB	14.68 kB	+1.85%	3.84 kB	3.91 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+2.64%	14.30 kB	14.68 kB	+1.85%	3.84 kB	3.91 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+2.64%	14.30 kB	14.68 kB	+1.85%	3.84 kB	3.91 kB

Generated by 🚫 dangerJS against cfd4f83