From fa11bd6ecca57d8ddbc728df881f0e165225c04f Mon Sep 17 00:00:00 2001
From: mofeiZ <34200447+mofeiZ@users.noreply.github.com>
Date: Wed, 30 Nov 2022 13:22:08 -0500
Subject: [PATCH] [ServerRenderer] Add option to send instructions as data
 attributes (#25437)

### Changes made:
- Running with enableFizzExternalRuntime (feature flag) and
unstable_externalRuntimeSrc (param) will generate html nodes with data
attributes that encode Fizz instructions.
```
<div
  hidden data-rxi=""
  data-bid="param0"
  data-dgst="param1"
></div>
```
- Added an external runtime browser script
`ReactDOMServerExternalRuntime`, which processes and removes these nodes
- This runtime should be passed as to renderInto[...] via
`unstable_externalRuntimeSrc`
- Since this runtime is render blocking (for all streamed suspense
boundaries and segments), we want this to reach the client as early as
possible. By default, Fizz will send this script at the end of the shell
when it detects dynamic content (e.g. suspenseful pending tasks), but it
can be sent even earlier by calling `preinit(...)` inside a component.
- The current implementation relies on Float to dedupe sending
`unstable_externalRuntimeSrc`, so `enableFizzExternalRuntime` is only
valid when `enableFloat` is also set.
---
 .../src/server/ReactDOMFloatServer.js         |  14 +-
 .../server/ReactDOMServerExternalRuntime.js   | 102 +++-
 .../src/server/ReactDOMServerFormatConfig.js  | 524 +++++++++++++++---
 .../ReactDOMServerLegacyFormatConfig.js       |  24 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  | 156 +++++-
 .../src/__tests__/ReactDOMFloat-test.js       |  78 ++-
 .../src/server/ReactDOMLegacyServerImpl.js    |   3 +
 .../react-dom/src/test-utils/FizzTestUtils.js |  79 ++-
 .../server/ReactNativeServerFormatConfig.js   |   1 +
 .../src/ReactDOMServerFB.js                   |   3 +
 packages/react-server/src/ReactFizzServer.js  |   9 +-
 scripts/error-codes/codes.json                |   3 +-
 12 files changed, 845 insertions(+), 151 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
index 4af71458cb6a7..2805b629d4b48 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
@@ -275,7 +275,7 @@ type PreinitOptions = {
   crossOrigin?: string,
   integrity?: string,
 };
-function preinit(href: string, options: PreinitOptions) {
+function preinit(href: string, options: PreinitOptions): void {
   if (!currentResources) {
     // While we expect that preinit calls are primarily going to be observed
     // during render because effects and events don't run on the server it is
@@ -285,7 +285,17 @@ function preinit(href: string, options: PreinitOptions) {
     // simply return and do not warn.
     return;
   }
-  const resources = currentResources;
+  preinitImpl(currentResources, href, options);
+}
+
+// On the server, preinit may be called outside of render when sending an
+// external SSR runtime as part of the initial resources payload. Since this
+// is an internal React call, we do not need to use the resources stack.
+export function preinitImpl(
+  resources: Resources,
+  href: string,
+  options: PreinitOptions,
+): void {
   if (__DEV__) {
     validatePreinitArguments(href, options);
   }
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index 01f53697e2e5f..63f5b64d93c8c 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -3,6 +3,7 @@
  *  clients. Therefore, it should be fast and not have many external dependencies.
  * @flow
  */
+/* eslint-disable dot-notation */
 
 // Imports are resolved statically by the closure compiler in release bundles
 // and by rollup in jest unit tests
@@ -13,13 +14,94 @@ import {
   completeSegment,
 } from './fizz-instruction-set/ReactDOMFizzInstructionSet';
 
-// Intentionally does nothing. Implementation will be added in future PR.
-// eslint-disable-next-line no-unused-vars
-const observer = new MutationObserver(mutations => {
-  // These are only called so I can check what the module output looks like. The
-  // code is unreachable.
-  clientRenderBoundary();
-  completeBoundaryWithStyles();
-  completeBoundary();
-  completeSegment();
-});
+if (!window.$RC) {
+  // TODO: Eventually remove, we currently need to set these globals for
+  // compatibility with ReactDOMFizzInstructionSet
+  window.$RC = completeBoundary;
+  window.$RM = new Map();
+}
+
+if (document.readyState === 'loading') {
+  if (document.body != null) {
+    installFizzInstrObserver(document.body);
+  } else {
+    // body may not exist yet if the fizz runtime is sent in <head>
+    // (e.g. as a preinit resource)
+    const domBodyObserver = new MutationObserver(() => {
+      // We expect the body node to be stable once parsed / created
+      if (document.body) {
+        if (document.readyState === 'loading') {
+          installFizzInstrObserver(document.body);
+        }
+        handleExistingNodes();
+        domBodyObserver.disconnect();
+      }
+    });
+    // documentElement must already exist at this point
+    // $FlowFixMe[incompatible-call]
+    domBodyObserver.observe(document.documentElement, {childList: true});
+  }
+}
+
+handleExistingNodes();
+
+function handleExistingNodes() {
+  const existingNodes = document.getElementsByTagName('template');
+  for (let i = 0; i < existingNodes.length; i++) {
+    handleNode(existingNodes[i]);
+  }
+}
+
+function installFizzInstrObserver(target /*: Node */) {
+  const fizzInstrObserver = new MutationObserver(mutations => {
+    for (let i = 0; i < mutations.length; i++) {
+      const addedNodes = mutations[i].addedNodes;
+      for (let j = 0; j < addedNodes.length; j++) {
+        if (addedNodes.item(j).parentNode) {
+          handleNode(addedNodes.item(j));
+        }
+      }
+    }
+  });
+  // We assume that instruction data nodes are eventually appended to the
+  // body, even if Fizz is streaming to a shell / subtree.
+  fizzInstrObserver.observe(target, {
+    childList: true,
+  });
+  window.addEventListener('DOMContentLoaded', () => {
+    fizzInstrObserver.disconnect();
+  });
+}
+
+function handleNode(node_ /*: Node */) {
+  // $FlowFixMe[incompatible-cast]
+  if (node_.nodeType !== 1 || !(node_ /*: HTMLElement*/).dataset) {
+    return;
+  }
+  // $FlowFixMe[incompatible-cast]
+  const node = (node_ /*: HTMLElement*/);
+  const dataset = node.dataset;
+  if (dataset['rxi'] != null) {
+    clientRenderBoundary(
+      dataset['bid'],
+      dataset['dgst'],
+      dataset['msg'],
+      dataset['stck'],
+    );
+    node.remove();
+  } else if (dataset['rri'] != null) {
+    // Convert styles here, since its type is Array<Array<string>>
+    completeBoundaryWithStyles(
+      dataset['bid'],
+      dataset['sid'],
+      JSON.parse(dataset['sty']),
+    );
+    node.remove();
+  } else if (dataset['rci'] != null) {
+    completeBoundary(dataset['bid'], dataset['sid']);
+    node.remove();
+  } else if (dataset['rsi'] != null) {
+    completeSegment(dataset['sid'], dataset['pid']);
+    node.remove();
+  }
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 91d241e4e7929..c66292d801835 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -63,6 +63,7 @@ import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
 
 import {
+  preinitImpl,
   prepareToRenderResources,
   finishRenderingResources,
   resourcesFromElement,
@@ -105,22 +106,33 @@ export function cleanupAfterRender(previousDispatcher: mixed) {
 // E.g. this can be used to distinguish legacy renderers from this modern one.
 export const isPrimaryRenderer = true;
 
+export type StreamingFormat = 0 | 1;
+const ScriptStreamingFormat: StreamingFormat = 0;
+const DataStreamingFormat: StreamingFormat = 1;
+
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
-  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
   idPrefix: string,
   nextSuspenseID: number,
+  streamingFormat: StreamingFormat,
+  // state for script streaming format, unused if using external runtime / data
+  startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
-  sentStyleInsertionFunction: boolean, // We allow the legacy renderer to extend this object.
+  sentStyleInsertionFunction: boolean,
+  // state for data streaming format
+  externalRuntimeConfig: BootstrapScriptDescriptor | null,
+  // We allow the legacy renderer to extend this object.
   ...
 };
 
+const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
+
 const startInlineScript = stringToPrecomputedChunk('<script>');
 const endInlineScript = stringToPrecomputedChunk('</script>');
 
@@ -154,6 +166,8 @@ export type BootstrapScriptDescriptor = {
   integrity?: string,
 };
 // Allows us to keep track of what we've already written so we can refer back to it.
+// if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
+// is set, the server will send instructions via data attributes (instead of inline scripts)
 export function createResponseState(
   identifierPrefix: string | void,
   nonce: string | void,
@@ -170,6 +184,8 @@ export function createResponseState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const bootstrapChunks = [];
+  let externalRuntimeDesc = null;
+  let streamingFormat = ScriptStreamingFormat;
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
       inlineScriptWithNonce,
@@ -178,26 +194,21 @@ export function createResponseState(
     );
   }
   if (enableFizzExternalRuntime) {
-    if (externalRuntimeConfig !== undefined) {
-      const src =
-        typeof externalRuntimeConfig === 'string'
-          ? externalRuntimeConfig
-          : externalRuntimeConfig.src;
-      const integrity =
-        typeof externalRuntimeConfig === 'string'
-          ? undefined
-          : externalRuntimeConfig.integrity;
-      bootstrapChunks.push(
-        startScriptSrc,
-        stringToChunk(escapeTextForBrowser(src)),
+    if (!enableFloat) {
+      throw new Error(
+        'enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle.',
       );
-      if (integrity) {
-        bootstrapChunks.push(
-          scriptIntegirty,
-          stringToChunk(escapeTextForBrowser(integrity)),
-        );
+    }
+    if (externalRuntimeConfig !== undefined) {
+      streamingFormat = DataStreamingFormat;
+      if (typeof externalRuntimeConfig === 'string') {
+        externalRuntimeDesc = {
+          src: externalRuntimeConfig,
+          integrity: undefined,
+        };
+      } else {
+        externalRuntimeDesc = externalRuntimeConfig;
       }
-      bootstrapChunks.push(endAsyncScript);
     }
   }
   if (bootstrapScripts !== undefined) {
@@ -242,16 +253,18 @@ export function createResponseState(
   }
   return {
     bootstrapChunks: bootstrapChunks,
-    startInlineScript: inlineScriptWithNonce,
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
     idPrefix: idPrefix,
     nextSuspenseID: 0,
+    streamingFormat,
+    startInlineScript: inlineScriptWithNonce,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
     sentStyleInsertionFunction: false,
+    externalRuntimeConfig: externalRuntimeDesc,
   };
 }
 
@@ -2384,29 +2397,53 @@ const completeSegmentScript1Full = stringToPrecomputedChunk(
 );
 const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
-const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
+
+const completeSegmentData1 = stringToPrecomputedChunk(
+  '<template data-rsi="" data-sid="',
+);
+const completeSegmentData2 = stringToPrecomputedChunk('" data-pid="');
+const completeSegmentDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedSegmentInstruction(
   destination: Destination,
   responseState: ResponseState,
   contentSegmentID: number,
 ): boolean {
-  writeChunk(destination, responseState.startInlineScript);
-  if (!responseState.sentCompleteSegmentFunction) {
-    // The first time we write this, we'll need to include the full implementation.
-    responseState.sentCompleteSegmentFunction = true;
-    writeChunk(destination, completeSegmentScript1Full);
+  const scriptFormat =
+    !enableFizzExternalRuntime ||
+    responseState.streamingFormat === ScriptStreamingFormat;
+  if (scriptFormat) {
+    writeChunk(destination, responseState.startInlineScript);
+    if (!responseState.sentCompleteSegmentFunction) {
+      // The first time we write this, we'll need to include the full implementation.
+      responseState.sentCompleteSegmentFunction = true;
+      writeChunk(destination, completeSegmentScript1Full);
+    } else {
+      // Future calls can just reuse the same function.
+      writeChunk(destination, completeSegmentScript1Partial);
+    }
   } else {
-    // Future calls can just reuse the same function.
-    writeChunk(destination, completeSegmentScript1Partial);
+    writeChunk(destination, completeSegmentData1);
   }
+
+  // Write function arguments, which are string literals
   writeChunk(destination, responseState.segmentPrefix);
   const formattedID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedID);
-  writeChunk(destination, completeSegmentScript2);
+  if (scriptFormat) {
+    writeChunk(destination, completeSegmentScript2);
+  } else {
+    writeChunk(destination, completeSegmentData2);
+  }
   writeChunk(destination, responseState.placeholderPrefix);
   writeChunk(destination, formattedID);
-  return writeChunkAndReturn(destination, completeSegmentScript3);
+
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeSegmentScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, completeSegmentDataEnd);
+  }
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
@@ -2424,9 +2461,19 @@ const completeBoundaryWithStylesScript1Partial = stringToPrecomputedChunk(
   '$RR("',
 );
 const completeBoundaryScript2 = stringToPrecomputedChunk('","');
-const completeBoundaryScript2a = stringToPrecomputedChunk('",');
-const completeBoundaryScript3 = stringToPrecomputedChunk('"');
-const completeBoundaryScript4 = stringToPrecomputedChunk(')</script>');
+const completeBoundaryScript3a = stringToPrecomputedChunk('",');
+const completeBoundaryScript3b = stringToPrecomputedChunk('"');
+const completeBoundaryScriptEnd = stringToPrecomputedChunk(')</script>');
+
+const completeBoundaryData1 = stringToPrecomputedChunk(
+  '<template data-rci="" data-bid="',
+);
+const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
+  '<template data-rri="" data-bid="',
+);
+const completeBoundaryData2 = stringToPrecomputedChunk('" data-sid="');
+const completeBoundaryData3a = stringToPrecomputedChunk('" data-sty="');
+const completeBoundaryDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
@@ -2439,27 +2486,38 @@ export function writeCompletedBoundaryInstruction(
   if (enableFloat) {
     hasStyleDependencies = hasStyleResourceDependencies(boundaryResources);
   }
-  writeChunk(destination, responseState.startInlineScript);
-  if (enableFloat && hasStyleDependencies) {
-    if (!responseState.sentCompleteBoundaryFunction) {
-      responseState.sentCompleteBoundaryFunction = true;
-      responseState.sentStyleInsertionFunction = true;
-      writeChunk(
-        destination,
-        clonePrecomputedChunk(completeBoundaryWithStylesScript1FullBoth),
-      );
-    } else if (!responseState.sentStyleInsertionFunction) {
-      responseState.sentStyleInsertionFunction = true;
-      writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
+  const scriptFormat =
+    !enableFizzExternalRuntime ||
+    responseState.streamingFormat === ScriptStreamingFormat;
+  if (scriptFormat) {
+    writeChunk(destination, responseState.startInlineScript);
+    if (enableFloat && hasStyleDependencies) {
+      if (!responseState.sentCompleteBoundaryFunction) {
+        responseState.sentCompleteBoundaryFunction = true;
+        responseState.sentStyleInsertionFunction = true;
+        writeChunk(
+          destination,
+          clonePrecomputedChunk(completeBoundaryWithStylesScript1FullBoth),
+        );
+      } else if (!responseState.sentStyleInsertionFunction) {
+        responseState.sentStyleInsertionFunction = true;
+        writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
+      } else {
+        writeChunk(destination, completeBoundaryWithStylesScript1Partial);
+      }
     } else {
-      writeChunk(destination, completeBoundaryWithStylesScript1Partial);
+      if (!responseState.sentCompleteBoundaryFunction) {
+        responseState.sentCompleteBoundaryFunction = true;
+        writeChunk(destination, completeBoundaryScript1Full);
+      } else {
+        writeChunk(destination, completeBoundaryScript1Partial);
+      }
     }
   } else {
-    if (!responseState.sentCompleteBoundaryFunction) {
-      responseState.sentCompleteBoundaryFunction = true;
-      writeChunk(destination, completeBoundaryScript1Full);
+    if (enableFloat && hasStyleDependencies) {
+      writeChunk(destination, completeBoundaryWithStylesData1);
     } else {
-      writeChunk(destination, completeBoundaryScript1Partial);
+      writeChunk(destination, completeBoundaryData1);
     }
   }
 
@@ -2469,18 +2527,40 @@ export function writeCompletedBoundaryInstruction(
     );
   }
 
+  // Write function arguments, which are string and array literals
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, boundaryID);
-  writeChunk(destination, completeBoundaryScript2);
+  if (scriptFormat) {
+    writeChunk(destination, completeBoundaryScript2);
+  } else {
+    writeChunk(destination, completeBoundaryData2);
+  }
   writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
   if (enableFloat && hasStyleDependencies) {
-    writeChunk(destination, completeBoundaryScript2a);
-    writeStyleResourceDependencies(destination, boundaryResources);
+    // Script and data writers must format this differently:
+    //  - script writer emits an array literal, whose string elements are
+    //    escaped for javascript  e.g. ["A", "B"]
+    //  - data writer emits a string literal, which is escaped as html
+    //    e.g. [&#34;A&#34;, &#34;B&#34;]
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3a);
+      // boundaryResources encodes an array literal
+      writeStyleResourceDependenciesInJS(destination, boundaryResources);
+    } else {
+      writeChunk(destination, completeBoundaryData3a);
+      writeStyleResourceDependenciesInAttr(destination, boundaryResources);
+    }
+  } else {
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3b);
+    }
+  }
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeBoundaryScriptEnd);
   } else {
-    writeChunk(destination, completeBoundaryScript3);
+    return writeChunkAndReturn(destination, completeBoundaryDataEnd);
   }
-  return writeChunkAndReturn(destination, completeBoundaryScript4);
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
@@ -2488,8 +2568,16 @@ const clientRenderScript1Full = stringToPrecomputedChunk(
 );
 const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
 const clientRenderScript1A = stringToPrecomputedChunk('"');
-const clientRenderScript2 = stringToPrecomputedChunk(')</script>');
 const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
+const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
+
+const clientRenderData1 = stringToPrecomputedChunk(
+  '<template data-rxi="" data-bid="',
+);
+const clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
+const clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
+const clientRenderData4 = stringToPrecomputedChunk('" data-stck="');
+const clientRenderDataEnd = dataElementQuotedEnd;
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
@@ -2499,14 +2587,22 @@ export function writeClientRenderBoundaryInstruction(
   errorMessage?: string,
   errorComponentStack?: string,
 ): boolean {
-  writeChunk(destination, responseState.startInlineScript);
-  if (!responseState.sentClientRenderFunction) {
-    // The first time we write this, we'll need to include the full implementation.
-    responseState.sentClientRenderFunction = true;
-    writeChunk(destination, clientRenderScript1Full);
+  const scriptFormat =
+    !enableFizzExternalRuntime ||
+    responseState.streamingFormat === ScriptStreamingFormat;
+  if (scriptFormat) {
+    writeChunk(destination, responseState.startInlineScript);
+    if (!responseState.sentClientRenderFunction) {
+      // The first time we write this, we'll need to include the full implementation.
+      responseState.sentClientRenderFunction = true;
+      writeChunk(destination, clientRenderScript1Full);
+    } else {
+      // Future calls can just reuse the same function.
+      writeChunk(destination, clientRenderScript1Partial);
+    }
   } else {
-    // Future calls can just reuse the same function.
-    writeChunk(destination, clientRenderScript1Partial);
+    // <template data-rxi="" data-bid="
+    writeChunk(destination, clientRenderData1);
   }
 
   if (boundaryID === null) {
@@ -2516,29 +2612,73 @@ export function writeClientRenderBoundaryInstruction(
   }
 
   writeChunk(destination, boundaryID);
-  writeChunk(destination, clientRenderScript1A);
+  if (scriptFormat) {
+    // " needs to be inserted for scripts, since ArgInterstitual does not contain
+    // leading or trailing quotes
+    writeChunk(destination, clientRenderScript1A);
+  }
+
   if (errorDigest || errorMessage || errorComponentStack) {
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
-    );
+    if (scriptFormat) {
+      // ,"JSONString"
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
+      );
+    } else {
+      // " data-dgst="HTMLString
+      writeChunk(destination, clientRenderData2);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorDigest || '')),
+      );
+    }
   }
   if (errorMessage || errorComponentStack) {
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
-    );
+    if (scriptFormat) {
+      // ,"JSONString"
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
+      );
+    } else {
+      // " data-msg="HTMLString
+      writeChunk(destination, clientRenderData3);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorMessage || '')),
+      );
+    }
   }
   if (errorComponentStack) {
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)),
-    );
+    // ,"JSONString"
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(
+          escapeJSStringsForInstructionScripts(errorComponentStack),
+        ),
+      );
+    } else {
+      // " data-stck="HTMLString
+      writeChunk(destination, clientRenderData4);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorComponentStack)),
+      );
+    }
+  }
+
+  if (scriptFormat) {
+    // ></script>
+    return writeChunkAndReturn(destination, clientRenderScriptEnd);
+  } else {
+    // "></template>
+    return writeChunkAndReturn(destination, clientRenderDataEnd);
   }
