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.

.eslintrc.js

@@ -426,7 +426,7 @@ module.exports = {
       files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
         __webpack_chunk_load__: 'readonly',
-        __webpack_require__: 'readonly',
+        __webpack_require__: true,
       },
     },
     {

fixtures/flight/.nvmrc

@@ -0,0 +1 @@
+v18

fixtures/flight/config/webpack.config.js

@@ -248,6 +248,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

@@ -33,6 +33,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');
@@ -62,6 +63,11 @@ if (process.env.NODE_ENV === 'development') {
     webpackMiddleware(compiler, {
       publicPath: paths.publicUrlOrPath.slice(0, -1),
       serverSideRender: true,
+      headers: () => {
+        return {
+          'Cache-Control': 'no-store, must-revalidate',
+        };
+      },
     })
   );
   app.use(webpackHotMiddleware(compiler));
@@ -121,9 +127,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'
         )
       );
@@ -138,10 +144,21 @@ 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.chunkLoading,
+          ssrBundleConfig.ssrManifest
+        );
+        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);
@@ -173,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'));
 }
 

packages/react-client/src/ReactFlightClient.js

@@ -13,6 +13,7 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 import type {
   ClientReference,
   ClientReferenceMetadata,
+  ChunkLoading,
   SSRManifest,
   StringDecoder,
 } from './ReactFlightClientConfig';
