Updates flight client and associated webpack plugin to preinitialize imports when resolving client references on the server (SSR). The result is that the SSR stream will end up streaming in async scripts for the chunks needed to hydrate the SSR'd content instead of waiting for the flight payload to start processing rows on the client to discover imports there.

On the client however we need to be able to load the required chunks for a given import. We can't just use webpack's chunk loading because we don't have the chunkIds and are only transmitting the filepath. We implement our own chunk loading implementation which mimics webpack's with some differences. Namely there is no explicit timeout, we wait until the network fails if an earlier load or error even does not happen first.

One consequence of this approach is we may insert the same script twice for a chunk, once during SSR, and again when the flight client starts processing the flight payload for hydration. Since chunks register modules the operation is idempotent and as long as there is some cache-control in place for the resource the network requests should not be duplicated. This does mean however that it is important that if a chunk contains the webpack runtime it is not ever loaded using this custom loader implementation.

Author: gnoff

.eslintrc.js

@@ -427,6 +427,10 @@ module.exports = {
       globals: {
         __webpack_chunk_load__: 'readonly',
         __webpack_require__: 'readonly',
+        __webpack_public_path__: 'readonly',
+        __webpack_nonce__: 'readonly',
+        __WEBPACK_FLIGHT_CROSS_ORIGIN_CREDENTIALS__: 'readonly',
+        __WEBPACK_FLIGHT_CROSS_ORIGIN_ANONYMOUS__: 'readonly',
       },
     },
     {

fixtures/flight/config/webpack.config.js

@@ -252,6 +252,12 @@ module.exports = function (webpackEnv) {
         tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
           fs.existsSync(f)
         ),
+        react: [
+          'react/',
+          'react-dom/',
+          'react-server-dom-webpack/',
+          'scheduler/',
+        ],
       },
     },
     infrastructureLogging: {

fixtures/flight/server/global.js

@@ -37,6 +37,7 @@ const compress = require('compression');
 const chalk = require('chalk');
 const express = require('express');
 const http = require('http');
+const React = require('react');
 
 const {renderToPipeableStream} = require('react-dom/server');
 const {createFromNodeStream} = require('react-server-dom-webpack/client');
@@ -66,6 +67,11 @@ if (process.env.NODE_ENV === 'development') {
     webpackMiddleware(compiler, {
       publicPath: paths.publicUrlOrPath.slice(0, -1),
       serverSideRender: true,
+      headers: () => {
+        return {
+          'Cache-Control': 'max-age=10, must-revalidate',
+        };
+      },
     })
   );
   app.use(webpackHotMiddleware(compiler));
@@ -125,9 +131,9 @@ app.all('/', async function (req, res, next) {
         buildPath = path.join(__dirname, '../build/');
       }
       // Read the module map from the virtual file system.
-      const moduleMap = JSON.parse(
+      const ssrBundleConfig = JSON.parse(
         await virtualFs.readFile(
-          path.join(buildPath, 'react-ssr-manifest.json'),
+          path.join(buildPath, 'react-ssr-bundle-config.json'),
           'utf8'
         )
       );
@@ -142,10 +148,17 @@ app.all('/', async function (req, res, next) {
       // 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.
-      const root = await createFromNodeStream(rscResponse, moduleMap);
+      let root;
+      let Root = () => {
+        if (root) {
+          return root;
+        }
+        root = createFromNodeStream(rscResponse, ssrBundleConfig);
+        return root;
+      };
       // Render it into HTML by resolving the client components
       res.set('Content-type', 'text/html');
-      const {pipe} = renderToPipeableStream(root, {
+      const {pipe} = renderToPipeableStream(React.createElement(Root), {
         bootstrapScripts: mainJSChunks,
       });
       pipe(res);
@@ -177,7 +190,6 @@ app.all('/', async function (req, res, next) {
 if (process.env.NODE_ENV === 'development') {
   app.use(express.static('public'));
 } else {
-  // In production we host the static build output.
   app.use(express.static('build'));
 }
 

package.json

@@ -65,8 +65,8 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.205.1",
-    "flow-remove-types": "^2.205.1",
+    "flow-bin": "^0.202.0",
+    "flow-remove-types": "^2.202.0",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20230206.0.0",

packages/react-client/src/ReactFlightClient.js

@@ -15,7 +15,7 @@ import type {
   ClientReferenceMetadata,
   UninitializedModel,
   Response,
-  SSRManifest,
+  BundleConfig,
 } from './ReactFlightClientConfig';
 
 import type {HintModel} from 'react-server/src/ReactFlightServerConfig';
@@ -159,7 +159,7 @@ Chunk.prototype.then = function <T>(
 };
 
 export type ResponseBase = {
-  _bundlerConfig: SSRManifest,
+  _bundlerConfig: BundleConfig,
   _callServer: CallServerCallback,
   _chunks: Map<number, SomeChunk<any>>,
   ...
@@ -654,7 +654,7 @@ function missingCall() {
 }
 
 export function createResponse(
-  bundlerConfig: SSRManifest,
+  bundlerConfig: BundleConfig,
   callServer: void | CallServerCallback,
 ): ResponseBase {
   const chunks: Map<number, SomeChunk<any>> = new Map();

packages/react-client/src/ReactFlightClientStream.js

@@ -9,7 +9,7 @@
 
 import type {CallServerCallback} from './ReactFlightClient';
 import type {Response} from './ReactFlightClientConfigStream';
-import type {SSRManifest} from './ReactFlightClientConfig';
+import type {BundleConfig} from './ReactFlightClientConfig';
 
 import {
   resolveModule,
@@ -127,7 +127,7 @@ function createFromJSONCallback(response: Response) {
 }
 
 export function createResponse(
-  bundlerConfig: SSRManifest,
+  bundlerConfig: BundleConfig,
   callServer: void | CallServerCallback,
 ): Response {
   // NOTE: CHECK THE COMPILER OUTPUT EACH TIME YOU CHANGE THIS.

packages/react-client/src/ReactFlightReplyClient.js

@@ -291,6 +291,7 @@ export function processReply(
         // Possibly a Date, whose toJSON automatically calls toISOString
         // $FlowFixMe[incompatible-use]
         const originalValue = parent[key];
+        // $FlowFixMe[method-unbinding]
         if (originalValue instanceof Date) {
           return serializeDateFromDateJSON(value);
         }

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js

@@ -10,4 +10,5 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-client/src/ReactFlightClientConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js

@@ -10,4 +10,5 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-client/src/ReactFlightClientConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackEdge';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js

@@ -10,4 +10,5 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-client/src/ReactFlightClientConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';