From 8622483ba30874384b3398186e5fbeabd62bc56c Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 28 Mar 2023 21:49:21 -0700
Subject: [PATCH] Flight support for Float

Supporting Float methods such as ReactDOM.preload() are challenging for flight because it does not have an easy means to convey direct executions in other environments. Because the flight wire format is a JSON-like serialization that is expected to be rendered it currently only describes renderable elements. We need a way to convey a function invocation that gets run in the context of the client environment whether that is Fizz or Fiber.

Fiber is somewhat straightforward because the HostDispatcher is always active and we can just have the FlightClient dispatch the serialized directive.

Fizz is much more challenging becaue the dispatcher is always scoped but the specific request the dispatch belongs to is not readily available. For environments that support AsyncLocalStorage we could use that to provide the right Request context when dispatching the directives as they stream in however it would but ineffective in the environments without this feature. Instead we stash a "Store" on the Flight client request object and then set it just before dispatching and unset it when the dispatch is complete.

This commit also adds support for AsyncLocalStorage in Fizz however this is more about supporting Float functions after an await point given we expect to offer support for async function components in this runtime soon.

For Flight, if AsyncLocalStorage is available Float methods can be called after await points. If AsyncLocalStorage is not available float methods after await points are noops and you get a warning (in Dev).
---
 .../react-client/src/ReactFlightClient.js     |  11 +
 .../src/ReactFlightClientHostConfigStream.js  |   1 +
 .../src/ReactFlightClientStream.js            |   9 +
 .../ReactFlightClientHostConfig.custom.js     |   2 +
 ...ReactFlightClientHostConfig.dom-browser.js |   1 +
 .../ReactFlightClientHostConfig.dom-bun.js    |   1 +
 ...FlightClientHostConfig.dom-edge-webpack.js |   1 +
 .../ReactFlightClientHostConfig.dom-legacy.js |   1 +
 ...FlightClientHostConfig.dom-node-webpack.js |   1 +
 .../ReactFlightClientHostConfig.dom-node.js   |   1 +
 .../ReactFlightClientHostConfig.dom-relay.js  |   1 +
 ...eactFlightClientHostConfig.native-relay.js |   2 +
 .../src/client/ReactDOMHostConfig.js          |  88 ++-----
 .../ReactDOMFlightServerFormatConfig.js       |  99 ++++++++
 .../ReactDOMLegacyServerStreamConfig.js       |   1 +
 .../src/server/ReactDOMServerFormatConfig.js  | 142 +++++++----
 .../ReactDOMServerLegacyFormatConfig.js       |   1 +
 .../src/shared/ReactDOMDispatcher.js          |  40 +++
 .../shared/ReactDOMFlightClientHostConfig.js  |  92 +++++++
 packages/react-dom/src/ReactDOMFloat.js       |  58 ++++-
 .../react-dom/src/ReactDOMSharedInternals.js  |   7 +-
 .../src/__tests__/ReactDOMFloat-test.js       |   8 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  10 +-
 .../ReactNativeFlightServerFormatConfig.js    |  10 +
 .../server/ReactNativeServerFormatConfig.js   |   1 +
 .../ReactNativeFlightClientHostConfig.js      |  13 +
 .../src/ReactNoopFlightServer.js              |   1 +
 .../src/ReactNoopServer.js                    |   1 +
 .../src/ReactFlightDOMRelayProtocol.js        |   1 +
 .../ReactFlightDOMRelayServerHostConfig.js    |  17 +-
 .../src/ReactServerStreamConfigFB.js          |   9 +-
 .../src/__tests__/ReactFlightDOM-test.js      | 229 ++++++++++++++++++
 .../__tests__/ReactFlightDOMBrowser-test.js   | 224 +++++++++++++++++
 .../react-server/src/ReactFizzResources.js    |  35 +++
 packages/react-server/src/ReactFizzServer.js  |  16 +-
 packages/react-server/src/ReactFlightCache.js |   4 +-
 .../react-server/src/ReactFlightDirectives.js |  37 +++
 .../react-server/src/ReactFlightNewContext.js |   2 +-
 .../react-server/src/ReactFlightServer.js     |  43 +++-
 .../ReactFlightServerBundlerConfigCustom.js   |   1 +
 .../src/ReactFlightServerConfigStream.js      |   9 +
 .../src/ReactServerStreamConfigBrowser.js     |   9 +-
 .../src/ReactServerStreamConfigBun.js         |   8 +-
 .../src/ReactServerStreamConfigEdge.js        |   8 +-
 .../src/ReactServerStreamConfigNode.js        |  13 +-
 .../forks/ReactFlightServerConfig.custom.js   |   3 +
 .../ReactFlightServerConfig.dom-browser.js    |   1 +
 .../forks/ReactFlightServerConfig.dom-bun.js  |   1 +
 ...eactFlightServerConfig.dom-edge-webpack.js |   1 +
 .../ReactFlightServerConfig.dom-legacy.js     |   1 +
 ...eactFlightServerConfig.dom-node-webpack.js |   1 +
 .../forks/ReactFlightServerConfig.dom-node.js |   1 +
 .../ReactFlightServerConfig.dom-relay.js      |   1 +
 .../ReactFlightServerConfig.native-relay.js   |   1 +
 .../forks/ReactServerFormatConfig.custom.js   |   1 +
 .../forks/ReactServerStreamConfig.custom.js   |   1 +
 56 files changed, 1129 insertions(+), 153 deletions(-)
 create mode 100644 packages/react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig.js
 create mode 100644 packages/react-dom-bindings/src/shared/ReactDOMDispatcher.js
 create mode 100644 packages/react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig.js
 create mode 100644 packages/react-native-renderer/src/server/ReactNativeFlightServerFormatConfig.js
 create mode 100644 packages/react-native-renderer/src/shared/ReactNativeFlightClientHostConfig.js
 create mode 100644 packages/react-server/src/ReactFizzResources.js
 create mode 100644 packages/react-server/src/ReactFlightDirectives.js

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 32fb4f1c907db..ba45ac11f051e 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -23,6 +23,7 @@ import {
   preloadModule,
   requireModule,
   parseModel,
+  dispatchDirective,
 } from './ReactFlightClientHostConfig';
 
 import {knownServerReferences} from './ReactFlightServerReferenceRegistry';
@@ -758,6 +759,16 @@ export function resolveErrorDev(
   }
 }
 