@@ -30,6 +31,7 @@ import {
   readFinalStringChunk,
   createStringDecoder,
   usedWithSSR,
+  prepareDestinationForModule,
 } from './ReactFlightClientConfig';
 
 import {
@@ -172,6 +174,7 @@ Chunk.prototype.then = function <T>(
 
 export type Response = {
   _bundlerConfig: SSRManifest,
+  _chunkLoading: ChunkLoading,
   _callServer: CallServerCallback,
   _chunks: Map<number, SomeChunk<any>>,
   _fromJSON: (key: string, value: JSONValue) => any,
@@ -697,11 +700,13 @@ function missingCall() {
 
 export function createResponse(
   bundlerConfig: SSRManifest,
+  chunkLoading: ChunkLoading,
   callServer: void | CallServerCallback,
 ): Response {
   const chunks: Map<number, SomeChunk<any>> = new Map();
   const response: Response = {
     _bundlerConfig: bundlerConfig,
+    _chunkLoading: chunkLoading,
     _callServer: callServer !== undefined ? callServer : missingCall,
     _chunks: chunks,
     _stringDecoder: createStringDecoder(),
@@ -749,6 +754,9 @@ function resolveModule(
     response,
     model,
   );
+
+  prepareDestinationForModule(response._chunkLoading, clientReferenceMetadata);
+
   const clientReference = resolveClientReference<$FlowFixMe>(
     response._bundlerConfig,
     clientReferenceMetadata,

packages/react-client/src/forks/ReactFlightClientConfig.custom.js

@@ -25,6 +25,7 @@
 
 declare var $$$config: any;
 
+export opaque type ChunkLoading = mixed;
 export opaque type SSRManifest = mixed;
 export opaque type ServerManifest = mixed;
 export opaque type ServerReferenceId = string;
@@ -36,6 +37,8 @@ export const preloadModule = $$$config.preloadModule;
 export const requireModule = $$$config.requireModule;
 export const dispatchHint = $$$config.dispatchHint;
 export const usedWithSSR = true;
+export const prepareDestinationForModule =
+  $$$config.prepareDestinationForModule;
 
 export opaque type Source = mixed;
 

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

@@ -8,6 +8,8 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackDestinationClient';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = false;

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

@@ -11,6 +11,7 @@ export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 
 export type Response = any;
+export opaque type ChunkLoading = mixed;
 export opaque type SSRManifest = mixed;
 export opaque type ServerManifest = mixed;
 export opaque type ServerReferenceId = string;

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

@@ -8,6 +8,8 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackEdge';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackDestinationServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;

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

@@ -8,6 +8,8 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackDestinationClient';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;

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

@@ -8,6 +8,8 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigNode';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackNode';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackDestinationServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;

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

@@ -8,6 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigNode';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigNodeBundler';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode';
+export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackDestinationServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;

packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js

@@ -51,3 +51,14 @@ export function dispatchHint(code: string, model: HintModel): void {
     }
   }
 }
+
+export function preinitModulesForSSR(href: string, crossOrigin: ?string) {
+  const dispatcher = ReactDOMCurrentDispatcher.current;
+  if (dispatcher) {
+    if (typeof crossOrigin === 'string') {
+      dispatcher.preinit(href, {as: 'script', crossOrigin});
+    } else {
+      dispatcher.preinit(href, {as: 'script'});
+    }
+  }
+}

packages/react-dom/src/shared/ReactDOMTypes.js

@@ -30,7 +30,7 @@ export type PreinitOptions = {
 
 export type HostDispatcher = {
   prefetchDNS: (href: string, options?: ?PrefetchDNSOptions) => void,
-  preconnect: (href: string, options: ?PreconnectOptions) => void,
+  preconnect: (href: string, options?: ?PreconnectOptions) => void,
   preload: (href: string, options: PreloadOptions) => void,
   preinit: (href: string, options: PreinitOptions) => void,
 };

packages/react-noop-renderer/src/ReactNoopFlightClient.js

@@ -35,6 +35,7 @@ const {createResponse, processBinaryChunk, getRoot, close} = ReactFlightClient({
   resolveClientReference(bundlerConfig: null, idx: string) {
     return idx;
   },
+  prepareDestinationForModule(chunkLoading: mixed, metadata: mixed) {},
   preloadModule(idx: string) {},
   requireModule(idx: string) {
     return readModule(idx);

packages/react-server-dom-webpack/src/ReactFlightClientConfigNodeBundler.js → packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode.js

@@ -13,6 +13,17 @@ import type {
   RejectedThenable,
 } from 'shared/ReactTypes';
 
+import type {ClientReferenceMetadata as SharedClientReferenceMetadata} from './shared/ReactFlightClientReference';
+import type {ChunkLoading} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  ID,
+  CHUNKS,
+  NAME,
+  isAsyncClientReference,
+} from './shared/ReactFlightClientReference';
+import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
+
 export type SSRManifest = {
   [clientId: string]: {
     [clientExportName: string]: ClientReference<any>,
@@ -23,12 +34,7 @@ export type ServerManifest = void;
 
 export type ServerReferenceId = string;
 
-export opaque type ClientReferenceMetadata = {
-  id: string,
-  chunks: Array<string>,
-  name: string,
-  async?: boolean,
-};
+export opaque type ClientReferenceMetadata = SharedClientReferenceMetadata;
 
 // eslint-disable-next-line no-unused-vars
 export opaque type ClientReference<T> = {
@@ -37,12 +43,25 @@ export opaque type ClientReference<T> = {
   async?: boolean,
 };
 
+// The reason this function needs to defined here in this file instead of just
+// being exported directly from the WebpackDestination... file is because the
+// ClientReferenceMetadata is opaque and we can't unwrap it there.
+// This should get inlined and we could also just implement an unwrapping function
+// though that risks it getting used in places it shouldn't be. This is unfortunate
+// but currently it seems to be the best option we have.
+export function prepareDestinationForModule(
+  chunkLoading: ChunkLoading,
+  metadata: ClientReferenceMetadata,
+) {
+  prepareDestinationWithChunks(chunkLoading, metadata[CHUNKS]);
+}
+
 export function resolveClientReference<T>(
   bundlerConfig: SSRManifest,
   metadata: ClientReferenceMetadata,
 ): ClientReference<T> {
-  const moduleExports = bundlerConfig[metadata.id];
-  let resolvedModuleData = moduleExports[metadata.name];
+  const moduleExports = bundlerConfig[metadata[ID]];
+  let resolvedModuleData = moduleExports[metadata[NAME]];
   let name;
   if (resolvedModuleData) {
     // The potentially aliased name.
@@ -53,17 +72,18 @@ export function resolveClientReference<T>(
     if (!resolvedModuleData) {
       throw new Error(
         'Could not find the module "' +
-          metadata.id +
+          metadata[ID] +
           '" in the React SSR Manifest. ' +
           'This is probably a bug in the React Server Components bundler.',
       );
     }
-    name = metadata.name;
+    name = metadata[NAME];
   }
+
   return {
     specifier: resolvedModuleData.specifier,
     name: name,
-    async: metadata.async,
+    async: isAsyncClientReference(metadata),
   };
 }