-  return writeChunkAndReturn(destination, clientRenderScript2);
 }
 
 const regexForJSStringsInInstructionScripts = /[<\u2028\u2029]/g;
@@ -2598,7 +2738,22 @@ export function writeInitialResources(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
+  willFlushAllSegments: boolean,
 ): boolean {
+  // Write initially discovered resources after the shell completes
+  if (
+    enableFizzExternalRuntime &&
+    !willFlushAllSegments &&
+    responseState.externalRuntimeConfig
+  ) {
+    // If the root segment is incomplete due to suspended tasks
+    // (e.g. willFlushAllSegments = false) and we are using data
+    // streaming format, ensure the external runtime is sent.
+    // (User code could choose to send this even earlier by calling
+    //  preinit(...), if they know they will suspend).
+    const {src, integrity} = responseState.externalRuntimeConfig;
+    preinitImpl(resources, src, {as: 'script', integrity});
+  }
   function flushLinkResource(resource) {
     if (!resource.flushed) {
       pushLinkImpl(target, resource.props, responseState);
@@ -2839,7 +2994,10 @@ const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
 const arrayInterstitial = stringToPrecomputedChunk(',');
 const arrayCloseBracket = stringToPrecomputedChunk(']');
 
-function writeStyleResourceDependencies(
+// This function writes a 2D array of strings to be embedded in javascript.
+// E.g.
+//  [["JS_escaped_string1", "JS_escaped_string2"]]
+function writeStyleResourceDependenciesInJS(
   destination: Destination,
   boundaryResources: BoundaryResources,
 ): void {
@@ -2852,12 +3010,12 @@ function writeStyleResourceDependencies(
       // should be ready before content is shown on the client
     } else if (resource.flushed) {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnly(destination, resource.href);
+      writeStyleResourceDependencyHrefOnlyInJS(destination, resource.href);
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
     } else {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependency(
+      writeStyleResourceDependencyInJS(
         destination,
         resource.href,
         resource.precedence,
@@ -2873,7 +3031,8 @@ function writeStyleResourceDependencies(
   writeChunk(destination, arrayCloseBracket);
 }
 
-function writeStyleResourceDependencyHrefOnly(
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInJS(
   destination: Destination,
   href: string,
 ) {
@@ -2889,7 +3048,7 @@ function writeStyleResourceDependencyHrefOnly(
   );
 }
 
-function writeStyleResourceDependency(
+function writeStyleResourceDependencyInJS(
   destination: Destination,
   href: string,
   precedence: string,
@@ -2936,7 +3095,7 @@ function writeStyleResourceDependency(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          writeStyleResourceAttribute(destination, propKey, propValue);
+          writeStyleResourceAttributeInJS(destination, propKey, propValue);
           break;
       }
     }
@@ -2944,7 +3103,7 @@ function writeStyleResourceDependency(
   return null;
 }
 
-function writeStyleResourceAttribute(
+function writeStyleResourceAttributeInJS(
   destination: Destination,
   name: string,
   value: string | boolean | number | Function | Object, // not null or undefined
@@ -3022,3 +3181,192 @@ function writeStyleResourceAttribute(
     stringToChunk(escapeJSObjectForInstructionScripts(attributeValue)),
   );
 }
+
+// This function writes a 2D array of strings to be embedded in an attribute
+// value and read with JSON.parse in ReactDOMServerExternalRuntime.js
+// E.g.
+//  [[&quot;JSON_escaped_string1&quot;, &quot;JSON_escaped_string2&quot;]]
+function writeStyleResourceDependenciesInAttr(
+  destination: Destination,
+  boundaryResources: BoundaryResources,
+): void {
+  writeChunk(destination, arrayFirstOpenBracket);
+
+  let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
+  boundaryResources.forEach(resource => {
+    if (resource.inShell) {
+      // We can elide this dependency because it was flushed in the shell and
+      // should be ready before content is shown on the client
+    } else if (resource.flushed) {
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyHrefOnlyInAttr(destination, resource.href);
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+    } else {
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyInAttr(
+        destination,
+        resource.href,
+        resource.precedence,
+        resource.props,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+
+      resource.flushed = true;
+      resource.hint.flushed = true;
+    }
+  });
+  writeChunk(destination, arrayCloseBracket);
+}
+
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInAttr(
+  destination: Destination,
+  href: string,
+) {
+  // We should actually enforce this earlier when the resource is created but for
+  // now we make sure we are actually dealing with a string here.
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
+  }
+  const coercedHref = '' + (href: any);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
+}
+
+function writeStyleResourceDependencyInAttr(
+  destination: Destination,
+  href: string,
+  precedence: string,
+  props: Object,
+) {
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
+  }
+  const coercedHref = '' + (href: any);
+  sanitizeURL(coercedHref);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(precedence, 'precedence');
+  }
+  const coercedPrecedence = '' + (precedence: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedPrecedence))),
+  );
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'href':
+        case 'rel':
+        case 'precedence':
+        case 'data-precedence': {
+          break;
+        }
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          writeStyleResourceAttributeInAttr(destination, propKey, propValue);
+          break;
+      }
+    }
+  }
+  return null;
+}
+
+function writeStyleResourceAttributeInAttr(
+  destination: Destination,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  let attributeName = name.toLowerCase();
+  let attributeValue;
+  switch (typeof value) {
+    case 'function':
+    case 'symbol':
+      return;
+  }
+
+  switch (name) {
+    // Reserved names
+    case 'innerHTML':
+    case 'dangerouslySetInnerHTML':
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'style':
+      // Ignored
+      return;
+
+    // Attribute renames
+    case 'className':
+      attributeName = 'class';
+      break;
+
+    // Booleans
+    case 'hidden':
+      if (value === false) {
+        return;
+      }
+      attributeValue = '';
+      break;
+
+    // Santized URLs
+    case 'src':
+    case 'href': {
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      sanitizeURL(attributeValue);
+      break;
+    }
+    default: {
+      if (!isAttributeNameSafe(name)) {
+        return;
+      }
+    }
+  }
+
+  if (
+    // shouldIgnoreAttribute
+    // We have already filtered out null/undefined and reserved words.
+    name.length > 2 &&
+    (name[0] === 'o' || name[0] === 'O') &&
+    (name[1] === 'n' || name[1] === 'N')
+  ) {
+    return;
+  }
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(value, attributeName);
+  }
+  attributeValue = '' + (value: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeName))),
+  );
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeValue))),
+  );
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
index 01e70273a656f..aa11451b1eeea 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {FormatContext} from './ReactDOMServerFormatConfig';
+import type {
+  BootstrapScriptDescriptor,
+  FormatContext,
+  StreamingFormat,
+} from './ReactDOMServerFormatConfig';
 
 import {
   createResponseState as createResponseStateImpl,
@@ -31,16 +35,18 @@ export const isPrimaryRenderer = false;
 export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
-  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
   idPrefix: string,
   nextSuspenseID: number,
+  streamingFormat: StreamingFormat,
+  startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
   sentStyleInsertionFunction: boolean,
+  externalRuntimeConfig: BootstrapScriptDescriptor | null,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
 };
