[Flight] Use AsyncLocalStorage to extend the scope of the cache to micro tasks (#25542)

This extends the scope of the cache and fetch instrumentation using
AsyncLocalStorage for microtasks. This is an intermediate step. It sets
up the dispatcher only once. This is unique to RSC because it uses the
react.shared-subset module for its shared state.

Ideally we should support multiple renderers. We should also have this
take over from an outer SSR's instrumented fetch. We should also be able
to have a fallback to global state per request where AsyncLocalStorage
doesn't exist and then the whole client-side solutions. I'm still
figuring out the right wiring for that so this is a temporary hack.

Author: sebmarkbage

.eslintrc.js

@@ -276,5 +276,6 @@ module.exports = {
     gate: 'readonly',
     trustedTypes: 'readonly',
     IS_REACT_ACT_ENVIRONMENT: 'readonly',
+    AsyncLocalStorage: 'readonly',
   },
 };

packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js

@@ -21,6 +21,9 @@ export function scheduleWork(callback: () => void) {
 
 export function flushBuffered(destination: Destination) {}
 
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<any> = (null: any);
+
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(

packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

@@ -191,6 +191,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 function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): void {

packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js

@@ -23,6 +23,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 function beginWriting(destination: Destination) {}
 
 export function writeChunk(

packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js

@@ -186,6 +186,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 function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): void {

packages/react-server/src/ReactFlightCache.js

@@ -9,16 +9,30 @@
 
 import type {CacheDispatcher} from 'react-reconciler/src/ReactInternalTypes';
 
+import {
+  supportsRequestStorage,
+  requestStorage,
+} from './ReactFlightServerConfig';
+
 function createSignal(): AbortSignal {
   return new AbortController().signal;
 }
 
+function resolveCache(): Map<Function, mixed> {
+  if (currentCache) return currentCache;
+  if (supportsRequestStorage) {
+    const cache = requestStorage.getStore();
+    if (cache) return 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
+  // an empty Map.
+  return new Map();
+}
+
 export const DefaultCacheDispatcher: CacheDispatcher = {
   getCacheSignal(): AbortSignal {
-    if (!currentCache) {
-      throw new Error('Reading the cache is only supported while rendering.');
-    }
-    let entry: AbortSignal | void = (currentCache.get(createSignal): any);
+    let entry: AbortSignal | void = (resolveCache().get(createSignal): any);
     if (entry === undefined) {
       entry = createSignal();
       // $FlowFixMe[incompatible-use] found when upgrading Flow
@@ -27,11 +41,7 @@ export const DefaultCacheDispatcher: CacheDispatcher = {
     return entry;
   },
   getCacheForType<T>(resourceType: () => T): T {
-    if (!currentCache) {
-      throw new Error('Reading the cache is only supported while rendering.');
-    }
-
-    let entry: T | void = (currentCache.get(resourceType): any);
+    let entry: T | void = (resolveCache().get(resourceType): any);
     if (entry === undefined) {
       entry = resourceType();
       // TODO: Warn if undefined?

packages/react-server/src/ReactFlightServer.js

@@ -43,6 +43,8 @@ import {
   resolveModuleMetaData,
   getModuleKey,
   isModuleReference,
+  supportsRequestStorage,
+  requestStorage,
 } from './ReactFlightServerConfig';
 
 import {
@@ -157,6 +159,16 @@ export function createRequest(
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
 ): Request {
+  if (
+    ReactCurrentCache.current !== null &&
+    ReactCurrentCache.current !== DefaultCacheDispatcher
+  ) {
+    throw new Error(
+      'Currently React only supports one RSC renderer at a time.',
+    );
+  }
+  ReactCurrentCache.current = DefaultCacheDispatcher;
+
   const abortSet: Set<Task> = new Set();
   const pingedTasks = [];
   const request = {
@@ -1155,10 +1167,8 @@ function retryTask(request: Request, task: Task): void {
 
 function performWork(request: Request): void {
   const prevDispatcher = ReactCurrentDispatcher.current;
-  const prevCacheDispatcher = ReactCurrentCache.current;
   const prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = HooksDispatcher;
-  ReactCurrentCache.current = DefaultCacheDispatcher;
   setCurrentCache(request.cache);
   prepareToUseHooksForRequest(request);
 
@@ -1177,7 +1187,6 @@ function performWork(request: Request): void {
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
-    ReactCurrentCache.current = prevCacheDispatcher;
     setCurrentCache(prevCache);
     resetHooksForRequest();
   }
@@ -1254,7 +1263,11 @@ function flushCompletedChunks(
 }
 
 export function startWork(request: Request): void {
-  scheduleWork(() => performWork(request));
+  if (supportsRequestStorage) {
+    scheduleWork(() => requestStorage.run(request.cache, performWork, request));
+  } else {
+    scheduleWork(() => performWork(request));
+  }
 }
 
 export function startFlowing(request: Request, destination: Destination): void {

packages/react-server/src/ReactFlightServerConfigStream.js

@@ -72,6 +72,11 @@ import type {Chunk} from './ReactServerStreamConfig';
 
 export type {Destination, Chunk} from './ReactServerStreamConfig';
 
+export {
+  supportsRequestStorage,
+  requestStorage,
+} from './ReactServerStreamConfig';
+
 const stringify = JSON.stringify;
 
 function serializeRowHeader(tag: string, id: number) {

packages/react-server/src/ReactServerStreamConfigBrowser.js

@@ -21,6 +21,13 @@ export function flushBuffered(destination: Destination) {
   // transform streams. https://github.com/whatwg/streams/issues/960
 }
 
+// For now we support AsyncLocalStorage as a global for the "browser" builds
+// TODO: Move this to some special WinterCG build.
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const requestStorage: AsyncLocalStorage<
+  Map<Function, mixed>,
+> = supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+
 const VIEW_SIZE = 512;
 let currentView = null;
 let writtenBytes = 0;

packages/react-server/src/ReactServerStreamConfigNode.js

@@ -9,6 +9,7 @@
 
 import type {Writable} from 'stream';
 import {TextEncoder} from 'util';
+import {AsyncLocalStorage} from 'async_hooks';
 
 interface MightBeFlushable {
   flush?: () => void;
@@ -33,6 +34,11 @@ export function flushBuffered(destination: Destination) {
   }
 }
 
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<
+  Map<Function, mixed>,
+> = new AsyncLocalStorage();
+
 const VIEW_SIZE = 2048;
 let currentView = null;
 let writtenBytes = 0;