+export function resolveDirective(
+  response: Response,
+  id: number,
+  model: UninitializedModel,
+): void {
+  const store = response._store;
+  const payload = JSON.parse(model);
+  dispatchDirective(store, payload);
+}
+
 export function close(response: Response): void {
   // In case there are any remaining unresolved chunks, they won't
   // be resolved now. So we need to issue an error to those.
diff --git a/packages/react-client/src/ReactFlightClientHostConfigStream.js b/packages/react-client/src/ReactFlightClientHostConfigStream.js
index 1a06961a1109e..8538c01fed639 100644
--- a/packages/react-client/src/ReactFlightClientHostConfigStream.js
+++ b/packages/react-client/src/ReactFlightClientHostConfigStream.js
@@ -14,6 +14,7 @@ export type Response = ResponseBase & {
   _partialRow: string,
   _fromJSON: (key: string, value: JSONValue) => any,
   _stringDecoder: StringDecoder,
+  _store: mixed,
 };
 
 export type UninitializedModel = string;
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index 56772ec4a42b3..87b95045945d4 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -16,6 +16,7 @@ import {
   resolveModel,
   resolveErrorProd,
   resolveErrorDev,
+  resolveDirective,
   createResponse as createResponseBase,
   parseModelString,
   parseModelTuple,
@@ -26,6 +27,7 @@ import {
   readFinalStringChunk,
   supportsBinaryStreams,
   createStringDecoder,
+  resolveStore,
 } from './ReactFlightClientHostConfig';
 
 export type {Response};
@@ -46,6 +48,10 @@ function processFullRow(response: Response, row: string): void {
       resolveModule(response, id, row.substring(colon + 2));
       return;
     }
+    case 'D': {
+      resolveDirective(response, id, row.substring(colon + 2));
+      return;
+    }
     case 'E': {
       const errorInfo = JSON.parse(row.substring(colon + 2));
       if (__DEV__) {
@@ -134,6 +140,9 @@ export function createResponse(
   }
   // Don't inline this call because it causes closure to outline the call above.
   response._fromJSON = createFromJSONCallback(response);
+  // If the Host provides a store stash it on the response so we can provide it back
+  // to the dispatcher when resolving directives
+  response._store = resolveStore();
   return response;
 }
 
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js
index 30810a69ebeb0..f52bec6075b54 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js
@@ -35,6 +35,8 @@ export const resolveClientReference = $$$hostConfig.resolveClientReference;
 export const resolveServerReference = $$$hostConfig.resolveServerReference;
 export const preloadModule = $$$hostConfig.preloadModule;
 export const requireModule = $$$hostConfig.requireModule;
+export const resolveStore = $$$hostConfig.resolveStore;
+export const dispatchDirective = $$$hostConfig.dispatchDirective;
 
 export opaque type Source = mixed;
 
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js
index 4aae8141fd56e..6d99059b62b71 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js
@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js
index 28a1f34997f91..5a535251a79c1 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js
@@ -9,6 +9,7 @@
 
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
 
 export type Response = any;
 export opaque type SSRManifest = mixed;
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js
index 4aae8141fd56e..6d99059b62b71 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js
@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
index 4aae8141fd56e..6d99059b62b71 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js
index 8b9b2defedff5..f12539929eb6b 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js
@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientHostConfigNode';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node.js
index 5c20adb286414..c5ceb09ffeec5 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node.js
@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientHostConfigNode';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js
index ccde93cb29597..d5f0e4e755c64 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js
@@ -9,3 +9,4 @@
 
 export * from 'react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig';
 export * from '../ReactFlightClientHostConfigNoStream';
+export * from 'react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
index 7916d16829d04..3d9559f7a7836 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
@@ -7,5 +7,7 @@
  * @flow
  */
 
+export * from 'react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig';
 export * from 'react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig';
 export * from '../ReactFlightClientHostConfigNoStream';
+export * from 'react-native-renderer/src/shared/ReactNativeFlightClientHostConfig';
diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
index 48b1f41b85fc7..3247513dc4585 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {HostDispatcher} from 'react-dom-bindings/src/shared/ReactDOMDispatcher';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 import type {DOMEventName} from '../events/DOMEventNames';
 import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
@@ -1940,23 +1941,14 @@ export function prepareToCommitHoistables() {
 // appropriate for resources that don't really have a strict tie to the document itself for example
 // preloads
 let lastCurrentDocument: ?Document = null;
-let previousDispatcher = null;
 export function prepareRendererToRender(rootContainer: Container) {
   if (enableFloat) {
     const rootNode = getHoistableRoot(rootContainer);
     lastCurrentDocument = getDocumentFromRoot(rootNode);
-
-    previousDispatcher = Dispatcher.current;
-    Dispatcher.current = ReactDOMClientDispatcher;
   }
 }
 
-export function resetRendererAfterRender() {
-  if (enableFloat) {
-    Dispatcher.current = previousDispatcher;
-    previousDispatcher = null;
-  }
-}
+export function resetRendererAfterRender() {}
 
 // global collections of Resources
 const preloadPropsMap: Map<string, PreloadProps> = new Map();
@@ -1979,13 +1971,7 @@ function getCurrentResourceRoot(): null | HoistableRoot {
   return currentContainer ? getHoistableRoot(currentContainer) : null;
 }
 
-// Preloads are somewhat special. Even if we don't have the Document
-// used by the root that is rendering a component trying to insert a preload
-// we can still seed the file cache by doing the preload on any document we have
-// access to. We prefer the currentDocument if it exists, we also prefer the
-// lastCurrentDocument if that exists. As a fallback we will use the window.document
-// if available.
-function getDocumentForPreloads(): ?Document {
+function getBestEffortDocument(): ?Document {
   const root = getCurrentResourceRoot();
   if (root) {
     return root.ownerDocument || root;
@@ -1998,6 +1984,19 @@ function getDocumentForPreloads(): ?Document {
   }
 }
 
+function getBestEffortRoot(): ?HoistableRoot {
+  const root = getCurrentResourceRoot();
+  if (root) {
+    return root;
+  } else {
+    try {
+      return lastCurrentDocument || window.document;
+    } catch (error) {
+      return null;
+    }
+  }
+}
+
 function getDocumentFromRoot(root: HoistableRoot): Document {
   return root.ownerDocument || root;
 }
@@ -2005,7 +2004,7 @@ function getDocumentFromRoot(root: HoistableRoot): Document {
 // We want this to be the default dispatcher on ReactDOMSharedInternals but we don't want to mutate
 // internals in Module scope. Instead we export it and Internals will import it. There is already a cycle
 // from Internals -> ReactDOM -> HostConfig -> Internals so this doesn't introduce a new one.
-export const ReactDOMClientDispatcher = {
+export const ReactDOMClientDispatcher: HostDispatcher = {
   prefetchDNS,
   preconnect,
   preload,
@@ -2017,7 +2016,7 @@ function preconnectAs(
   crossOrigin: null | '' | 'use-credentials',
   href: string,
 ) {
-  const ownerDocument = getDocumentForPreloads();
+  const ownerDocument = getBestEffortDocument();
   if (typeof href === 'string' && href && ownerDocument) {
     const limitedEscapedHref =
       escapeSelectorAttributeValueInsideDoubleQuotes(href);
@@ -2039,7 +2038,7 @@ function preconnectAs(
   }
 }
 
-function prefetchDNS(href: string, options?: mixed) {
+function prefetchDNS(href: string, options?: ?mixed) {
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -2066,7 +2065,7 @@ function prefetchDNS(href: string, options?: mixed) {
   preconnectAs('dns-prefetch', null, href);
 }
 
-function preconnect(href: string, options?: {crossOrigin?: string}) {
+function preconnect(href: string, options?: ?{crossOrigin?: string}) {
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -2096,7 +2095,7 @@ function preconnect(href: string, options?: {crossOrigin?: string}) {
 
 type PreloadAs = ResourceType;
 type PreloadOptions = {
-  as: PreloadAs,
+  as: string,
   crossOrigin?: string,
   integrity?: string,
   type?: string,
@@ -2105,7 +2104,7 @@ function preload(href: string, options: PreloadOptions) {
   if (__DEV__) {
     validatePreloadArguments(href, options);
   }
-  const ownerDocument = getDocumentForPreloads();
+  const ownerDocument = getBestEffortDocument();
   if (
     typeof href === 'string' &&
     href &&
@@ -2142,7 +2141,7 @@ function preload(href: string, options: PreloadOptions) {
 
 function preloadPropsFromPreloadOptions(
   href: string,
-  as: ResourceType,
+  as: string,
   options: PreloadOptions,
 ): PreloadProps {
   return {
@@ -2157,7 +2156,7 @@ function preloadPropsFromPreloadOptions(
 
 type PreinitAs = 'style' | 'script';
 type PreinitOptions = {
-  as: PreinitAs,
+  as: string,
   precedence?: string,
   crossOrigin?: string,
   integrity?: string,
@@ -2173,45 +2172,10 @@ function preinit(href: string, options: PreinitOptions) {
     typeof options === 'object' &&
     options !== null
   ) {
-    const resourceRoot = getCurrentResourceRoot();
+    const resourceRoot = getBestEffortRoot();
     const as = options.as;
     if (!resourceRoot) {
-      if (as === 'style' || as === 'script') {
-        // We are going to emit a preload as a best effort fallback since this preinit
-        // was called outside of a render. Given the passive nature of this fallback
-        // we do not warn in dev when props disagree if there happens to already be a
-        // matching preload with this href
-        const preloadDocument = getDocumentForPreloads();
-        if (preloadDocument) {
-          const limitedEscapedHref =
-            escapeSelectorAttributeValueInsideDoubleQuotes(href);
-          const preloadKey = `link[rel="preload"][as="${as}"][href="${limitedEscapedHref}"]`;
-          let key = preloadKey;
-          switch (as) {
-            case 'style':
-              key = getStyleKey(href);
-              break;
-            case 'script':
-              key = getScriptKey(href);
-              break;
-          }
-          if (!preloadPropsMap.has(key)) {
-            const preloadProps = preloadPropsFromPreinitOptions(
-              href,
-              as,
-              options,
-            );
-            preloadPropsMap.set(key, preloadProps);
-
-            if (null === preloadDocument.querySelector(preloadKey)) {
-              const instance = preloadDocument.createElement('link');
-              setInitialProperties(instance, 'link', preloadProps);
-              markNodeAsHoistable(instance);
-              (preloadDocument.head: any).appendChild(instance);
-            }
-          }
-        }
-      }
+      // If we don't have a root to preinit into we just do nothing.
       return;
     }
 
diff --git a/packages/react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig.js
new file mode 100644
index 0000000000000..e8bd5059008d4
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {enableFloat} from 'shared/ReactFeatureFlags';
+
+import type {
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import {resolveDirectives} from 'react-server/src/ReactFlightDirectives';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
+
+const ReactDOMFlightServerDispatcher = {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preinit,
+};
+
+export function prepareHostDispatcher(): void {
+  ReactDOMCurrentDispatcher.current = ReactDOMFlightServerDispatcher;
+}
+
+// Used to distinguish these contexts from ones used in other renderers.
+// E.g. this can be used to distinguish legacy renderers from this modern one.
+export const isPrimaryRenderer = true;
+
+let didWarnAsyncEnvironmentDev = false;
+
+export function prefetchDNS(href: string, options?: mixed) {
+  if (enableFloat) {
+    pushDirective('prefetchDNS', href, options);
+  }
+}
+
+export function preconnect(href: string, options?: ?{crossOrigin?: string}) {
+  if (enableFloat) {
+    pushDirective('preconnect', href, options);
+  }
+}
+
+type PreloadAs = 'style' | 'font' | 'script';
+type PreloadOptions = {
+  as: string,
+  crossOrigin?: string,
+  integrity?: string,
+  type?: string,
+};
+
+export function preload(href: string, options: PreloadOptions) {
+  if (enableFloat) {
+    pushDirective('preload', href, options);
+  }
+}
+
+type PreinitAs = 'style' | 'script';
+type PreinitOptions = {
+  as: string,
+  precedence?: string,
+  crossOrigin?: string,
+  integrity?: string,
+};
+export function preinit(href: string, options: PreinitOptions): void {
+  if (enableFloat) {
+    pushDirective('preinit', href, options);
+  }
+}
+
+function pushDirective(
+  method: 'prefetchDNS' | 'preconnect' | 'preload' | 'preinit',
+  href: string,
+  options: mixed,
+): void {
+  const directives = resolveDirectives();
+  if (directives === null) {
+    if (__DEV__) {
+      if (!didWarnAsyncEnvironmentDev) {
+        didWarnAsyncEnvironmentDev = true;
+        console.error(
+          'ReactDOM.%s(): React expected to be able to associate this call to a specific Request but cannot. It is possible that this call was invoked outside of a React component. If you are calling it from within a React component that is an async function after the first `await` then you are in an environment which does not support AsyncLocalStorage. In this kind of environment ReactDOM.%s() does not do anything when called in an async manner. Try moving this function call above the first `await` within the component or remove this call. In environments that support AsyncLocalStorage such as Node.js you can call this method anywhere in a React component even after `await` operator.',
+          method,
+          method,
+        );
+      }
+    }
+    return;
+  }
+  // @TODO need to escape
+  directives.push(JSON.stringify({method, args: [href, options]}));
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
index f5a5356312fbe..c07bd229e43ce 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
@@ -23,6 +23,7 @@ export function flushBuffered(destination: Destination) {}
 
 export const supportsRequestStorage = false;
 export const requestStorage: AsyncLocalStorage<any> = (null: any);
+export const requestStorage2: AsyncLocalStorage<any> = (null: any);
 
 export function beginWriting(destination: Destination) {}
 
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 60d53197bd44a..5e98059c19567 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -39,6 +39,12 @@ import {
 } from 'react-server/src/ReactServerStreamConfig';
 
 import isAttributeNameSafe from '../shared/isAttributeNameSafe';
+import {
+  resolveResources,
+  setCurrentResources,
+  getCurrentResources,
+} from 'react-server/src/ReactFizzResources';
+
 import {
   getPropertyInfo,
   BOOLEAN,
@@ -84,30 +90,38 @@ import {
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
 const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
 
-const ReactDOMServerDispatcher = enableFloat
-  ? {
-      prefetchDNS,
-      preconnect,
-      preload,
-      preinit,
-    }
-  : {};
+const ReactDOMServerDispatcher = {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preinit,
+  resolveStore,
+  pushStore,
+  popStore,
+};
 
 let currentResources: null | Resources = null;
 const currentResourcesStack = [];
 
-export function prepareToRender(resources: Resources): mixed {
-  currentResourcesStack.push(currentResources);
-  currentResources = resources;
+function pushResources(resources: null | Resources) {
+  currentResourcesStack.push(getCurrentResources());
+  setCurrentResources(resources);
+}
+
+function popResources() {
+  setCurrentResources(currentResourcesStack.pop());
+}
 
-  const previousHostDispatcher = ReactDOMCurrentDispatcher.current;
+export function prepareHostDispatcher() {
   ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher;
-  return previousHostDispatcher;
 }
 
-export function cleanupAfterRender(previousDispatcher: mixed) {
-  currentResources = currentResourcesStack.pop();
-  ReactDOMCurrentDispatcher.current = previousDispatcher;
+export function prepareToRender(resources: Resources): mixed {
+  pushResources(resources);
+}
+
+export function cleanupAfterRender() {
+  popResources();
 }
 
 // Used to distinguish these contexts from ones used in other renderers.
@@ -4347,17 +4361,34 @@ function getResourceKey(as: string, href: string): string {
   return `[${as}]${href}`;
 }
 
+export type Store = Resources;
+function resolveStore(): null | Resources {
+  // In Fizz DOM Store is Resources. Other environments may have a different store shape
+  return resolveResources();
+}
+
+function pushStore(store: null | Store) {
+  const resources: null | Resources = store;
+  pushResources(resources);
+}
+
+function popStore() {
+  popResources();
+}
+
 export function prefetchDNS(href: string, options?: mixed) {
-  if (!currentResources) {
-    // While we expect that preconnect calls are primarily going to be observed
-    // during render because effects and events don't run on the server it is
-    // still possible that these get called in module scope. This is valid on
-    // the client since there is still a document to interact with but on the
-    // server we need a request to associate the call to. Because of this we
-    // simply return and do not warn.
+  if (!enableFloat) {
+    return;
+  }
+  const resources = resolveResources();
+  if (!resources) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = currentResources;
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -4402,17 +4433,19 @@ export function prefetchDNS(href: string, options?: mixed) {
   }
 }
 
-export function preconnect(href: string, options?: {crossOrigin?: string}) {
-  if (!currentResources) {
-    // While we expect that preconnect calls are primarily going to be observed
-    // during render because effects and events don't run on the server it is
-    // still possible that these get called in module scope. This is valid on
-    // the client since there is still a document to interact with but on the
-    // server we need a request to associate the call to. Because of this we
-    // simply return and do not warn.
+export function preconnect(href: string, options?: ?{crossOrigin?: string}) {
+  if (!enableFloat) {
+    return;
+  }
+  const resources = resolveResources();
+  if (!resources) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = currentResources;
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -4463,22 +4496,24 @@ export function preconnect(href: string, options?: {crossOrigin?: string}) {
 
 type PreloadAs = 'style' | 'font' | 'script';
 type PreloadOptions = {
-  as: PreloadAs,
+  as: string,
   crossOrigin?: string,
   integrity?: string,
   type?: string,
 };
 export function preload(href: string, options: PreloadOptions) {
-  if (!currentResources) {
-    // While we expect that preload calls are primarily going to be observed
-    // during render because effects and events don't run on the server it is
-    // still possible that these get called in module scope. This is valid on
-    // the client since there is still a document to interact with but on the
-    // server we need a request to associate the call to. Because of this we
-    // simply return and do not warn.
+  if (!enableFloat) {
+    return;
+  }
+  const resources = resolveResources();
+  if (!resources) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = currentResources;
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -4604,22 +4639,25 @@ export function preload(href: string, options: PreloadOptions) {
 
 type PreinitAs = 'style' | 'script';
 type PreinitOptions = {
-  as: PreinitAs,
+  as: string,
   precedence?: string,
   crossOrigin?: string,
   integrity?: string,
 };
 export 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
-    // still possible that these get called in module scope. This is valid on
-    // the client since there is still a document to interact with but on the
-    // server we need a request to associate the call to. Because of this we
-    // simply return and do not warn.
+  if (!enableFloat) {
     return;
   }
-  preinitImpl(currentResources, href, options);
+  const resources = resolveResources();
+  if (!resources) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    return;
+  }
+  preinitImpl(resources, href, options);
 }
 
 // On the server, preinit may be called outside of render when sending an
@@ -4841,7 +4879,7 @@ function preinitImpl(
 
 function preloadPropsFromPreloadOptions(
   href: string,
-  as: PreloadAs,
+  as: string,
   options: PreloadOptions,
 ): PreloadProps {
   return {
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
index 5ca51fbcbbac0..68879489addfe 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -137,6 +137,7 @@ export {
   writePostamble,
   hoistResources,
   setCurrentlyRenderingBoundaryResourcesTarget,
+  prepareHostDispatcher,
   prepareToRender,
   cleanupAfterRender,
 } from './ReactDOMServerFormatConfig';
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMDispatcher.js b/packages/react-dom-bindings/src/shared/ReactDOMDispatcher.js
new file mode 100644
index 0000000000000..81c67d63189bd
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMDispatcher.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type PrefetchDNSOptions = void;
+export type PreconnectOptions = {crossOrigin?: string};
+export type PreloadOptions = {
+  as: string,
+  crossOrigin?: string,
+  integrity?: string,
+  type?: string,
+};
+export type PreinitOptions = {
+  as: string,
+  precedence?: string,
+  crossOrigin?: string,
+  integrity?: string,
+};
+
+export type HostDispatcherWithStore<Store> = {
+  prefetchDNS: (href: string, options?: ?PrefetchDNSOptions) => void,
+  preconnect: (href: string, options?: ?PreconnectOptions) => void,
+  preload: (href: string, options: PreloadOptions) => void,
+  preinit: (href: string, options: PreinitOptions) => void,
+  resolveStore: () => null | Store,
+  pushStore: (null | Store) => void,
+  popStore: () => void,
+};
+
+export type HostDispatcher = {
+  prefetchDNS: (href: string, options?: ?PrefetchDNSOptions) => void,
+  preconnect: (href: string, options?: ?PreconnectOptions) => void,
+  preload: (href: string, options: PreloadOptions) => void,
+  preinit: (href: string, options: PreinitOptions) => void,
+};
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig.js b/packages/react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig.js
new file mode 100644
index 0000000000000..2c5030d7b5934
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMFlightClientHostConfig.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// This client file is in the shared folder because it applies to both SSR and browser contexts.
+// It is the configuraiton of the FlightClient behavior which can run in either environment.
+
+import type {HostDispatcherWithStore} from './ReactDOMDispatcher';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
+
+type DirectivePayload = mixed;
+
+export function dispatchDirective(
+  store: null | mixed,
+  payload: DirectivePayload,
+): void {
+  const dispatcher = ReactDOMCurrentDispatcher.current;
+  if (
+    payload === null ||
+    typeof payload !== 'object' ||
+    typeof payload.method !== 'string' ||
+    !Array.isArray(payload.args)
+  ) {
+    if (__DEV__) {
+      console.error(
+        'React expected a directive to be an object with method (string) and args (array) properties but encountered something else instead. It is likely this is a bug in React.',
+      );
+    }
+    return;
+  }
+  const method = payload.method;
+  const args = payload.args;
+  if (dispatcher) {
+    if (typeof dispatcher.pushStore === 'function') {
+      // $FlowFixMe: Flow should be able to figure out that if the dispatcher has pushStore it has all the store methods
+      const dispatcherWithStore: HostDispatcherWithStore<mixed> =
+        (dispatcher: any);
+      switch (method) {
+        case 'prefetchDNS':
+          dispatcherWithStore.pushStore(store);
+          dispatcherWithStore.prefetchDNS.apply(dispatcher, (args: any));
+          dispatcherWithStore.popStore();
+          return;
+        case 'preconnect':
+          dispatcherWithStore.pushStore(store);
+          dispatcherWithStore.preconnect.apply(dispatcher, (args: any));
+          dispatcherWithStore.popStore();
+          return;
+        case 'preload':
+          dispatcherWithStore.pushStore(store);
+          dispatcherWithStore.preload.apply(dispatcher, (args: any));
+          dispatcherWithStore.popStore();
+          return;
+        case 'preinit':
+          dispatcherWithStore.pushStore(store);
+          dispatcherWithStore.preinit.apply(dispatcher, (args: any));
+          dispatcherWithStore.popStore();
+          return;
+      }
+    } else {
+      switch (method) {
+        case 'prefetchDNS':
+          dispatcher.prefetchDNS.apply(dispatcher, (args: any));
+          return;
+        case 'preconnect':
+          dispatcher.preconnect.apply(dispatcher, (args: any));
+          return;
+        case 'preload':
+          dispatcher.preload.apply(dispatcher, (args: any));
+          return;
+        case 'preinit':
+          dispatcher.preinit.apply(dispatcher, (args: any));
+          return;
+      }
+    }
+  }
+}
+
+export function resolveStore(): null | mixed {
+  const dispatcher = ReactDOMCurrentDispatcher.current;
+  if (dispatcher && typeof dispatcher.resolveStore === 'function') {
+    return dispatcher.resolveStore();
+  }
+  return null;
+}
diff --git a/packages/react-dom/src/ReactDOMFloat.js b/packages/react-dom/src/ReactDOMFloat.js
index 99a867286d361..158058f964b60 100644
--- a/packages/react-dom/src/ReactDOMFloat.js
+++ b/packages/react-dom/src/ReactDOMFloat.js
@@ -1,39 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {
+  PreconnectOptions,
+  PrefetchDNSOptions,
+  PreloadOptions,
+  PreinitOptions,
+} from './ReactDOMDispatcher';
+
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+const Dispatcher = ReactDOMSharedInternals.Dispatcher;
 
-export function prefetchDNS() {
-  const dispatcher = ReactDOMSharedInternals.Dispatcher.current;
+export function prefetchDNS(href: string) {
+  let passedOptionArg: any;
+  if (__DEV__) {
+    if (arguments[1] !== undefined) {
+      passedOptionArg = arguments[1];
+    }
+  }
+  const dispatcher = Dispatcher.current;
   if (dispatcher) {
-    dispatcher.prefetchDNS.apply(this, arguments);
+    if (__DEV__) {
+      if (passedOptionArg !== undefined) {
+        // prefetchDNS will warn if you pass reserved options arg. We pass it along in Dev only to
+        // elicit the warning. In prod we do not forward since it is not a part of the interface.
+        // @TODO move all arg validation into this file. It needs to be universal anyway so may as well lock down the interace here and
+        // let the rest of the codebase trust the types
+        dispatcher.prefetchDNS(href, passedOptionArg);
+      } else {
+        dispatcher.prefetchDNS(href);
+      }
+    } else {
+      dispatcher.prefetchDNS(href);
+    }
   }
   // We don't error because preconnect needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
   // so we favor silent bailout over warning or erroring.
 }
 
-export function preconnect() {
-  const dispatcher = ReactDOMSharedInternals.Dispatcher.current;
+export function preconnect(href: string, options?: ?PreconnectOptions) {
+  const dispatcher = Dispatcher.current;
   if (dispatcher) {
-    dispatcher.preconnect.apply(this, arguments);
+    dispatcher.preconnect(href, options);
   }
   // We don't error because preconnect needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
   // so we favor silent bailout over warning or erroring.
 }
 
-export function preload() {
-  const dispatcher = ReactDOMSharedInternals.Dispatcher.current;
+export function preload(href: string, options: PreloadOptions) {
+  const dispatcher = Dispatcher.current;
   if (dispatcher) {
-    dispatcher.preload.apply(this, arguments);
+    dispatcher.preload(href, options);
   }
   // We don't error because preload needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
   // so we favor silent bailout over warning or erroring.
 }
 
-export function preinit() {
-  const dispatcher = ReactDOMSharedInternals.Dispatcher.current;
+export function preinit(href: string, options: PreinitOptions) {
+  const dispatcher = Dispatcher.current;
   if (dispatcher) {
-    dispatcher.preinit.apply(this, arguments);
+    dispatcher.preinit(href, options);
   }
   // We don't error because preinit needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
diff --git a/packages/react-dom/src/ReactDOMSharedInternals.js b/packages/react-dom/src/ReactDOMSharedInternals.js
index a9e0407b006b2..5ec2e406edecc 100644
--- a/packages/react-dom/src/ReactDOMSharedInternals.js
+++ b/packages/react-dom/src/ReactDOMSharedInternals.js
@@ -7,11 +7,16 @@
  * @flow
  */
 
+import type {
+  HostDispatcher,
+  HostDispatcherWithStore,
+} from 'react-dom-bindings/src/shared/ReactDOMDispatcher';
+
 type InternalsType = {
   usingClientEntryPoint: boolean,
   Events: [any, any, any, any, any, any],
   Dispatcher: {
-    current: mixed,
+    current: null | HostDispatcher | HostDispatcherWithStore<any>,
   },
 };
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index d362e1b94a4a9..7b01f0423926c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3750,7 +3750,7 @@ body {
     });
 
     // @gate enableFloat
-    it('creates a preload resource when ReactDOM.preinit(..., {as: "style" }) is called outside of render on the client', async () => {
+    it('creates a stylesheet resource when ReactDOM.preinit(..., {as: "style" }) is called outside of render on the client', async () => {
       function App() {
         React.useEffect(() => {
           ReactDOM.preinit('foo', {as: 'style'});
@@ -3768,7 +3768,7 @@ body {
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="preload" href="foo" as="style" />
+            <link rel="stylesheet" href="foo" data-precedence="default" />
           </head>
           <body>foo</body>
         </html>,
@@ -3854,7 +3854,7 @@ body {
     });
 
     // @gate enableFloat
-    it('creates a preload resource when ReactDOM.preinit(..., {as: "script" }) is called outside of render on the client', async () => {
+    it('creates a script resource when ReactDOM.preinit(..., {as: "script" }) is called outside of render on the client', async () => {
       function App() {
         React.useEffect(() => {
           ReactDOM.preinit('foo', {as: 'script'});
@@ -3872,7 +3872,7 @@ body {
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="preload" href="foo" as="script" />
+            <script async="" src="foo" />
           </head>
           <body>foo</body>
         </html>,
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 96d32f8622204..99930cc83b11c 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -13,8 +13,6 @@ import type {
   TransitionTracingCallbacks,
 } from 'react-reconciler/src/ReactInternalTypes';
 
-import ReactDOMSharedInternals from '../ReactDOMSharedInternals';
-const {Dispatcher} = ReactDOMSharedInternals;
 import {ReactDOMClientDispatcher} from 'react-dom-bindings/src/client/ReactDOMHostConfig';
 import {queueExplicitHydrationTarget} from 'react-dom-bindings/src/events/ReactDOMEventReplaying';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
@@ -25,13 +23,19 @@ import {
   disableCommentsAsDOMContainers,
 } from 'shared/ReactFeatureFlags';
 
+import ReactDOMSharedInternals from '../ReactDOMSharedInternals';
+const {Dispatcher} = ReactDOMSharedInternals;
+if (enableFloat) {
+  // Set the default dispatcher to the client dispatcher
+  Dispatcher.current = ReactDOMClientDispatcher;
+}
+
 export type RootType = {
   render(children: ReactNodeList): void,
   unmount(): void,
   _internalRoot: FiberRoot | null,
   ...
 };
-
 export type CreateRootOptions = {
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
diff --git a/packages/react-native-renderer/src/server/ReactNativeFlightServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeFlightServerFormatConfig.js
new file mode 100644
index 0000000000000..c0395ed271793
--- /dev/null
+++ b/packages/react-native-renderer/src/server/ReactNativeFlightServerFormatConfig.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export function prepareHostDispatcher() {}
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 54650e851f614..c1c3ac8e517f5 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -339,6 +339,7 @@ export function hoistResources(
   boundaryResources: BoundaryResources,
 ) {}
 
+export function prepareHostDispatcher() {}
 export function prepareToRender(resources: Resources) {}
 export function cleanupAfterRender(previousDispatcher: mixed) {}
 export function createResources() {}
diff --git a/packages/react-native-renderer/src/shared/ReactNativeFlightClientHostConfig.js b/packages/react-native-renderer/src/shared/ReactNativeFlightClientHostConfig.js
new file mode 100644
index 0000000000000..d03f43acbf5ae
--- /dev/null
+++ b/packages/react-native-renderer/src/shared/ReactNativeFlightClientHostConfig.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type Store = null;
+export function resolveStore(): Store {
+  return null;
+}
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 52794a6221c3f..32b3aa2c4f21e 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -63,6 +63,7 @@ const ReactNoopFlightServer = ReactFlightServer({
   ) {
     return saveModule(reference.value);
   },
+  prepareHostDispatcher() {},
 });
 
 type Options = {
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index cd5edd94d29d6..cb125e0c112ce 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -279,6 +279,7 @@ const ReactNoopServer = ReactFizzServer({
 
   setCurrentlyRenderingBoundaryResourcesTarget(resources: BoundaryResources) {},
 
+  prepareHostDispatcher() {},
   prepareToRender() {},
   cleanupAfterRender() {},
 });
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
index 73b793f0d715c..6145178a8730d 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -20,6 +20,7 @@ export type JSONValue =
 export type RowEncoding =
   | ['O', number, JSONValue]
   | ['I', number, ClientReferenceMetadata]
+  | ['D', number, string]
   | ['P', number, string]
   | ['S', number, string]
   | [
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 0f709b7dbcc24..44f931b1aa635 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Resources} from 'react-server/src/ReactServerFormatConfig';
 import type {RowEncoding, JSONValue} from './ReactFlightDOMRelayProtocol';
 
 import type {
@@ -191,6 +192,15 @@ export function processImportChunk(
   return ['I', id, clientReferenceMetadata];
 }
 
+export function processDirectiveChunk(
+  request: Request,
+  id: number,
+  payload: string,
+): Chunk {
+  // The clientReferenceMetadata is already a JSON serializable value.
+  return ['D', id, payload];
+}
+
 export function scheduleWork(callback: () => void) {
   callback();
 }
@@ -198,8 +208,11 @@ export function scheduleWork(callback: () => void) {
 export function flushBuffered(destination: Destination) {}
 
 export const supportsRequestStorage = false;
-export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
-  (null: any);
+export const requestStorage: AsyncLocalStorage<{
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+}> = (null: any);
+export const requestStorage2: AsyncLocalStorage<Resources> = (null: any);
 
 export function beginWriting(destination: Destination) {}
 
diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
index bc550d63ea7ea..bc441171901a1 100644
--- a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Resources} from 'react-server/src/ReactServerFormatConfig';
+
 export type Destination = {
   buffer: string,
   done: boolean,
@@ -24,8 +26,11 @@ export function scheduleWork(callback: () => void) {
 export function flushBuffered(destination: Destination) {}
 
 export const supportsRequestStorage = false;
-export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
-  (null: any);
+export const requestStorage: AsyncLocalStorage<{
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+}> = (null: any);
+export const requestStorage2: AsyncLocalStorage<Resources> = (null: any);
 
 export function beginWriting(destination: Destination) {}
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index b2a25dec436da..eeeca80619069 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -25,9 +25,11 @@ let clientModuleError;
 let webpackMap;
 let Stream;
 let React;
+let ReactDOM;
 let ReactDOMClient;
 let ReactServerDOMServer;
 let ReactServerDOMClient;
+let ReactDOMFizzServer;
 let Suspense;
 let ErrorBoundary;
 
@@ -42,6 +44,8 @@ describe('ReactFlightDOM', () => {
 
     Stream = require('stream');
     React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMFizzServer = require('react-dom/server.node');
     use = React.use;
     Suspense = React.Suspense;
     ReactDOMClient = require('react-dom/client');
@@ -1114,4 +1118,229 @@ describe('ReactFlightDOM', () => {
     );
     expect(reportedErrors).toEqual([theError]);
   });
+
+  // @gate enableUseHook
+  it('should support ReactDOM.preload when rendering in Fiber', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      ReactDOM.preload('before', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMServer.renderToPipeableStream(
+      <ServerComponent />,
+      webpackMap,
+    );
+    pipe(writable);
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(readable);
+      }
+      return response;
+    }
+
+    function App() {
+      return getResponse();
+    }
+
+    // We pause to allow the float call after the await point to process before the
+    // HostDispatcher gets set for Fiber by createRoot. This is only needed in testing
+    // because the module graphs are not different and the HostDispatcher is shared.
+    // In a real environment the Fiber and Flight code would each have their own independent
+    // dispatcher.
+    // @TODO consider what happens when Server-Components-On-The-Client exist. we probably
+    // want to use the Fiber HostDispatcher there too since it is more about the host than the runtime
+    // but we need to make sure that actually makes sense
+    await 1;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(document.head.innerHTML).toBe(
+      '<link href="before" rel="preload" as="style">' +
+        '<link href="after" rel="preload" as="style">',
+    );
+    expect(container.innerHTML).toBe('<p>hello world</p>');
+  });
+
+  // @gate enableUseHook
+  it('should support ReactDOM.preload when rendering in Fizz', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      ReactDOM.preload('before', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    // In a real environment you would want to call the render during the Fizz render.
+    // The reason we cannot do this in our test is because we don't actually have two separate
+    // module graphs and we are contriving the sequencing to work in a way where
+    // the right HostDispatcher is in scope during the Flight Server Float calls and the
+    // Flight Client directive dispatches
+    const {pipe} = ReactServerDOMServer.renderToPipeableStream(
+      <ServerComponent />,
+      webpackMap,
+    );
+    pipe(flightWritable);
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response =
+          ReactServerDOMClient.createFromReadableStream(flightReadable);
+      }
+      return response;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>{getResponse()}</body>
+        </html>
+      );
+    }
+
+    await act(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(<App />).pipe(fizzWritable);
+    });
+
+    const decoder = new TextDecoder();
+    let reader = fizzReadable.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        content += decoder.decode();
+        break;
+      }
+      content += decoder.decode(value, {stream: true});
+    }
+
+    expect(content).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before"/>' +
+        '<link rel="preload" as="style" href="after"/></head><body><p>hello world</p></body></html>',
+    );
+  });
+
+  it('supports Float directives from concurrent Flight -> Fizz renders', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent1() {
+      ReactDOM.preload('before1', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after1', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    async function ServerComponent2() {
+      ReactDOM.preload('before2', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after2', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const {writable: flightWritable1, readable: flightReadable1} =
+      getTestStream();
+    const {writable: flightWritable2, readable: flightReadable2} =
+      getTestStream();
+
+    ReactServerDOMServer.renderToPipeableStream(
+      <ServerComponent1 />,
+      webpackMap,
+    ).pipe(flightWritable1);
+
+    ReactServerDOMServer.renderToPipeableStream(
+      <ServerComponent2 />,
+      webpackMap,
+    ).pipe(flightWritable2);
+
+    let responses = new Map();
+    function getResponse(stream) {
+      let response = responses.get(stream);
+      if (!response) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+        responses.set(stream, response);
+      }
+      return response;
+    }
+
+    function App({stream}) {
+      return (
+        <html>
+          <body>{getResponse(stream)}</body>
+        </html>
+      );
+    }
+
+    // pausing to let Flight runtime tick. This is a test only artifact of the fact that
+    // we aren't operating separate module graphs for flight and fiber. In a real app
+    // each would have their own dispatcher and there would be no cross dispatching.
+    await 1;
+
+    const {writable: fizzWritable1, readable: fizzReadable1} = getTestStream();
+    const {writable: fizzWritable2, readable: fizzReadable2} = getTestStream();
+    await act(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        <App stream={flightReadable1} />,
+      ).pipe(fizzWritable1);
+      ReactDOMFizzServer.renderToPipeableStream(
+        <App stream={flightReadable2} />,
+      ).pipe(fizzWritable2);
+    });
+
+    async function read(stream) {
+      const decoder = new TextDecoder();
+      const reader = stream.getReader();
+      let buffer = '';
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          buffer += decoder.decode();
+          break;
+        }
+        buffer += decoder.decode(value, {stream: true});
+      }
+      return buffer;
+    }
+
+    const [content1, content2] = await Promise.all([
+      read(fizzReadable1),
+      read(fizzReadable2),
+    ]);
+
+    expect(content1).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before1"/>' +
+        '<link rel="preload" as="style" href="after1"/></head><body><p>hello world</p></body></html>',
+    );
+    expect(content2).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before2"/>' +
+        '<link rel="preload" as="style" href="after2"/></head><body><p>hello world</p></body></html>',
+    );
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index d53a9df2e3eb8..d14f3a980a1bb 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -21,7 +21,9 @@ let webpackMap;
 let webpackServerMap;
 let act;
 let React;
+let ReactDOM;
 let ReactDOMClient;
+let ReactDOMFizzServer;
 let ReactServerDOMServer;
 let ReactServerDOMClient;
 let Suspense;
@@ -37,7 +39,9 @@ describe('ReactFlightDOMBrowser', () => {
     webpackMap = WebpackMock.webpackMap;
     webpackServerMap = WebpackMock.webpackServerMap;
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server.browser');
     ReactServerDOMServer = require('react-server-dom-webpack/server.browser');
     ReactServerDOMClient = require('react-server-dom-webpack/client');
     Suspense = React.Suspense;
@@ -929,4 +933,224 @@ describe('ReactFlightDOMBrowser', () => {
       expect(thrownError.digest).toBe('test-error-digest');
     }
   });
+
+  it('supports Float directives before the first await in server components in Fiber', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      ReactDOM.preload('before', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const stream = ReactServerDOMServer.renderToReadableStream(
+      <ServerComponent />,
+      webpackMap,
+    );
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+      }
+      return response;
+    }
+
+    function App() {
+      return getResponse();
+    }
+
+    // pausing to let Flight runtime tick. This is a test only artifact of the fact that
+    // we aren't operating separate module graphs for flight and fiber. In a real app
+    // each would have their own dispatcher and there would be no cross dispatching.
+    await expect(async () => {
+      await 1;
+    }).toErrorDev(
+      'ReactDOM.preload(): React expected to be able to associate this call to a specific Request but cannot. It is possible that this call was invoked outside of a React component. If you are calling it from within a React component that is an async function after the first `await` then you are in an environment which does not support AsyncLocalStorage. In this kind of environment ReactDOM.preload() does not do anything when called in an async manner. Try moving this function call above the first `await` within the component or remove this call. In environments that support AsyncLocalStorage such as Node.js you can call this method anywhere in a React component even after `await` operator.',
+      {withoutStack: true},
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(document.head.innerHTML).toBe(
+      '<link href="before" rel="preload" as="style">',
+    );
+    expect(container.innerHTML).toBe('<p>hello world</p>');
+  });
+
+  it('supports Float directives before the first await in server components in Fizz', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      ReactDOM.preload('before', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const stream = ReactServerDOMServer.renderToReadableStream(
+      <ServerComponent />,
+      webpackMap,
+    );
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+      }
+      return response;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>{getResponse()}</body>
+        </html>
+      );
+    }
+
+    // pausing to let Flight runtime tick. This is a test only artifact of the fact that
+    // we aren't operating separate module graphs for flight and fiber. In a real app
+    // each would have their own dispatcher and there would be no cross dispatching.
+    await expect(async () => {
+      await 1;
+    }).toErrorDev(
+      'ReactDOM.preload(): React expected to be able to associate this call to a specific Request but cannot. It is possible that this call was invoked outside of a React component. If you are calling it from within a React component that is an async function after the first `await` then you are in an environment which does not support AsyncLocalStorage. In this kind of environment ReactDOM.preload() does not do anything when called in an async manner. Try moving this function call above the first `await` within the component or remove this call. In environments that support AsyncLocalStorage such as Node.js you can call this method anywhere in a React component even after `await` operator.',
+      {withoutStack: true},
+    );
+
+    let fizzStream;
+    await act(async () => {
+      fizzStream = await ReactDOMFizzServer.renderToReadableStream(<App />);
+    });
+
+    const decoder = new TextDecoder();
+    let reader = fizzStream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        content += decoder.decode();
+        break;
+      }
+      content += decoder.decode(value, {stream: true});
+    }
+
+    expect(content).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before"/>' +
+        '</head><body><p>hello world</p></body></html>',
+    );
+  });
+
+  it('supports Float directives from concurrent Flight -> Fizz renders', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent1() {
+      ReactDOM.preload('before1', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after1', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    async function ServerComponent2() {
+      ReactDOM.preload('before2', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after2', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const stream1 = ReactServerDOMServer.renderToReadableStream(
+      <ServerComponent1 />,
+      webpackMap,
+    );
+
+    const stream2 = ReactServerDOMServer.renderToReadableStream(
+      <ServerComponent2 />,
+      webpackMap,
+    );
+
+    let responses = new Map();
+    function getResponse(stream) {
+      let response = responses.get(stream);
+      if (!response) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+        responses.set(stream, response);
+      }
+      return response;
+    }
+
+    function App({stream}) {
+      return (
+        <html>
+          <body>{getResponse(stream)}</body>
+        </html>
+      );
+    }
+
+    // pausing to let Flight runtime tick. This is a test only artifact of the fact that
+    // we aren't operating separate module graphs for flight and fiber. In a real app
+    // each would have their own dispatcher and there would be no cross dispatching.
+    await expect(async () => {
+      await 1;
+    }).toErrorDev(
+      'ReactDOM.preload(): React expected to be able to associate this call to a specific Request but cannot. It is possible that this call was invoked outside of a React component. If you are calling it from within a React component that is an async function after the first `await` then you are in an environment which does not support AsyncLocalStorage. In this kind of environment ReactDOM.preload() does not do anything when called in an async manner. Try moving this function call above the first `await` within the component or remove this call. In environments that support AsyncLocalStorage such as Node.js you can call this method anywhere in a React component even after `await` operator.',
+      {withoutStack: true},
+    );
+
+    let fizzStream1;
+    let fizzStream2;
+    await act(async () => {
+      const [r1, r2] = await Promise.all([
+        ReactDOMFizzServer.renderToReadableStream(<App stream={stream1} />),
+        ReactDOMFizzServer.renderToReadableStream(<App stream={stream2} />),
+      ]);
+      fizzStream1 = r1;
+      fizzStream2 = r2;
+    });
+
+    async function read(stream) {
+      const decoder = new TextDecoder();
+      const reader = stream.getReader();
+      let buffer = '';
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          buffer += decoder.decode();
+          break;
+        }
+        buffer += decoder.decode(value, {stream: true});
+      }
+      return buffer;
+    }
+
+    const [content1, content2] = await Promise.all([
+      read(fizzStream1),
+      read(fizzStream2),
+    ]);
+
+    expect(content1).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before1"/>' +
+        '</head><body><p>hello world</p></body></html>',
+    );
+    expect(content2).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before2"/>' +
+        '</head><body><p>hello world</p></body></html>',
+    );
+  });
 });
diff --git a/packages/react-server/src/ReactFizzResources.js b/packages/react-server/src/ReactFizzResources.js
new file mode 100644
index 0000000000000..ede23dddb2f6e
--- /dev/null
+++ b/packages/react-server/src/ReactFizzResources.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Resources} from './ReactServerFormatConfig';
+
+import {
+  supportsRequestStorage,
+  requestStorage2,
+} from './ReactServerStreamConfig';
+
+export function resolveResources(): null | Resources {
+  if (currentResources) return currentResources;
+  if (supportsRequestStorage) {
+    const store = requestStorage2.getStore();
+    return store || null;
+  }
+  return null;
+}
+
+let currentResources: null | Resources = null;
+
+export function setCurrentResources(store: null | Resources): null | Resources {
+  currentResources = store;
+  return currentResources;
+}
+
+export function getCurrentResources(): null | Resources {
+  return currentResources;
+}
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4d8eb6bdd6321..80d72c4480b69 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -42,6 +42,8 @@ import {
   flushBuffered,
   close,
   closeWithError,
+  supportsRequestStorage,
+  requestStorage2,
 } from './ReactServerStreamConfig';
 import {
   writeCompletedRoot,
@@ -76,6 +78,7 @@ import {
   setCurrentlyRenderingBoundaryResourcesTarget,
   createResources,
   createBoundaryResources,
+  prepareHostDispatcher,
 } from './ReactServerFormatConfig';
 import {
   constructClassInstance,
@@ -277,6 +280,7 @@ export function createRequest(
   onShellError: void | ((error: mixed) => void),
   onFatalError: void | ((error: mixed) => void),
 ): Request {
+  prepareHostDispatcher();
   const pingedTasks: Array<Task> = [];
   const abortSet: Set<Task> = new Set();
   const resources: Resources = createResources();
@@ -1949,7 +1953,7 @@ export function performWork(request: Request): void {
     ReactCurrentCache.current = DefaultCacheDispatcher;
   }
 
-  const previousHostDispatcher = prepareToRender(request.resources);
+  prepareToRender(request.resources);
   let prevGetCurrentStackImpl;
   if (__DEV__) {
     prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
@@ -1977,7 +1981,7 @@ export function performWork(request: Request): void {
     if (enableCache) {
       ReactCurrentCache.current = prevCacheDispatcher;
     }
-    cleanupAfterRender(previousHostDispatcher);
+    cleanupAfterRender();
 
     if (__DEV__) {
       ReactDebugCurrentFrame.getCurrentStack = prevGetCurrentStackImpl;
@@ -2413,7 +2417,13 @@ function flushCompletedQueues(
 }
 
 export function startWork(request: Request): void {
-  scheduleWork(() => performWork(request));
+  if (supportsRequestStorage) {
+    scheduleWork(() =>
+      requestStorage2.run(request.resources, performWork, request),
+    );
+  } else {
+    scheduleWork(() => performWork(request));
+  }
 }
 
 export function startFlowing(request: Request, destination: Destination): void {
diff --git a/packages/react-server/src/ReactFlightCache.js b/packages/react-server/src/ReactFlightCache.js
index 7ac8aaa66222f..589d0984d09ab 100644
--- a/packages/react-server/src/ReactFlightCache.js
+++ b/packages/react-server/src/ReactFlightCache.js
@@ -21,8 +21,8 @@ function createSignal(): AbortSignal {
 function resolveCache(): Map<Function, mixed> {
   if (currentCache) return currentCache;
   if (supportsRequestStorage) {
-    const cache = requestStorage.getStore();
-    if (cache) return cache;
+    const store = requestStorage.getStore();
+    if (store) return store.cache;
   }
   // Since we override the dispatcher all the time, we're effectively always
   // active and so to support cache() and fetch() outside of render, we yield
diff --git a/packages/react-server/src/ReactFlightDirectives.js b/packages/react-server/src/ReactFlightDirectives.js
new file mode 100644
index 0000000000000..9248aa203f299
--- /dev/null
+++ b/packages/react-server/src/ReactFlightDirectives.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {
+  supportsRequestStorage,
+  requestStorage,
+} from './ReactFlightServerConfig';
+
+export function resolveDirectives(): null | Array<string> {
+  if (currentDirectives) return currentDirectives;
+  if (supportsRequestStorage) {
+    const store = requestStorage.getStore();
+    if (store) return store.directives;
+  }
+  // If we do not have a store with directives we can't resolve them.
+  // Callers need to handle cases where directives are unavailable
+  return null;
+}
+
+let currentDirectives: null | Array<string> = null;
+
+export function setCurrentDirectives(
+  directives: null | Array<string>,
+): null | Array<string> {
+  currentDirectives = directives;
+  return currentDirectives;
+}
+
+export function getCurrentDirectives(): null | Array<string> {
+  return currentDirectives;
+}
diff --git a/packages/react-server/src/ReactFlightNewContext.js b/packages/react-server/src/ReactFlightNewContext.js
index 1775110f13dc2..6412e7c2c7e8c 100644
--- a/packages/react-server/src/ReactFlightNewContext.js
+++ b/packages/react-server/src/ReactFlightNewContext.js
@@ -13,7 +13,7 @@ import type {
 } from 'shared/ReactTypes';
 
 import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
-import {isPrimaryRenderer} from './ReactServerFormatConfig';
+import {isPrimaryRenderer} from './ReactFlightServerConfig';
 
 let rendererSigil;
 if (__DEV__) {
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 1c127c886b7be..ab4223d6c8e88 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -44,6 +44,7 @@ import {
   processErrorChunkProd,
   processErrorChunkDev,
   processReferenceChunk,
+  processDirectiveChunk,
   resolveClientReferenceMetadata,
   getServerReferenceId,
   getServerReferenceBoundArguments,
@@ -52,6 +53,7 @@ import {
   isServerReference,
   supportsRequestStorage,
   requestStorage,
+  prepareHostDispatcher,
 } from './ReactFlightServerConfig';
 
 import {
@@ -66,6 +68,10 @@ import {
   getCurrentCache,
   setCurrentCache,
 } from './ReactFlightCache';
+import {
+  getCurrentDirectives,
+  setCurrentDirectives,
+} from './ReactFlightDirectives';
 import {
   pushProvider,
   popProvider,
@@ -146,12 +152,17 @@ type Task = {
   thenableState: ThenableState | null,
 };
 
+type Store = {
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+};
+
 export type Request = {
   status: 0 | 1 | 2,
   fatalError: mixed,
   destination: null | Destination,
   bundlerConfig: ClientManifest,
-  cache: Map<Function, mixed>,
+  store: Store,
   nextChunkId: number,
   pendingChunks: number,
   abortableTasks: Set<Task>,
@@ -196,6 +207,7 @@ export function createRequest(
       'Currently React only supports one RSC renderer at a time.',
     );
   }
+  prepareHostDispatcher();
   ReactCurrentCache.current = DefaultCacheDispatcher;
 
   const abortSet: Set<Task> = new Set();
@@ -205,7 +217,10 @@ export function createRequest(
     fatalError: null,
     destination: null,
     bundlerConfig,
-    cache: new Map(),
+    store: {
+      cache: new Map(),
+      directives: [],
+    },
     nextChunkId: 0,
     pendingChunks: 0,
     abortableTasks: abortSet,
@@ -1153,7 +1168,9 @@ function performWork(request: Request): void {
   const prevDispatcher = ReactCurrentDispatcher.current;
   const prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = HooksDispatcher;
-  setCurrentCache(request.cache);
+  setCurrentCache(request.store.cache);
+  const prevDirectives = getCurrentDirectives();
+  setCurrentDirectives(request.store.directives);
   prepareToUseHooksForRequest(request);
 
   try {
@@ -1172,6 +1189,7 @@ function performWork(request: Request): void {
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
     setCurrentCache(prevCache);
+    setCurrentDirectives(prevDirectives);
     resetHooksForRequest();
   }
 }
@@ -1206,6 +1224,23 @@ function flushCompletedChunks(
       }
     }
     importsChunks.splice(0, i);
+    // Next comes directives data.
+    const directives = request.store.directives;
+    i = 0;
+    for (; i < directives.length; i++) {
+      const rowChunk = processDirectiveChunk(
+        request,
+        request.nextChunkId++,
+        directives[i],
+      );
+      const keepWriting: boolean = writeChunkAndReturn(destination, rowChunk);
+      if (!keepWriting) {
+        request.destination = null;
+        i++;
+        break;
+      }
+    }
+    directives.splice(0, i);
     // Next comes model data.
     const jsonChunks = request.completedJSONChunks;
     i = 0;
@@ -1248,7 +1283,7 @@ function flushCompletedChunks(
 
 export function startWork(request: Request): void {
   if (supportsRequestStorage) {
-    scheduleWork(() => requestStorage.run(request.cache, performWork, request));
+    scheduleWork(() => requestStorage.run(request.store, performWork, request));
   } else {
     scheduleWork(() => performWork(request));
   }
diff --git a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
index b8254bb51d3cd..044d511945403 100644
--- a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
+++ b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
@@ -23,3 +23,4 @@ export const resolveClientReferenceMetadata =
 export const getServerReferenceId = $$$hostConfig.getServerReferenceId;
 export const getServerReferenceBoundArguments =
   $$$hostConfig.getServerReferenceBoundArguments;
+export const prepareHostDispatcher = $$$hostConfig.prepareHostDispatcher;
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 4377a313b374a..4ed64b952fe35 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -156,6 +156,15 @@ export function processImportChunk(
   return stringToChunk(row);
 }
 
+export function processDirectiveChunk(
+  request: Request,
+  id: number,
+  payload: string,
+): Chunk {
+  const row = serializeRowHeader('D', id) + payload + '\n';
+  return stringToChunk(row);
+}
+
 export {
   scheduleWork,
   flushBuffered,
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index aa9cac7b2c373..659cf522aaed1 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Resources} from './ReactServerFormatConfig';
+
 export type Destination = ReadableStreamController;
 
 export type PrecomputedChunk = Uint8Array;
@@ -22,8 +24,11 @@ export function flushBuffered(destination: Destination) {
 }
 
 export const supportsRequestStorage = false;
-export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
-  (null: any);
+export const requestStorage: AsyncLocalStorage<{
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+}> = (null: any);
+export const requestStorage2: AsyncLocalStorage<Resources> = (null: any);
 
 const VIEW_SIZE = 512;
 let currentView = null;
diff --git a/packages/react-server/src/ReactServerStreamConfigBun.js b/packages/react-server/src/ReactServerStreamConfigBun.js
index 9cc88c4086475..0dfdb46b3caf4 100644
--- a/packages/react-server/src/ReactServerStreamConfigBun.js
+++ b/packages/react-server/src/ReactServerStreamConfigBun.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Resources} from './ReactServerFormatConfig';
+
 type BunReadableStreamController = ReadableStreamController & {
   end(): mixed,
   write(data: Chunk): void,
@@ -28,7 +30,11 @@ export function flushBuffered(destination: Destination) {
 
 // AsyncLocalStorage is not available in bun
 export const supportsRequestStorage = false;
-export const requestStorage = (null: any);
+export const requestStorage: AsyncLocalStorage<{
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+}> = (null: any);
+export const requestStorage2: AsyncLocalStorage<Resources> = (null: any);
 
 export function beginWriting(destination: Destination) {}
 
diff --git a/packages/react-server/src/ReactServerStreamConfigEdge.js b/packages/react-server/src/ReactServerStreamConfigEdge.js
index db6bfb14fee8b..61f98a648ee83 100644
--- a/packages/react-server/src/ReactServerStreamConfigEdge.js
+++ b/packages/react-server/src/ReactServerStreamConfigEdge.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Resources} from './ReactServerFormatConfig';
+
 export type Destination = ReadableStreamController;
 
 export type PrecomputedChunk = Uint8Array;
@@ -23,7 +25,11 @@ export function flushBuffered(destination: Destination) {
 
 // For now, we get this from the global scope, but this will likely move to a module.
 export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
-export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
+export const requestStorage: AsyncLocalStorage<{
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+}> = supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+export const requestStorage2: AsyncLocalStorage<Resources> =
   supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
 
 const VIEW_SIZE = 512;
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 5d33ce7d6576d..5b0d6ad5ff4fc 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -8,6 +8,8 @@
  */
 
 import type {Writable} from 'stream';
+import type {Resources} from './ReactServerFormatConfig';
+
 import {TextEncoder} from 'util';
 import {AsyncLocalStorage} from 'async_hooks';
 
@@ -34,8 +36,17 @@ export function flushBuffered(destination: Destination) {
   }
 }
 
+// Conceptually we don't need two request storages because should have
+// separate modules graphs for Flight and Fizz and we could type the store
+// for the runtime. However, for testing and typing it is simpler to just
+// have two stores. I am calling the second one requestStorage2 to hint
+// that it is not not inherent that there is a Fizz storage and a Flight storage.
 export const supportsRequestStorage = true;
-export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
+export const requestStorage: AsyncLocalStorage<{
+  cache: Map<Function, mixed>,
+  directives: Array<string>,
+}> = new AsyncLocalStorage();
+export const requestStorage2: AsyncLocalStorage<Resources> =
   new AsyncLocalStorage();
 
 const VIEW_SIZE = 2048;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.custom.js b/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
index f85cfb5f78b25..675153bf2afb2 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
@@ -9,3 +9,6 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from '../ReactFlightServerBundlerConfigCustom';
+
+export const isPrimaryRenderer = false;
+export function prepareHostDispatcher() {}
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
index 99c541a937d63..d2949ecde49d3 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
@@ -9,3 +9,4 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
index f85cfb5f78b25..ae46ce7a12e9d 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
@@ -9,3 +9,4 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from '../ReactFlightServerBundlerConfigCustom';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js
index 99c541a937d63..d2949ecde49d3 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js
@@ -9,3 +9,4 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
index 99c541a937d63..d2949ecde49d3 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
@@ -9,3 +9,4 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
index 99c541a937d63..d2949ecde49d3 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
@@ -9,3 +9,4 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
index 99c541a937d63..d2949ecde49d3 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
@@ -9,3 +9,4 @@
 
 export * from '../ReactFlightServerConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js
index a6ad653f3a7a1..371bd030044cb 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig';
+export * from 'react-dom-bindings/src/server/ReactDOMFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js b/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
index ab64c4324654f..5a9a09c44d81d 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig';
+export * from 'react-native-renderer/src/server/ReactNativeFlightServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 33f6c5aa65ddb..d396ebaccc474 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -68,6 +68,7 @@ export const writeCompletedBoundaryInstruction =
   $$$hostConfig.writeCompletedBoundaryInstruction;
 export const writeClientRenderBoundaryInstruction =
   $$$hostConfig.writeClientRenderBoundaryInstruction;
+export const prepareHostDispatcher = $$$hostConfig.prepareHostDispatcher;
 export const prepareToRender = $$$hostConfig.prepareToRender;
 export const cleanupAfterRender = $$$hostConfig.cleanupAfterRender;
 
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
index 0e7bafab961aa..03bfcefbb7cf0 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
@@ -37,6 +37,7 @@ export const completeWriting = $$$hostConfig.completeWriting;
 export const flushBuffered = $$$hostConfig.flushBuffered;
 export const supportsRequestStorage = $$$hostConfig.supportsRequestStorage;
 export const requestStorage = $$$hostConfig.requestStorage;
+export const requestStorage2 = $$$hostConfig.requestStorage2;
 export const close = $$$hostConfig.close;
 export const closeWithError = $$$hostConfig.closeWithError;
 export const stringToChunk = $$$hostConfig.stringToChunk;