@@ -48,21 +54,31 @@ export type ResponseState = {
 export function createResponseState(
   generateStaticMarkup: boolean,
   identifierPrefix: string | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
 ): ResponseState {
-  const responseState = createResponseStateImpl(identifierPrefix, undefined);
+  const responseState = createResponseStateImpl(
+    identifierPrefix,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    externalRuntimeConfig,
+  );
   return {
     // Keep this in sync with ReactDOMServerFormatConfig
     bootstrapChunks: responseState.bootstrapChunks,
-    startInlineScript: responseState.startInlineScript,
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,
     idPrefix: responseState.idPrefix,
     nextSuspenseID: responseState.nextSuspenseID,
+    streamingFormat: responseState.streamingFormat,
+    startInlineScript: responseState.startInlineScript,
     sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
     sentClientRenderFunction: responseState.sentClientRenderFunction,
     sentStyleInsertionFunction: responseState.sentStyleInsertionFunction,
+    externalRuntimeConfig: responseState.externalRuntimeConfig,
     // This is an extra field for the legacy renderer
     generateStaticMarkup,
   };
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 030e5093e52fe..b900f3452b4ee 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -8,7 +8,12 @@
  */
 
 'use strict';
-import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
+import {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInNodes,
+  withLoadingReadyState,
+} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -31,7 +36,7 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
-const renderOptions = {};
+let renderOptions;
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
@@ -89,6 +94,12 @@ describe('ReactDOMFizzServer', () => {
       hasErrored = true;
       fatalError = error;
     });
+
+    renderOptions = {};
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        'react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js';
+    }
   });
 
   function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
@@ -134,10 +145,13 @@ describe('ReactDOMFizzServer', () => {
     fakeBody.innerHTML = bufferedContent;
     const parent =
       container.nodeName === '#document' ? container.body : container;
-    while (fakeBody.firstChild) {
-      const node = fakeBody.firstChild;
-      await replaceScriptsAndMove(window, CSPnonce, node, parent);
-    }
+
+    await withLoadingReadyState(async () => {
+      while (fakeBody.firstChild) {
+        const node = fakeBody.firstChild;
+        await replaceScriptsAndMove(window, CSPnonce, node, parent);
+      }
+    }, document);
   }
 
   async function actIntoEmptyDocument(callback) {
@@ -162,7 +176,9 @@ describe('ReactDOMFizzServer', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
-    await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
+    await withLoadingReadyState(async () => {
+      await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
+    }, document);
   }
 
   function getVisibleChildren(element) {
@@ -595,7 +611,12 @@ describe('ReactDOMFizzServer', () => {
     // Because there is no content inside the Suspense boundary that could've
     // been written, we expect to not see any additional partial data flushed
     // yet.
-    expect(container.childNodes.length).toBe(1);
+    expect(
+      stripExternalRuntimeInNodes(
+        container.childNodes,
+        renderOptions.unstable_externalRuntimeSrc,
+      ).length,
+    ).toBe(1);
     await act(async () => {
       resolveElement({default: <Text text="Hello" />});
     });
@@ -3490,7 +3511,10 @@ describe('ReactDOMFizzServer', () => {
       </html>,
     );
     expect(
-      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
+      stripExternalRuntimeInNodes(
+        document.getElementsByTagName('script'),
+        renderOptions.unstable_externalRuntimeSrc,
+      ).map(n => n.outerHTML),
     ).toEqual([
       '<script src="foo" async=""></script>',
       '<script src="bar" async=""></script>',
@@ -3566,7 +3590,9 @@ describe('ReactDOMFizzServer', () => {
         <html>
           <head />
           <body>
-            <div>hello world</div>
+            <Suspense fallback={'loading...'}>
+              <AsyncText text="Hello" />
+            </Suspense>
           </body>
         </html>,
         {
@@ -3576,17 +3602,68 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
+    // We want the external runtime to be sent in <head> so the script can be
+    // fetched and executed as early as possible. For SSR pages using Suspense,
+    // this script execution would be render blocking.
+    expect(
+      Array.from(document.head.getElementsByTagName('script')).map(
+        n => n.outerHTML,
+      ),
+    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+
     expect(getVisibleChildren(document)).toEqual(
       <html>
         <head />
-        <body>
-          <div>hello world</div>
-        </body>
+        <body>loading...</body>
       </html>,
     );
-    expect(
-      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
-    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+  });
+
+  // @gate enableFizzExternalRuntime
+  it('does not send script tags for SSR instructions when using the external runtime', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <div>
+              <AsyncText text="Hello" />
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await act(async () => {
+      resolveText('Hello');
+    });
+
+    // The only script elements sent should be from unstable_externalRuntimeSrc
+    expect(document.getElementsByTagName('script').length).toEqual(1);
+  });
+
+  it('does not send the external runtime for static pages', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <p>hello world!</p>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    // no scripts should be sent
+    expect(document.getElementsByTagName('script').length).toEqual(0);
+
+    // the html should be as-is
+    expect(document.documentElement.innerHTML).toEqual(
+      '<head></head><body><p>hello world!</p></body>',
+    );
   });
 
   it('#24384: Suspending should halt hydration warnings and not emit any if hydration completes successfully after unsuspending', async () => {
@@ -4527,12 +4604,21 @@ describe('ReactDOMFizzServer', () => {
 
       await act(() => resolveText('Foo'));
 
-      expect(container.firstElementChild.outerHTML).toEqual(
+      const div = stripExternalRuntimeInNodes(
+        container.children,
+        renderOptions.unstable_externalRuntimeSrc,
+      )[0];
+      expect(div.outerHTML).toEqual(
         '<div id="app-div">hello<b>world, Foo</b>!</div>',
       );
-      // there are extra script nodes at the end of container
-      expect(container.childNodes.length).toBe(5);
-      const div = container.childNodes[1];
+      // there may be either:
+      //  - an external runtime script and deleted nodes with data attributes
+      //  - extra script nodes containing fizz instructions at the end of container
+      expect(
+        Array.from(container.childNodes).filter(e => e.tagName !== 'SCRIPT')
+          .length,
+      ).toBe(3);
+
       expect(div.childNodes.length).toBe(3);
       const b = div.childNodes[1];
       expect(b.childNodes.length).toBe(2);
@@ -4582,9 +4668,12 @@ describe('ReactDOMFizzServer', () => {
       );
 
       await act(() => resolveText('ello'));
-      expect(container.firstElementChild.outerHTML).toEqual(
-        '<div id="app-div">helloworld</div>',
-      );
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual('<div id="app-div">helloworld</div>');
 
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
@@ -4624,9 +4713,12 @@ describe('ReactDOMFizzServer', () => {
 
       await act(() => resolveText('orld'));
 
-      expect(container.firstElementChild.outerHTML).toEqual(
-        '<div id="app-div">h<!-- -->ello<!-- -->world</div>',
-      );
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual('<div id="app-div">h<!-- -->ello<!-- -->world</div>');
 
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App />, {
@@ -4784,7 +4876,12 @@ describe('ReactDOMFizzServer', () => {
         resolveText('second suspended');
       });
 
-      expect(container.firstElementChild.outerHTML).toEqual(
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual(
         '<div id="app-div">start<!--$-->firststartfirst suspendedfirstend<!--/$--><!--$-->secondstart<b>second suspended</b><!--/$-->end</div>',
       );
 
@@ -4834,7 +4931,6 @@ describe('ReactDOMFizzServer', () => {
         pipe(writable);
       });
 
-      // strip inserted external runtime
       expect(container.innerHTML).toEqual(
         '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
       );
@@ -5462,7 +5558,7 @@ describe('ReactDOMFizzServer', () => {
 
   it('can render scripts with simple children', async () => {
     await actIntoEmptyDocument(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <body>
             <script>{'try { foo() } catch (e) {} ;'}</script>
@@ -5490,7 +5586,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await actIntoEmptyDocument(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <script>{2}</script>
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 650bb3a32d1a7..6ce5b6617876d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -8,7 +8,11 @@
  */
 
 'use strict';
-import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
+import {
+  replaceScriptsAndMove,
+  mergeOptions,
+  withLoadingReadyState,
+} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -26,7 +30,7 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
-const renderOptions = {};
+let renderOptions;
 
 describe('ReactDOMFloat', () => {
   beforeEach(() => {
@@ -64,6 +68,12 @@ describe('ReactDOMFloat', () => {
       hasErrored = true;
       fatalError = error;
     });
+
+    renderOptions = {};
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        'react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js';
+    }
   });
 
   function normalizeCodeLocInfo(str) {
@@ -100,10 +110,17 @@ describe('ReactDOMFloat', () => {
     fakeBody.innerHTML = bufferedContent;
     const parent =
       container.nodeName === '#document' ? container.body : container;
-    while (fakeBody.firstChild) {
-      const node = fakeBody.firstChild;
-      await replaceScriptsAndMove(document.defaultView, CSPnonce, node, parent);
-    }
+    await withLoadingReadyState(async () => {
+      while (fakeBody.firstChild) {
+        const node = fakeBody.firstChild;
+        await replaceScriptsAndMove(
+          document.defaultView,
+          CSPnonce,
+          node,
+          parent,
+        );
+      }
+    }, document);
   }
 
   async function actIntoEmptyDocument(callback) {
@@ -127,7 +144,9 @@ describe('ReactDOMFloat', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
-    await replaceScriptsAndMove(jsdom.window, null, document.documentElement);
+    await withLoadingReadyState(async () => {
+      await replaceScriptsAndMove(jsdom.window, null, document.documentElement);
+    }, document);
   }
 
   function getMeaningfulChildren(element) {
@@ -287,7 +306,7 @@ describe('ReactDOMFloat', () => {
   // @gate enableFloat
   it('can hydrate non Resources in head when Resources are also inserted there', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head>
             <meta property="foo" content="bar" />
@@ -589,6 +608,39 @@ describe('ReactDOMFloat', () => {
     ]);
   });
 
+  it('dedupes if the external runtime is explicitly loaded using preinit', async () => {
+    const unstable_externalRuntimeSrc = 'src-of-external-runtime';
+    function App() {
+      ReactDOM.preinit(unstable_externalRuntimeSrc, {as: 'script'});
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <AsyncText text="Hello" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <App />
+          </body>
+        </html>,
+        {
+          unstable_externalRuntimeSrc,
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(
+      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
+    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+  });
+
   describe('HostResource', () => {
     // @gate enableFloat
     it('warns when you update props to an invalid type', async () => {
@@ -5392,7 +5444,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('allows resources inside foreignobject within an svg context', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <svg>
@@ -5499,7 +5551,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('should support non-title resources in svg context', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <svg>
@@ -5632,7 +5684,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('should not treat title descendants of svg into resources', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <svg>
@@ -5758,7 +5810,7 @@ describe('ReactDOMFloat', () => {
         );
       }
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -5855,7 +5907,7 @@ describe('ReactDOMFloat', () => {
       }
 
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getMeaningfulChildren(container)).toEqual(
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index 1a7e9f633e21c..9563adfeec6bd 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -10,6 +10,7 @@
 import ReactVersion from 'shared/ReactVersion';
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
 
 import {
   createRequest,
@@ -36,6 +37,7 @@ function renderToStringImpl(
   options: void | ServerOptions,
   generateStaticMarkup: boolean,
   abortReason: string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 ): string {
   let didFatal = false;
   let fatalError = null;
@@ -62,6 +64,7 @@ function renderToStringImpl(
     createResponseState(
       generateStaticMarkup,
       options ? options.identifierPrefix : undefined,
+      unstable_externalRuntimeSrc,
     ),
     createRootFormatContext(),
     Infinity,
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index bf4084dc13e59..1df5ca947e7c0 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -11,7 +11,9 @@
 import * as tmp from 'tmp';
 import * as fs from 'fs';
 import replace from 'rollup-plugin-replace';
+import resolve from 'rollup-plugin-node-resolve';
 import {rollup} from 'rollup';
+import path from 'path';
 
 const rollupCache: Map<string, string | null> = new Map();
 
@@ -27,7 +29,12 @@ async function getRollupResult(scriptSrc: string): Promise<string | null> {
     const rollupConfig = {
       input: require.resolve(scriptSrc),
       onwarn: console.warn,
-      plugins: [replace({__DEV__: 'true'})],
+      plugins: [
+        replace({__DEV__: 'true'}),
+        resolve({
+          rootDir: path.join(__dirname, '..', '..', '..'),
+        }),
+      ],
       output: {
         externalLiveBindings: false,
         freeze: false,
@@ -68,6 +75,7 @@ async function getRollupResult(scriptSrc: string): Promise<string | null> {
 //  1. Matching nonce attributes and moving node into an existing
 //      parent container (if passed)
 //  2. Resolving scripts with sources
+//  3. Moving data attribute nodes to the body
 async function replaceScriptsAndMove(
   window: any,
   CSPnonce: string | null,
@@ -102,6 +110,18 @@ async function replaceScriptsAndMove(
     } else {
       element.parentNode?.replaceChild(script, element);
     }
+  } else if (
+    node.nodeType === 1 &&
+    // $FlowFixMe[prop-missing]
+    node.dataset != null &&
+    (node.dataset.rxi != null ||
+      node.dataset.rri != null ||
+      node.dataset.rci != null ||
+      node.dataset.rsi != null)
+  ) {
+    // External runtime assumes that instruction data nodes are eventually
+    // appended to the body
+    window.document.body.appendChild(node);
   } else {
     for (let i = 0; i < node.childNodes.length; i++) {
       const inner = node.childNodes[i];
@@ -120,4 +140,59 @@ function mergeOptions(options: Object, defaultOptions: Object): Object {
   };
 }
 
-export {replaceScriptsAndMove, mergeOptions};
+function stripExternalRuntimeInNodes(
+  nodes: HTMLElement[] | HTMLCollection<HTMLElement>,
+  externalRuntimeSrc: string | null,
+): HTMLElement[] {
+  if (!Array.isArray(nodes)) {
+    nodes = Array.from(nodes);
+  }
+  if (externalRuntimeSrc == null) {
+    return nodes;
+  }
+  return nodes.filter(
+    n =>
+      (n.tagName !== 'SCRIPT' && n.tagName !== 'script') ||
+      n.getAttribute('src') !== externalRuntimeSrc,
+  );
+}
+
+// Since JSDOM doesn't implement a streaming HTML parser, we manually overwrite
+// readyState here (currently read by ReactDOMServerExternalRuntime). This does
+// not trigger event callbacks, but we do not rely on any right now.
+async function withLoadingReadyState<T>(
+  fn: () => T,
+  document: Document,
+): Promise<T> {
+  // JSDOM implements readyState in document's direct prototype, but this may
+  // change in later versions
+  let prevDescriptor = null;
+  let proto: Object = document;
+  while (proto != null) {
+    prevDescriptor = Object.getOwnPropertyDescriptor(proto, 'readyState');
+    if (prevDescriptor != null) {
+      break;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  Object.defineProperty(document, 'readyState', {
+    get() {
+      return 'loading';
+    },
+    configurable: true,
+  });
+  const result = await fn();
+  // $FlowFixMe[incompatible-type]
+  delete document.readyState;
+  if (prevDescriptor) {
+    Object.defineProperty(proto, 'readyState', prevDescriptor);
+  }
+  return result;
+}
+
+export {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInNodes,
+  withLoadingReadyState,
+};
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 7a085778a574e..99b09631002fa 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -319,6 +319,7 @@ export function writeInitialResources(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
+  willFlushAllSegments: boolean,
 ): boolean {
   return true;
 }
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index 783080f7b1670..34f8862127ce0 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -12,6 +12,7 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Request} from 'react-server/src/ReactFizzServer';
 
 import type {Destination} from 'react-server/src/ReactServerStreamConfig';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
 
 import {
   createRequest,
@@ -33,6 +34,7 @@ type Options = {
   bootstrapModules: Array<string>,
   progressiveChunkSize?: number,
   onError: (error: mixed) => void,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 };
 
 opaque type Stream = {
@@ -55,6 +57,7 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
       options ? options.bootstrapScriptContent : undefined,
       options ? options.bootstrapScripts : undefined,
       options ? options.bootstrapModules : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
     ),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index b96fce2984e98..236c68dfe8677 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -2126,8 +2126,14 @@ function flushInitialResources(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
+  willFlushAllSegments: boolean,
 ): void {
-  writeInitialResources(destination, resources, responseState);
+  writeInitialResources(
+    destination,
+    resources,
+    responseState,
+    willFlushAllSegments,
+  );
 }
 
 function flushImmediateResources(
@@ -2288,6 +2294,7 @@ function flushCompletedQueues(
             destination,
             request.resources,
             request.responseState,
+            request.allPendingTasks === 0,
           );
         }
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 7b9237da864fe..022d42e724a85 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -449,5 +449,6 @@
   "461": "This is not a real error. It's an implementation detail of React's selective hydration feature. If this leaks into userspace, it's a bug in React. Please file an issue.",
   "462": "Unexpected SuspendedReason. This is a bug in React.",
   "463": "ReactDOMServer.renderToNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
-  "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead."
+  "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
+  "465": "enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle."
 }