diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
index 84fa2cb088d5ce9..fa475942a2f963b 100644
--- a/packages/next/client/app-index.tsx
+++ b/packages/next/client/app-index.tsx
@@ -14,6 +14,9 @@ declare global {
   const __webpack_require__: any
 }
 
+// TODO-APP: change to React.use once it becomes stable
+const use = (React as any).experimental_use
+
 // eslint-disable-next-line no-undef
 const getChunkScriptFilename = __webpack_require__.u
 const chunkFilenameMap: any = {}
@@ -143,7 +146,7 @@ function ServerRoot({ cacheKey }: { cacheKey: string }) {
     rscCache.delete(cacheKey)
   })
   const response = useInitialServerResponse(cacheKey)
-  const root = response.readRoot()
+  const root = use(response)
   return root
 }
 
diff --git a/packages/next/client/components/app-router.client.tsx b/packages/next/client/components/app-router.client.tsx
index e3d4766652cfa96..edc4cf2e77dc79d 100644
--- a/packages/next/client/components/app-router.client.tsx
+++ b/packages/next/client/components/app-router.client.tsx
@@ -65,8 +65,8 @@ export function fetchServerResponse(
   url: URL,
   flightRouterState: FlightRouterState,
   prefetch?: true
-): { readRoot: () => FlightData } {
-  // Handle the `fetch` readable stream that can be read using `readRoot`.
+): Promise<FlightData> {
+  // Handle the `fetch` readable stream that can be unwrapped by `React.use`.
   return createFromReadableStream(fetchFlight(url, flightRouterState, prefetch))
 }
 
@@ -212,20 +212,15 @@ export default function AppRouter({
             window.history.state?.tree || initialTree,
             true
           )
-          try {
-            r.readRoot()
-          } catch (e) {
-            await e
-            const flightData = r.readRoot()
-            // @ts-ignore startTransition exists
-            React.startTransition(() => {
-              dispatch({
-                type: ACTION_PREFETCH,
-                url,
-                flightData,
-              })
+          const flightData = await r
+          // @ts-ignore startTransition exists
+          React.startTransition(() => {
+            dispatch({
+              type: ACTION_PREFETCH,
+              url,
+              flightData,
             })
-          }
+          })
         } catch (err) {
           console.error('PREFETCH ERROR', err)
         }
diff --git a/packages/next/client/components/layout-router.client.tsx b/packages/next/client/components/layout-router.client.tsx
index 197764187e727a8..c1521955d3a5e61 100644
--- a/packages/next/client/components/layout-router.client.tsx
+++ b/packages/next/client/components/layout-router.client.tsx
@@ -17,6 +17,9 @@ import {
 import { fetchServerResponse } from './app-router.client'
 // import { matchSegment } from './match-segments'
 
+// TODO-APP: change to React.use once it becomes stable
+const use = (React as any).experimental_use
+
 /**
  * Check if every segment in array a and b matches
  */
@@ -218,14 +221,14 @@ export function InnerLayoutRouter({
     throw new Error('Child node should not have both subTreeData and data')
   }
 
-  // If cache node has a data request we have to readRoot and update the cache.
+  // If cache node has a data request we have to unwrap response by `use` and update the cache.
   if (childNode.data) {
     // TODO-APP: error case
     /**
      * Flight response data
      */
-    // When the data has not resolved yet readRoot will suspend here.
-    const flightData = childNode.data.readRoot()
+    // When the data has not resolved yet `use` will suspend here.
+    const flightData = use(childNode.data)
 
     // Handle case when navigating to page in `pages` from `app`
     if (typeof flightData === 'string') {
diff --git a/packages/next/client/components/reducer.ts b/packages/next/client/components/reducer.ts
index f4b013528ceb027..d8c6cb2c3bec889 100644
--- a/packages/next/client/components/reducer.ts
+++ b/packages/next/client/components/reducer.ts
@@ -6,9 +6,13 @@ import type {
   FlightSegmentPath,
   Segment,
 } from '../../server/app-render'
+import React from 'react'
 import { matchSegment } from './match-segments'
 import { fetchServerResponse } from './app-router.client'
 
+// TODO-APP: change to React.use once it becomes stable
+const use = (React as any).experimental_use
+
 /**
  * Invalidate cache one level down from the router state.
  */
@@ -730,8 +734,7 @@ export function reducer(
           cache,
           state.cache,
           segments.slice(1),
-          (): { readRoot: () => FlightData } =>
-            fetchServerResponse(url, optimisticTree)
+          (): Promise<FlightData> => fetchServerResponse(url, optimisticTree)
         )
 
         // If optimistic fetch couldn't happen it falls back to the non-optimistic case.
@@ -761,8 +764,8 @@ export function reducer(
         cache.data = fetchServerResponse(url, state.tree)
       }
 
-      // readRoot to suspend here (in the reducer) until the fetch resolves.
-      const flightData = cache.data.readRoot()
+      // Unwrap cache data with `use` to suspend here (in the reducer) until the fetch resolves.
+      const flightData = use(cache.data)
 
       // Handle case when navigating to page in `pages` from `app`
       if (typeof flightData === 'string') {
@@ -953,7 +956,7 @@ export function reducer(
           'refetch',
         ])
       }
-      const flightData = cache.data.readRoot()
+      const flightData = use(cache.data)
 
       // Handle case when navigating to page in `pages` from `app`
       if (typeof flightData === 'string') {
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js
index b5e1d259afd5267..d059e1b5573b58b 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js
@@ -162,6 +162,7 @@ function processErrorChunk(request, id, message, stack) {
   return stringToChunk(row);
 }
 function processModelChunk(request, id, model) {
+  // $FlowFixMe: `json` might be `undefined` when model is a symbol.
   var json = stringify(model, request.toJSON);
   var row = serializeRowHeader('J', id) + json + '\n';
   return stringToChunk(row);
@@ -172,6 +173,7 @@ function processReferenceChunk(request, id, reference) {
   return stringToChunk(row);
 }
 function processModuleChunk(request, id, moduleMetaData) {
+  // $FlowFixMe: `json` might be `undefined` when moduleMetaData is a symbol.
   var json = stringify(moduleMetaData);
   var row = serializeRowHeader('M', id) + json + '\n';
   return stringToChunk(row);
@@ -894,8 +896,8 @@ function readContext(context) {
   return value;
 }
 
-// Corresponds to ReactFiberWakeable module. Generally, changes to one module
-// should be reflected in the other.
+// Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally,
+// changes to one module should be reflected in the others.
 // TODO: Rename this module and the corresponding Fiber one to "Thenable"
 // instead of "Wakeable". Or some other more appropriate name.
 // TODO: Sparse arrays are bad for performance.
@@ -917,11 +919,6 @@ function trackSuspendedWakeable(wakeable) {
   // a listener that will update its status and result when it resolves.
 
   switch (thenable.status) {
-    case 'pending':
-      // Since the status is already "pending", we can assume it will be updated
-      // when it resolves, either by React or something in userspace.
-      break;
-
     case 'fulfilled':
     case 'rejected':
       // A thenable that already resolved shouldn't have been thrown, so this is
@@ -933,9 +930,13 @@ function trackSuspendedWakeable(wakeable) {
 
     default:
       {
-        // TODO: Only instrument the thenable if the status if not defined. If
-        // it's defined, but an unknown value, assume it's been instrumented by
-        // some custom userspace implementation.
+        if (typeof thenable.status === 'string') {
+          // Only instrument the thenable if the status if not defined. If
+          // it's defined, but an unknown value, assume it's been instrumented by
+          // some custom userspace implementation. We treat it as "pending".
+          break;
+        }
+
         var pendingThenable = thenable;
         pendingThenable.status = 'pending';
         pendingThenable.then(function (fulfilledValue) {
@@ -990,7 +991,9 @@ function prepareToUseHooksForComponent(prevThenableState) {
   thenableState = prevThenableState;
 }
 function getThenableStateAfterSuspending() {
-  return thenableState;
+  var state = thenableState;
+  thenableState = null;
+  return state;
 }
 
 function readContext$1(context) {
@@ -1149,6 +1152,9 @@ function use(usable) {
             }
           }
       }
+    } else if (usable.$$typeof === REACT_SERVER_CONTEXT_TYPE) {
+      var context = usable;
+      return readContext$1(context);
     }
   } // eslint-disable-next-line react-internal/safe-string-coercion
 
@@ -1159,7 +1165,8 @@ function use(usable) {
 var ContextRegistry = ReactSharedInternals.ContextRegistry;
 function getOrCreateServerContext(globalName) {
   if (!ContextRegistry[globalName]) {
-    ContextRegistry[globalName] = React.createServerContext(globalName, REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
+    ContextRegistry[globalName] = React.createServerContext(globalName, // $FlowFixMe function signature doesn't reflect the symbol value
+    REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
   }
 
   return ContextRegistry[globalName];
@@ -1292,7 +1299,8 @@ function attemptResolveElement(type, key, ref, props, prevThenableState) {
             if (extraKeys.length !== 0) {
               error('ServerContext can only have a value prop and children. Found: %s', JSON.stringify(extraKeys));
             }
-          }
+          } // $FlowFixMe issue discovered when updating Flow
+
 
           return [REACT_ELEMENT_TYPE, type, key, // Rely on __popProvider being serialized last to pop the provider.
           {
@@ -1677,7 +1685,8 @@ function resolveModelToJSON(request, parent, key, value) {
           }
         }
       }
-    }
+    } // $FlowFixMe
+
 
     return value;
   }
@@ -1708,12 +1717,14 @@ function resolveModelToJSON(request, parent, key, value) {
 
     if (existingId !== undefined) {
       return serializeByValueID(existingId);
-    }
+    } // $FlowFixMe `description` might be undefined
+
 
-    var name = value.description;
+    var name = value.description; // $FlowFixMe `name` might be undefined
 
     if (Symbol.for(name) !== value) {
-      throw new Error('Only global symbols received from Symbol.for(...) can be passed to client components. ' + ("The symbol Symbol.for(" + value.description + ") cannot be found among global symbols. ") + ("Remove " + describeKeyForErrorMessage(key) + " from this object, or avoid the entire object: " + describeObjectForErrorMessage(parent)));
+      throw new Error('Only global symbols received from Symbol.for(...) can be passed to client components. ' + ("The symbol Symbol.for(" + // $FlowFixMe `description` might be undefined
+      value.description + ") cannot be found among global symbols. ") + ("Remove " + describeKeyForErrorMessage(key) + " from this object, or avoid the entire object: " + describeObjectForErrorMessage(parent)));
     }
 
     request.pendingChunks++;
@@ -1772,6 +1783,7 @@ function emitErrorChunk(request, id, error) {
 }
 
 function emitModuleChunk(request, id, moduleMetaData) {
+  // $FlowFixMe ModuleMetaData is not a ReactModel
   var processedChunk = processModuleChunk(request, id, moduleMetaData);
   request.completedModuleChunks.push(processedChunk);
 }
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js
index 892fa9bace9be57..e1e75332dacc9e3 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js
@@ -8,43 +8,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var e=require("react"),l=null,m=0;function n(a,c){if(0!==c.length)if(512<c.length)0<m&&(a.enqueue(new Uint8Array(l.buffer,0,m)),l=new Uint8Array(512),m=0),a.enqueue(c);else{var d=l.length-m;d<c.length&&(0===d?a.enqueue(l):(l.set(c.subarray(0,d),m),a.enqueue(l),c=c.subarray(d)),l=new Uint8Array(512),m=0);l.set(c,m);m+=c.length}return!0}var p=new TextEncoder;function q(a){return p.encode(a)}function u(a,c){"function"===typeof a.error?a.error(c):a.close()}
-var v=JSON.stringify,w=Symbol.for("react.module.reference"),x=Symbol.for("react.element"),aa=Symbol.for("react.fragment"),ba=Symbol.for("react.provider"),ca=Symbol.for("react.forward_ref"),da=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),ea=Symbol.for("react.default_value");function A(a,c,d,b,f,g,h){this.acceptsBooleans=2===c||3===c||4===c;this.attributeName=b;this.attributeNamespace=f;this.mustUseProperty=d;this.propertyName=a;this.type=c;this.sanitizeURL=g;this.removeEmptyString=h}
-var fa="children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ");fa.push("innerText","textContent");fa.forEach(function(a){new A(a,0,!1,a,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){new A(a[0],1,!1,a[1],null,!1,!1)});
-["contentEditable","draggable","spellCheck","value"].forEach(function(a){new A(a,2,!1,a.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){new A(a,2,!1,a,null,!1,!1)});
+var v=JSON.stringify,w=Symbol.for("react.module.reference"),x=Symbol.for("react.element"),aa=Symbol.for("react.fragment"),ba=Symbol.for("react.provider"),ca=Symbol.for("react.server_context"),da=Symbol.for("react.forward_ref"),ea=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),fa=Symbol.for("react.default_value");
+function A(a,c,d,b,f,g,h){this.acceptsBooleans=2===c||3===c||4===c;this.attributeName=b;this.attributeNamespace=f;this.mustUseProperty=d;this.propertyName=a;this.type=c;this.sanitizeURL=g;this.removeEmptyString=h}var ha="children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ");ha.push("innerText","textContent");ha.forEach(function(a){new A(a,0,!1,a,null,!1,!1)});
+[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){new A(a[0],1,!1,a[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){new A(a,2,!1,a.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){new A(a,2,!1,a,null,!1,!1)});
 "allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){new A(a,3,!1,a.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(a){new A(a,3,!0,a,null,!1,!1)});["capture","download"].forEach(function(a){new A(a,4,!1,a,null,!1,!1)});
 ["cols","rows","size","span"].forEach(function(a){new A(a,6,!1,a,null,!1,!1)});["rowSpan","start"].forEach(function(a){new A(a,5,!1,a.toLowerCase(),null,!1,!1)});var B=/[\-:]([a-z])/g;function C(a){return a[1].toUpperCase()}
 "accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var c=a.replace(B,
 C);new A(c,1,!1,a,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var c=a.replace(B,C);new A(c,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(a){var c=a.replace(B,C);new A(c,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(a){new A(a,1,!1,a.toLowerCase(),null,!1,!1)});
 new A("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){new A(a,1,!1,a.toLowerCase(),null,!0,!0)});
 var D={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,
-fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ha=["Webkit","ms","Moz","O"];Object.keys(D).forEach(function(a){ha.forEach(function(c){c=c+a.charAt(0).toUpperCase()+a.substring(1);D[c]=D[a]})});var ia=Array.isArray;q("<script>");q("\x3c/script>");q('<script src="');q('<script type="module" src="');q('" integrity="');q('" async="">\x3c/script>');q("\x3c!-- --\x3e");q(' style="');q(":");q(";");q(" ");q('="');q('"');
+fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ia=["Webkit","ms","Moz","O"];Object.keys(D).forEach(function(a){ia.forEach(function(c){c=c+a.charAt(0).toUpperCase()+a.substring(1);D[c]=D[a]})});var ja=Array.isArray;q("<script>");q("\x3c/script>");q('<script src="');q('<script type="module" src="');q('" integrity="');q('" async="">\x3c/script>');q("\x3c!-- --\x3e");q(' style="');q(":");q(";");q(" ");q('="');q('"');
 q('=""');q(">");q("/>");q(' selected=""');q("\n");q("<!DOCTYPE html>");q("</");q(">");q('<template id="');q('"></template>');q("\x3c!--$--\x3e");q('\x3c!--$?--\x3e<template id="');q('"></template>');q("\x3c!--$!--\x3e");q("\x3c!--/$--\x3e");q("<template");q('"');q(' data-dgst="');q(' data-msg="');q(' data-stck="');q("></template>");q('<div hidden id="');q('">');q("</div>");q('<svg aria-hidden="true" style="display:none" id="');q('">');q("</svg>");q('<math aria-hidden="true" style="display:none" id="');
 q('">');q("</math>");q('<table hidden id="');q('">');q("</table>");q('<table hidden><tbody id="');q('">');q("</tbody></table>");q('<table hidden><tr id="');q('">');q("</tr></table>");q('<table hidden><colgroup id="');q('">');q("</colgroup></table>");q('function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("');q('$RS("');q('","');q('")\x3c/script>');q('function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("');
 q('$RC("');q('","');q('")\x3c/script>');q('function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),b._reactRetry&&b._reactRetry())};$RX("');q('$RX("');q('"');q(")\x3c/script>");q(",");var E=null;
-function F(a,c){if(a!==c){a.context._currentValue=a.parentValue;a=a.parent;var d=c.parent;if(null===a){if(null!==d)throw Error("The stacks must reach the root at the same time. This is a bug in React.");}else{if(null===d)throw Error("The stacks must reach the root at the same time. This is a bug in React.");F(a,d);c.context._currentValue=c.value}}}function ja(a){a.context._currentValue=a.parentValue;a=a.parent;null!==a&&ja(a)}
-function ka(a){var c=a.parent;null!==c&&ka(c);a.context._currentValue=a.value}function la(a,c){a.context._currentValue=a.parentValue;a=a.parent;if(null===a)throw Error("The depth must equal at least at zero before reaching the root. This is a bug in React.");a.depth===c.depth?F(a,c):la(a,c)}
-function ma(a,c){var d=c.parent;if(null===d)throw Error("The depth must equal at least at zero before reaching the root. This is a bug in React.");a.depth===d.depth?F(a,d):ma(a,d);c.context._currentValue=c.value}function G(a){var c=E;c!==a&&(null===c?ka(a):null===a?ja(c):c.depth===a.depth?F(c,a):c.depth>a.depth?la(c,a):ma(c,a),E=a)}function na(a,c){var d=a._currentValue;a._currentValue=c;var b=E;return E=a={parent:b,depth:null===b?0:b.depth+1,context:a,parentValue:d,value:c}}
-function oa(a){switch(a.status){case "pending":break;case "fulfilled":case "rejected":break;default:a.status="pending",a.then(function(c){"pending"===a.status&&(a.status="fulfilled",a.value=c)},function(c){"pending"===a.status&&(a.status="rejected",a.reason=c)})}}var H=null,I=0,J=null;function pa(a){return a._currentValue}
-var ua={useMemo:function(a){return a()},useCallback:function(a){return a},useDebugValue:function(){},useDeferredValue:K,useTransition:K,getCacheForType:function(a){if(!L)throw Error("Reading the cache is only supported while rendering.");var c=L.get(a);void 0===c&&(c=a(),L.set(a,c));return c},readContext:pa,useContext:pa,useReducer:K,useRef:K,useState:K,useInsertionEffect:K,useLayoutEffect:K,useImperativeHandle:K,useEffect:K,useId:qa,useMutableSource:K,useSyncExternalStore:K,useCacheRefresh:function(){return sa},
-useMemoCache:function(a){return Array(a)},use:ta};function K(){throw Error("This Hook is not supported in Server Components.");}function sa(){if(!L)throw Error("Refreshing the cache is not supported in Server Components.");}var L=null;function qa(){if(null===H)throw Error("useId can only be used while React is rendering");var a=H.identifierCount++;return":"+H.identifierPrefix+"S"+a.toString(32)+":"}
-function ta(a){if(null!==a&&"object"===typeof a&&"function"===typeof a.then){var c=I;I+=1;switch(a.status){case "fulfilled":return a.value;case "rejected":throw a.reason;default:a:{if(null!==J){var d=J[c];if(void 0!==d)break a}d=null}if(null!==d)switch(d.status){case "fulfilled":return d.value;case "rejected":throw d.reason;default:throw d;}else throw null===J&&(J=[]),J[c]=a,a;}}throw Error("An unsupported type was passed to use(): "+String(a));}
-var va=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,M=va.ContextRegistry,N=va.ReactCurrentDispatcher;function wa(a){console.error(a)}
-function xa(a,c,d,b,f){var g=new Set,h=[],k={status:0,fatalError:null,destination:null,bundlerConfig:c,cache:new Map,nextChunkId:0,pendingChunks:0,abortableTasks:g,pingedTasks:h,completedModuleChunks:[],completedJSONChunks:[],completedErrorChunks:[],writtenSymbols:new Map,writtenModules:new Map,writtenProviders:new Map,identifierPrefix:f||"",identifierCount:1,onError:void 0===d?wa:d,toJSON:function(a,b){return ya(k,this,a,b)}};k.pendingChunks++;c=za(b);a=Aa(k,a,c,g);h.push(a);return k}var Ba={};
-function O(a,c,d,b,f){if(null!==d&&void 0!==d)throw Error("Refs cannot be used in server components, nor passed to client components.");if("function"===typeof a){if(a.$$typeof===w)return[x,a,c,b];I=0;J=f;return a(b)}if("string"===typeof a)return[x,a,c,b];if("symbol"===typeof a)return a===aa?b.children:[x,a,c,b];if(null!=a&&"object"===typeof a){if(a.$$typeof===w)return[x,a,c,b];switch(a.$$typeof){case y:var g=a._init;a=g(a._payload);return O(a,c,d,b,f);case ca:return c=a.render,I=0,J=f,c(b,void 0);
-case da:return O(a.type,c,d,b,f);case ba:return na(a._context,b.value),[x,a,c,{value:b.value,children:b.children,__pop:Ba}]}}throw Error("Unsupported server component type: "+P(a));}function Aa(a,c,d,b){var f={id:a.nextChunkId++,status:0,model:c,context:d,ping:function(){var b=a.pingedTasks;b.push(f);1===b.length&&Ca(a)},thenableState:null};b.add(f);return f}
-function Da(a,c,d,b){var f=b.filepath+"#"+b.name+(b.async?"#async":""),g=a.writtenModules,h=g.get(f);if(void 0!==h)return c[0]===x&&"1"===d?"@"+h.toString(16):"$"+h.toString(16);try{var k=a.bundlerConfig[b.filepath][b.name];var r=b.async?{id:k.id,chunks:k.chunks,name:k.name,async:!0}:k;a.pendingChunks++;var z=a.nextChunkId++,S=v(r),T="M"+z.toString(16)+":"+S+"\n";var U=p.encode(T);a.completedModuleChunks.push(U);g.set(f,z);return c[0]===x&&"1"===d?"@"+z.toString(16):"$"+z.toString(16)}catch(V){return a.pendingChunks++,
-c=a.nextChunkId++,Q(a,c,V),"$"+c.toString(16)}}function Ea(a){return Object.prototype.toString.call(a).replace(/^\[object (.*)\]$/,function(a,d){return d})}function R(a){var c=JSON.stringify(a);return'"'+a+'"'===c?a:c}function P(a){switch(typeof a){case "string":return JSON.stringify(10>=a.length?a:a.substr(0,10)+"...");case "object":if(ia(a))return"[...]";a=Ea(a);return"Object"===a?"{...}":a;case "function":return"function";default:return String(a)}}
-function W(a,c){if(ia(a)){for(var d="[",b=0;b<a.length;b++){0<b&&(d+=", ");if(6<b){d+="...";break}var f=a[b];d=""+b===c&&"object"===typeof f&&null!==f?d+W(f):d+P(f)}return d+"]"}d="{";b=Object.keys(a);for(f=0;f<b.length;f++){0<f&&(d+=", ");if(6<f){d+="...";break}var g=b[f];d+=R(g)+": ";var h=a[g];d=g===c&&"object"===typeof h&&null!==h?d+W(h):d+P(h)}return d+"}"}
-function ya(a,c,d,b){switch(b){case x:return"$"}for(;"object"===typeof b&&null!==b&&(b.$$typeof===x||b.$$typeof===y);)try{switch(b.$$typeof){case x:var f=b;b=O(f.type,f.key,f.ref,f.props,null);break;case y:var g=b._init;b=g(b._payload)}}catch(h){if("object"===typeof h&&null!==h&&"function"===typeof h.then)return a.pendingChunks++,a=Aa(a,b,E,a.abortableTasks),b=a.ping,h.then(b,b),oa(h),a.thenableState=J,"@"+a.id.toString(16);X(a,h);a.pendingChunks++;b=a.nextChunkId++;Q(a,b,h);return"@"+b.toString(16)}if(null===
-b)return null;if("object"===typeof b){if(b.$$typeof===w)return Da(a,c,d,b);if(b.$$typeof===ba)return f=b._context._globalName,c=a.writtenProviders,b=c.get(d),void 0===b&&(a.pendingChunks++,b=a.nextChunkId++,c.set(f,b),d="P"+b.toString(16)+":"+f+"\n",d=p.encode(d),a.completedJSONChunks.push(d)),"$"+b.toString(16);if(b===Ba){a=E;if(null===a)throw Error("Tried to pop a Context at the root of the app. This is a bug in React.");b=a.parentValue;a.context._currentValue=b===ea?a.context._defaultValue:b;E=
-a.parent;return}return b}if("string"===typeof b)return a="$"===b[0]||"@"===b[0]?"$"+b:b,a;if("boolean"===typeof b||"number"===typeof b||"undefined"===typeof b)return b;if("function"===typeof b){if(b.$$typeof===w)return Da(a,c,d,b);if(/^on[A-Z]/.test(d))throw Error("Event handlers cannot be passed to client component props. Remove "+(R(d)+" from these props if possible: "+W(c)+"\nIf you need interactivity, consider converting part of this to a client component."));throw Error("Functions cannot be passed directly to client components because they're not serializable. Remove "+
+function F(a,c){if(a!==c){a.context._currentValue=a.parentValue;a=a.parent;var d=c.parent;if(null===a){if(null!==d)throw Error("The stacks must reach the root at the same time. This is a bug in React.");}else{if(null===d)throw Error("The stacks must reach the root at the same time. This is a bug in React.");F(a,d);c.context._currentValue=c.value}}}function ka(a){a.context._currentValue=a.parentValue;a=a.parent;null!==a&&ka(a)}
+function la(a){var c=a.parent;null!==c&&la(c);a.context._currentValue=a.value}function ma(a,c){a.context._currentValue=a.parentValue;a=a.parent;if(null===a)throw Error("The depth must equal at least at zero before reaching the root. This is a bug in React.");a.depth===c.depth?F(a,c):ma(a,c)}
+function na(a,c){var d=c.parent;if(null===d)throw Error("The depth must equal at least at zero before reaching the root. This is a bug in React.");a.depth===d.depth?F(a,d):na(a,d);c.context._currentValue=c.value}function G(a){var c=E;c!==a&&(null===c?la(a):null===a?ka(c):c.depth===a.depth?F(c,a):c.depth>a.depth?ma(c,a):na(c,a),E=a)}function oa(a,c){var d=a._currentValue;a._currentValue=c;var b=E;return E=a={parent:b,depth:null===b?0:b.depth+1,context:a,parentValue:d,value:c}}
+function pa(a){switch(a.status){case "fulfilled":case "rejected":break;default:"string"!==typeof a.status&&(a.status="pending",a.then(function(c){"pending"===a.status&&(a.status="fulfilled",a.value=c)},function(c){"pending"===a.status&&(a.status="rejected",a.reason=c)}))}}var H=null,I=0,J=null;function qa(){var a=J;J=null;return a}function ra(a){return a._currentValue}
+var wa={useMemo:function(a){return a()},useCallback:function(a){return a},useDebugValue:function(){},useDeferredValue:K,useTransition:K,getCacheForType:function(a){if(!L)throw Error("Reading the cache is only supported while rendering.");var c=L.get(a);void 0===c&&(c=a(),L.set(a,c));return c},readContext:ra,useContext:ra,useReducer:K,useRef:K,useState:K,useInsertionEffect:K,useLayoutEffect:K,useImperativeHandle:K,useEffect:K,useId:ta,useMutableSource:K,useSyncExternalStore:K,useCacheRefresh:function(){return ua},
+useMemoCache:function(a){return Array(a)},use:va};function K(){throw Error("This Hook is not supported in Server Components.");}function ua(){if(!L)throw Error("Refreshing the cache is not supported in Server Components.");}var L=null;function ta(){if(null===H)throw Error("useId can only be used while React is rendering");var a=H.identifierCount++;return":"+H.identifierPrefix+"S"+a.toString(32)+":"}
+function va(a){if(null!==a&&"object"===typeof a)if("function"===typeof a.then){var c=I;I+=1;switch(a.status){case "fulfilled":return a.value;case "rejected":throw a.reason;default:a:{if(null!==J){var d=J[c];if(void 0!==d)break a}d=null}if(null!==d)switch(d.status){case "fulfilled":return d.value;case "rejected":throw d.reason;default:throw d;}else throw null===J&&(J=[]),J[c]=a,a;}}else if(a.$$typeof===ca)return a._currentValue;throw Error("An unsupported type was passed to use(): "+String(a));}
+var xa=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,M=xa.ContextRegistry,N=xa.ReactCurrentDispatcher;function ya(a){console.error(a)}
+function za(a,c,d,b,f){var g=new Set,h=[],k={status:0,fatalError:null,destination:null,bundlerConfig:c,cache:new Map,nextChunkId:0,pendingChunks:0,abortableTasks:g,pingedTasks:h,completedModuleChunks:[],completedJSONChunks:[],completedErrorChunks:[],writtenSymbols:new Map,writtenModules:new Map,writtenProviders:new Map,identifierPrefix:f||"",identifierCount:1,onError:void 0===d?ya:d,toJSON:function(a,b){return Aa(k,this,a,b)}};k.pendingChunks++;c=Ba(b);a=Ca(k,a,c,g);h.push(a);return k}var Da={};
+function O(a,c,d,b,f){if(null!==d&&void 0!==d)throw Error("Refs cannot be used in server components, nor passed to client components.");if("function"===typeof a){if(a.$$typeof===w)return[x,a,c,b];I=0;J=f;return a(b)}if("string"===typeof a)return[x,a,c,b];if("symbol"===typeof a)return a===aa?b.children:[x,a,c,b];if(null!=a&&"object"===typeof a){if(a.$$typeof===w)return[x,a,c,b];switch(a.$$typeof){case y:var g=a._init;a=g(a._payload);return O(a,c,d,b,f);case da:return c=a.render,I=0,J=f,c(b,void 0);
+case ea:return O(a.type,c,d,b,f);case ba:return oa(a._context,b.value),[x,a,c,{value:b.value,children:b.children,__pop:Da}]}}throw Error("Unsupported server component type: "+P(a));}function Ca(a,c,d,b){var f={id:a.nextChunkId++,status:0,model:c,context:d,ping:function(){var b=a.pingedTasks;b.push(f);1===b.length&&Ea(a)},thenableState:null};b.add(f);return f}
+function Fa(a,c,d,b){var f=b.filepath+"#"+b.name+(b.async?"#async":""),g=a.writtenModules,h=g.get(f);if(void 0!==h)return c[0]===x&&"1"===d?"@"+h.toString(16):"$"+h.toString(16);try{var k=a.bundlerConfig[b.filepath][b.name];var r=b.async?{id:k.id,chunks:k.chunks,name:k.name,async:!0}:k;a.pendingChunks++;var z=a.nextChunkId++,S=v(r),T="M"+z.toString(16)+":"+S+"\n";var U=p.encode(T);a.completedModuleChunks.push(U);g.set(f,z);return c[0]===x&&"1"===d?"@"+z.toString(16):"$"+z.toString(16)}catch(V){return a.pendingChunks++,
+c=a.nextChunkId++,Q(a,c,V),"$"+c.toString(16)}}function Ga(a){return Object.prototype.toString.call(a).replace(/^\[object (.*)\]$/,function(a,d){return d})}function R(a){var c=JSON.stringify(a);return'"'+a+'"'===c?a:c}function P(a){switch(typeof a){case "string":return JSON.stringify(10>=a.length?a:a.substr(0,10)+"...");case "object":if(ja(a))return"[...]";a=Ga(a);return"Object"===a?"{...}":a;case "function":return"function";default:return String(a)}}
+function W(a,c){if(ja(a)){for(var d="[",b=0;b<a.length;b++){0<b&&(d+=", ");if(6<b){d+="...";break}var f=a[b];d=""+b===c&&"object"===typeof f&&null!==f?d+W(f):d+P(f)}return d+"]"}d="{";b=Object.keys(a);for(f=0;f<b.length;f++){0<f&&(d+=", ");if(6<f){d+="...";break}var g=b[f];d+=R(g)+": ";var h=a[g];d=g===c&&"object"===typeof h&&null!==h?d+W(h):d+P(h)}return d+"}"}
+function Aa(a,c,d,b){switch(b){case x:return"$"}for(;"object"===typeof b&&null!==b&&(b.$$typeof===x||b.$$typeof===y);)try{switch(b.$$typeof){case x:var f=b;b=O(f.type,f.key,f.ref,f.props,null);break;case y:var g=b._init;b=g(b._payload)}}catch(h){if("object"===typeof h&&null!==h&&"function"===typeof h.then)return a.pendingChunks++,a=Ca(a,b,E,a.abortableTasks),b=a.ping,h.then(b,b),pa(h),a.thenableState=qa(),"@"+a.id.toString(16);X(a,h);a.pendingChunks++;b=a.nextChunkId++;Q(a,b,h);return"@"+b.toString(16)}if(null===
+b)return null;if("object"===typeof b){if(b.$$typeof===w)return Fa(a,c,d,b);if(b.$$typeof===ba)return f=b._context._globalName,c=a.writtenProviders,b=c.get(d),void 0===b&&(a.pendingChunks++,b=a.nextChunkId++,c.set(f,b),d="P"+b.toString(16)+":"+f+"\n",d=p.encode(d),a.completedJSONChunks.push(d)),"$"+b.toString(16);if(b===Da){a=E;if(null===a)throw Error("Tried to pop a Context at the root of the app. This is a bug in React.");b=a.parentValue;a.context._currentValue=b===fa?a.context._defaultValue:b;E=
+a.parent;return}return b}if("string"===typeof b)return a="$"===b[0]||"@"===b[0]?"$"+b:b,a;if("boolean"===typeof b||"number"===typeof b||"undefined"===typeof b)return b;if("function"===typeof b){if(b.$$typeof===w)return Fa(a,c,d,b);if(/^on[A-Z]/.test(d))throw Error("Event handlers cannot be passed to client component props. Remove "+(R(d)+" from these props if possible: "+W(c)+"\nIf you need interactivity, consider converting part of this to a client component."));throw Error("Functions cannot be passed directly to client components because they're not serializable. Remove "+
 (R(d)+" ("+(b.displayName||b.name||"function")+") from this object, or avoid the entire object: "+W(c)));}if("symbol"===typeof b){f=a.writtenSymbols;g=f.get(b);if(void 0!==g)return"$"+g.toString(16);g=b.description;if(Symbol.for(g)!==b)throw Error("Only global symbols received from Symbol.for(...) can be passed to client components. The symbol Symbol.for("+(b.description+") cannot be found among global symbols. Remove ")+(R(d)+" from this object, or avoid the entire object: "+W(c)));a.pendingChunks++;
 d=a.nextChunkId++;c=v(g);c="S"+d.toString(16)+":"+c+"\n";c=p.encode(c);a.completedModuleChunks.push(c);f.set(b,d);return"$"+d.toString(16)}if("bigint"===typeof b)throw Error("BigInt ("+b+") is not yet supported in client component props. Remove "+(R(d)+" from this object or use a plain number instead: "+W(c)));throw Error("Type "+typeof b+" is not supported in client component props. Remove "+(R(d)+" from this object, or avoid the entire object: "+W(c)));}function X(a,c){a=a.onError;a(c)}
 function Y(a,c){null!==a.destination?(a.status=2,u(a.destination,c)):(a.status=1,a.fatalError=c)}function Q(a,c,d){var b="";try{if(d instanceof Error){var f=String(d.message);b=String(d.stack)}else f="Error: "+d}catch(g){f="An error occurred but serializing the error message failed."}d={message:f,stack:b};c="E"+c.toString(16)+":"+v(d)+"\n";c=p.encode(c);a.completedErrorChunks.push(c)}
-function Ca(a){var c=N.current,d=L;N.current=ua;L=a.cache;H=a;try{var b=a.pingedTasks;a.pingedTasks=[];for(var f=0;f<b.length;f++){var g=b[f];var h=a;if(0===g.status){G(g.context);try{var k=g.model;if("object"===typeof k&&null!==k&&k.$$typeof===x){var r=k,z=g.thenableState;g.model=k;k=O(r.type,r.key,r.ref,r.props,z);for(g.thenableState=null;"object"===typeof k&&null!==k&&k.$$typeof===x;)r=k,g.model=k,k=O(r.type,r.key,r.ref,r.props,null)}var S=g.id,T=v(k,h.toJSON),U="J"+S.toString(16)+":"+T+"\n";var V=
-p.encode(U);h.completedJSONChunks.push(V);h.abortableTasks.delete(g);g.status=1}catch(t){if("object"===typeof t&&null!==t&&"function"===typeof t.then){var ra=g.ping;t.then(ra,ra);oa(t);g.thenableState=J}else h.abortableTasks.delete(g),g.status=4,X(h,t),Q(h,g.id,t)}}}null!==a.destination&&Z(a,a.destination)}catch(t){X(a,t),Y(a,t)}finally{N.current=c,L=d,H=null}}
+function Ea(a){var c=N.current,d=L;N.current=wa;L=a.cache;H=a;try{var b=a.pingedTasks;a.pingedTasks=[];for(var f=0;f<b.length;f++){var g=b[f];var h=a;if(0===g.status){G(g.context);try{var k=g.model;if("object"===typeof k&&null!==k&&k.$$typeof===x){var r=k,z=g.thenableState;g.model=k;k=O(r.type,r.key,r.ref,r.props,z);for(g.thenableState=null;"object"===typeof k&&null!==k&&k.$$typeof===x;)r=k,g.model=k,k=O(r.type,r.key,r.ref,r.props,null)}var S=g.id,T=v(k,h.toJSON),U="J"+S.toString(16)+":"+T+"\n";var V=
+p.encode(U);h.completedJSONChunks.push(V);h.abortableTasks.delete(g);g.status=1}catch(t){if("object"===typeof t&&null!==t&&"function"===typeof t.then){var sa=g.ping;t.then(sa,sa);pa(t);g.thenableState=qa()}else h.abortableTasks.delete(g),g.status=4,X(h,t),Q(h,g.id,t)}}}null!==a.destination&&Z(a,a.destination)}catch(t){X(a,t),Y(a,t)}finally{N.current=c,L=d,H=null}}
 function Z(a,c){l=new Uint8Array(512);m=0;try{for(var d=a.completedModuleChunks,b=0;b<d.length;b++)if(a.pendingChunks--,!n(c,d[b])){a.destination=null;b++;break}d.splice(0,b);var f=a.completedJSONChunks;for(b=0;b<f.length;b++)if(a.pendingChunks--,!n(c,f[b])){a.destination=null;b++;break}f.splice(0,b);var g=a.completedErrorChunks;for(b=0;b<g.length;b++)if(a.pendingChunks--,!n(c,g[b])){a.destination=null;b++;break}g.splice(0,b)}finally{l&&0<m&&(c.enqueue(new Uint8Array(l.buffer,0,m)),l=null,m=0)}0===
-a.pendingChunks&&c.close()}function Fa(a,c){try{var d=a.abortableTasks;if(0<d.size){var b=void 0===c?Error("The render was aborted by the server without a reason."):c;X(a,b);a.pendingChunks++;var f=a.nextChunkId++;Q(a,f,b);d.forEach(function(b){b.status=3;var c="$"+f.toString(16);b=b.id;c=v(c);c="J"+b.toString(16)+":"+c+"\n";c=p.encode(c);a.completedErrorChunks.push(c)});d.clear()}null!==a.destination&&Z(a,a.destination)}catch(g){X(a,g),Y(a,g)}}
-function za(a){if(a){var c=E;G(null);for(var d=0;d<a.length;d++){var b=a[d],f=b[0];b=b[1];M[f]||(M[f]=e.createServerContext(f,ea));na(M[f],b)}a=E;G(c);return a}return null}
-exports.renderToReadableStream=function(a,c,d){var b=xa(a,c,d?d.onError:void 0,d?d.context:void 0,d?d.identifierPrefix:void 0);if(d&&d.signal){var f=d.signal;if(f.aborted)Fa(b,f.reason);else{var g=function(){Fa(b,f.reason);f.removeEventListener("abort",g)};f.addEventListener("abort",g)}}return new ReadableStream({type:"bytes",start:function(){Ca(b)},pull:function(a){if(1===b.status)b.status=2,u(a,b.fatalError);else if(2!==b.status&&null===b.destination){b.destination=a;try{Z(b,a)}catch(k){X(b,k),
+a.pendingChunks&&c.close()}function Ha(a,c){try{var d=a.abortableTasks;if(0<d.size){var b=void 0===c?Error("The render was aborted by the server without a reason."):c;X(a,b);a.pendingChunks++;var f=a.nextChunkId++;Q(a,f,b);d.forEach(function(b){b.status=3;var c="$"+f.toString(16);b=b.id;c=v(c);c="J"+b.toString(16)+":"+c+"\n";c=p.encode(c);a.completedErrorChunks.push(c)});d.clear()}null!==a.destination&&Z(a,a.destination)}catch(g){X(a,g),Y(a,g)}}
+function Ba(a){if(a){var c=E;G(null);for(var d=0;d<a.length;d++){var b=a[d],f=b[0];b=b[1];M[f]||(M[f]=e.createServerContext(f,fa));oa(M[f],b)}a=E;G(c);return a}return null}
+exports.renderToReadableStream=function(a,c,d){var b=za(a,c,d?d.onError:void 0,d?d.context:void 0,d?d.identifierPrefix:void 0);if(d&&d.signal){var f=d.signal;if(f.aborted)Ha(b,f.reason);else{var g=function(){Ha(b,f.reason);f.removeEventListener("abort",g)};f.addEventListener("abort",g)}}return new ReadableStream({type:"bytes",start:function(){Ea(b)},pull:function(a){if(1===b.status)b.status=2,u(a,b.fatalError);else if(2!==b.status&&null===b.destination){b.destination=a;try{Z(b,a)}catch(k){X(b,k),
 Y(b,k)}}},cancel:function(){}},{highWaterMark:0})};
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
index d66fbcb2eee9a0a..7bee808a29046ef 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
@@ -80,17 +80,34 @@ function preloadModule(moduleData) {
   }
 
   if (moduleData.async) {
-    var modulePromise = Promise.all(promises).then(function () {
-      return globalThis.__next_require__(moduleData.id);
-    });
-    modulePromise.then(function (value) {
-      modulePromise.status = 'fulfilled';
-      modulePromise.value = value;
-    }, function (reason) {
-      modulePromise.status = 'rejected';
-      modulePromise.reason = reason;
-    });
-    asyncModuleCache.set(moduleData.id, modulePromise);
+    var existingPromise = asyncModuleCache.get(moduleData.id);
+
+    if (existingPromise) {
+      if (existingPromise.status === 'fulfilled') {
+        return null;
+      }
+
+      return existingPromise;
+    } else {
+      var modulePromise = Promise.all(promises).then(function () {
+        return globalThis.__next_require__(moduleData.id);
+      });
+      modulePromise.then(function (value) {
+        var fulfilledThenable = modulePromise;
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      }, function (reason) {
+        var rejectedThenable = modulePromise;
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = reason;
+      });
+      asyncModuleCache.set(moduleData.id, modulePromise);
+      return modulePromise;
+    }
+  } else if (promises.length > 0) {
+    return Promise.all(promises);
+  } else {
+    return null;
   }
 } // Actually require the module or suspend if it's not yet ready.
 // Increase priority if necessary.
@@ -105,26 +122,10 @@ function requireModule(moduleData) {
 
     if (promise.status === 'fulfilled') {
       moduleExports = promise.value;
-    } else if (promise.status === 'rejected') {
-      throw promise.reason;
     } else {
-      throw promise;
+      throw promise.reason;
     }
   } else {
-    var chunks = moduleData.chunks;
-
-    for (var i = 0; i < chunks.length; i++) {
-      var chunkId = chunks[i];
-      var entry = chunkCache.get(chunkId);
-
-      if (entry !== null) {
-        // We assume that preloadModule has been called before.
-        // So we don't expect to see entry being undefined here, that's an error.
-        // Let's throw either an error or the Promise.
-        throw entry;
-      }
-    }
-
     moduleExports = globalThis.__next_require__(moduleData.id);
   }
 
@@ -156,146 +157,270 @@ var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FI
 var ContextRegistry = ReactSharedInternals.ContextRegistry;
 function getOrCreateServerContext(globalName) {
   if (!ContextRegistry[globalName]) {
-    ContextRegistry[globalName] = React.createServerContext(globalName, REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
+    ContextRegistry[globalName] = React.createServerContext(globalName, // $FlowFixMe function signature doesn't reflect the symbol value
+    REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
   }
 
   return ContextRegistry[globalName];
 }
 
-var PENDING = 0;
-var RESOLVED_MODEL = 1;
-var RESOLVED_MODULE = 2;
-var INITIALIZED = 3;
-var ERRORED = 4;
+var PENDING = 'pending';
+var BLOCKED = 'blocked';
+var RESOLVED_MODEL = 'resolved_model';
+var RESOLVED_MODULE = 'resolved_module';
+var INITIALIZED = 'fulfilled';
+var ERRORED = 'rejected';
 
-function Chunk(status, value, response) {
-  this._status = status;
-  this._value = value;
+function Chunk(status, value, reason, response) {
+  this.status = status;
+  this.value = value;
+  this.reason = reason;
   this._response = response;
-}
+} // We subclass Promise.prototype so that we get other methods like .catch
 
-Chunk.prototype.then = function (resolve) {
-  var chunk = this;
 
-  if (chunk._status === PENDING) {
-    if (chunk._value === null) {
-      chunk._value = [];
-    }
+Chunk.prototype = Object.create(Promise.prototype); // TODO: This doesn't return a new Promise chain unlike the real .then
 
-    chunk._value.push(resolve);
-  } else {
-    resolve();
+Chunk.prototype.then = function (resolve, reject) {
+  var chunk = this; // If we have resolved content, we try to initialize it first which
+  // might put us back into one of the other states.
+
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+
+    case RESOLVED_MODULE:
+      initializeModuleChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      resolve(chunk.value);
+      break;
+
+    case PENDING:
+    case BLOCKED:
+      if (resolve) {
+        if (chunk.value === null) {
+          chunk.value = [];
+        }
+
+        chunk.value.push(resolve);
+      }
+
+      if (reject) {
+        if (chunk.reason === null) {
+          chunk.reason = [];
+        }
+
+        chunk.reason.push(reject);
+      }
+
+      break;
+
+    default:
+      reject(chunk.reason);
+      break;
   }
 };
 
 function readChunk(chunk) {
-  switch (chunk._status) {
-    case INITIALIZED:
-      return chunk._value;
-
+  // If we have resolved content, we try to initialize it first which
+  // might put us back into one of the other states.
+  switch (chunk.status) {
     case RESOLVED_MODEL:
-      return initializeModelChunk(chunk);
+      initializeModelChunk(chunk);
+      break;
 
     case RESOLVED_MODULE:
-      return initializeModuleChunk(chunk);
+      initializeModuleChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return chunk.value;
 
     case PENDING:
+    case BLOCKED:
       // eslint-disable-next-line no-throw-literal
       throw chunk;
 
     default:
-      throw chunk._value;
+      throw chunk.reason;
   }
 }
 
-function readRoot() {
-  var response = this;
+function getRoot(response) {
   var chunk = getChunk(response, 0);
-  return readChunk(chunk);
+  return chunk;
 }
 
 function createPendingChunk(response) {
-  return new Chunk(PENDING, null, response);
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(PENDING, null, null, response);
+}
+
+function createBlockedChunk(response) {
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(BLOCKED, null, null, response);
 }
 
 function createErrorChunk(response, error) {
-  return new Chunk(ERRORED, error, response);
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(ERRORED, null, error, response);
 }
 
 function createInitializedChunk(response, value) {
-  return new Chunk(INITIALIZED, value, response);
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, null, response);
 }
 
-function wakeChunk(listeners) {
-  if (listeners !== null) {
-    for (var i = 0; i < listeners.length; i++) {
-      var listener = listeners[i];
-      listener();
-    }
+function wakeChunk(listeners, value) {
+  for (var i = 0; i < listeners.length; i++) {
+    var listener = listeners[i];
+    listener(value);
+  }
+}
+
+function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
+  switch (chunk.status) {
+    case INITIALIZED:
+      wakeChunk(resolveListeners, chunk.value);
+      break;
+
+    case PENDING:
+    case BLOCKED:
+      chunk.value = resolveListeners;
+      chunk.reason = rejectListeners;
+      break;
+
+    case ERRORED:
+      if (rejectListeners) {
+        wakeChunk(rejectListeners, chunk.reason);
+      }
+
+      break;
   }
 }
 
 function triggerErrorOnChunk(chunk, error) {
-  if (chunk._status !== PENDING) {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
     // We already resolved. We didn't expect to see this.
     return;
   }
 
-  var listeners = chunk._value;
+  var listeners = chunk.reason;
   var erroredChunk = chunk;
-  erroredChunk._status = ERRORED;
-  erroredChunk._value = error;
-  wakeChunk(listeners);
+  erroredChunk.status = ERRORED;
+  erroredChunk.reason = error;
+
+  if (listeners !== null) {
+    wakeChunk(listeners, error);
+  }
 }
 
 function createResolvedModelChunk(response, value) {
-  return new Chunk(RESOLVED_MODEL, value, response);
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
 function createResolvedModuleChunk(response, value) {
-  return new Chunk(RESOLVED_MODULE, value, response);
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(RESOLVED_MODULE, value, null, response);
 }
 
 function resolveModelChunk(chunk, value) {
-  if (chunk._status !== PENDING) {
+  if (chunk.status !== PENDING) {
     // We already resolved. We didn't expect to see this.
     return;
   }
 
-  var listeners = chunk._value;
+  var resolveListeners = chunk.value;
+  var rejectListeners = chunk.reason;
   var resolvedChunk = chunk;
-  resolvedChunk._status = RESOLVED_MODEL;
-  resolvedChunk._value = value;
-  wakeChunk(listeners);
+  resolvedChunk.status = RESOLVED_MODEL;
+  resolvedChunk.value = value;
+
+  if (resolveListeners !== null) {
+    // This is unfortunate that we're reading this eagerly if
+    // we already have listeners attached since they might no
+    // longer be rendered or might not be the highest pri.
+    initializeModelChunk(resolvedChunk); // The status might have changed after initialization.
+
+    wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
+  }
 }
 
 function resolveModuleChunk(chunk, value) {
-  if (chunk._status !== PENDING) {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
     // We already resolved. We didn't expect to see this.
     return;
   }
 
-  var listeners = chunk._value;
+  var resolveListeners = chunk.value;
+  var rejectListeners = chunk.reason;
   var resolvedChunk = chunk;
-  resolvedChunk._status = RESOLVED_MODULE;
-  resolvedChunk._value = value;
-  wakeChunk(listeners);
+  resolvedChunk.status = RESOLVED_MODULE;
+  resolvedChunk.value = value;
+
+  if (resolveListeners !== null) {
+    initializeModuleChunk(resolvedChunk);
+    wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
+  }
 }
 
+var initializingChunk = null;
+var initializingChunkBlockedModel = null;
+
 function initializeModelChunk(chunk) {
-  var value = parseModel(chunk._response, chunk._value);
-  var initializedChunk = chunk;
-  initializedChunk._status = INITIALIZED;
-  initializedChunk._value = value;
-  return value;
+  var prevChunk = initializingChunk;
+  var prevBlocked = initializingChunkBlockedModel;
+  initializingChunk = chunk;
+  initializingChunkBlockedModel = null;
+
+  try {
+    var _value = parseModel(chunk._response, chunk.value);
+
+    if (initializingChunkBlockedModel !== null && initializingChunkBlockedModel.deps > 0) {
+      initializingChunkBlockedModel.value = _value; // We discovered new dependencies on modules that are not yet resolved.
+      // We have to go the BLOCKED state until they're resolved.
+
+      var blockedChunk = chunk;
+      blockedChunk.status = BLOCKED;
+      blockedChunk.value = null;
+      blockedChunk.reason = null;
+    } else {
+      var initializedChunk = chunk;
+      initializedChunk.status = INITIALIZED;
+      initializedChunk.value = _value;
+    }
+  } catch (error) {
+    var erroredChunk = chunk;
+    erroredChunk.status = ERRORED;
+    erroredChunk.reason = error;
+  } finally {
+    initializingChunk = prevChunk;
+    initializingChunkBlockedModel = prevBlocked;
+  }
 }
 
 function initializeModuleChunk(chunk) {
-  var value = requireModule(chunk._value);
-  var initializedChunk = chunk;
-  initializedChunk._status = INITIALIZED;
-  initializedChunk._value = value;
-  return value;
+  try {
+    var _value2 = requireModule(chunk.value);
+
+    var initializedChunk = chunk;
+    initializedChunk.status = INITIALIZED;
+    initializedChunk.value = _value2;
+  } catch (error) {
+    var erroredChunk = chunk;
+    erroredChunk.status = ERRORED;
+    erroredChunk.reason = error;
+  }
 } // Report that any missing chunks in the model is now going to throw this
 // error upon read. Also notify any pending promises.
 
@@ -305,7 +430,9 @@ function reportGlobalError(response, error) {
     // If this chunk was already resolved or errored, it won't
     // trigger an error but if it wasn't then we need to
     // because we won't be getting any new data to resolve it.
-    triggerErrorOnChunk(chunk, error);
+    if (chunk.status === PENDING) {
+      triggerErrorOnChunk(chunk, error);
+    }
   });
 }
 
@@ -372,7 +499,47 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function parseModelString(response, parentObject, value) {
+function createModelResolver(chunk, parentObject, key) {
+  var blocked;
+
+  if (initializingChunkBlockedModel) {
+    blocked = initializingChunkBlockedModel;
+    blocked.deps++;
+  } else {
+    blocked = initializingChunkBlockedModel = {
+      deps: 1,
+      value: null
+    };
+  }
+
+  return function (value) {
+    parentObject[key] = value;
+    blocked.deps--;
+
+    if (blocked.deps === 0) {
+      if (chunk.status !== BLOCKED) {
+        return;
+      }
+
+      var resolveListeners = chunk.value;
+      var initializedChunk = chunk;
+      initializedChunk.status = INITIALIZED;
+      initializedChunk.value = blocked.value;
+
+      if (resolveListeners !== null) {
+        wakeChunk(resolveListeners, blocked.value);
+      }
+    }
+  };
+}
+
+function createModelReject(chunk) {
+  return function (error) {
+    return triggerErrorOnChunk(chunk, error);
+  };
+}
+
+function parseModelString(response, parentObject, key, value) {
   switch (value[0]) {
     case '$':
       {
@@ -385,11 +552,30 @@ function parseModelString(response, parentObject, value) {
           var id = parseInt(value.substring(1), 16);
           var chunk = getChunk(response, id);
 
-          if (chunk._status === PENDING) {
-            throw new Error("We didn't expect to see a forward reference. This is a bug in the React Server.");
-          }
+          switch (chunk.status) {
+            case RESOLVED_MODEL:
+              initializeModelChunk(chunk);
+              break;
+
+            case RESOLVED_MODULE:
+              initializeModuleChunk(chunk);
+              break;
+          } // The status might have changed after initialization.
+
+
+          switch (chunk.status) {
+            case INITIALIZED:
+              return chunk.value;
 
-          return readChunk(chunk);
+            case PENDING:
+            case BLOCKED:
+              var parentChunk = initializingChunk;
+              chunk.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk));
+              return null;
+
+            default:
+              throw chunk.reason;
+          }
         }
       }
 
@@ -422,8 +608,7 @@ function createResponse(bundlerConfig) {
   var chunks = new Map();
   var response = {
     _bundlerConfig: bundlerConfig,
-    _chunks: chunks,
-    readRoot: readRoot
+    _chunks: chunks
   };
   return response;
 }
@@ -449,12 +634,36 @@ function resolveModule(response, id, model) {
   // For now we preload all modules as early as possible since it's likely
   // that we'll need them.
 
-  preloadModule(moduleReference);
+  var promise = preloadModule(moduleReference);
 
-  if (!chunk) {
-    chunks.set(id, createResolvedModuleChunk(response, moduleReference));
+  if (promise) {
+    var blockedChunk;
+
+    if (!chunk) {
+      // Technically, we should just treat promise as the chunk in this
+      // case. Because it'll just behave as any other promise.
+      blockedChunk = createBlockedChunk(response);
+      chunks.set(id, blockedChunk);
+    } else {
+      // This can't actually happen because we don't have any forward
+      // references to modules.
+      blockedChunk = chunk;
+      blockedChunk.status = BLOCKED;
+    }
+
+    promise.then(function () {
+      return resolveModuleChunk(blockedChunk, moduleReference);
+    }, function (error) {
+      return triggerErrorOnChunk(blockedChunk, error);
+    });
   } else {
-    resolveModuleChunk(chunk, moduleReference);
+    if (!chunk) {
+      chunks.set(id, createResolvedModuleChunk(response, moduleReference));
+    } else {
+      // This can't actually happen because we don't have any forward
+      // references to modules.
+      resolveModuleChunk(chunk, moduleReference);
+    }
   }
 }
 function resolveSymbol(response, id, name) {
@@ -570,7 +779,7 @@ function createFromJSONCallback(response) {
   return function (key, value) {
     if (typeof value === 'string') {
       // We can't use .bind here because we need the "this" value.
-      return parseModelString(response, this, value);
+      return parseModelString(response, this, key, value);
     }
 
     if (typeof value === 'object' && value !== null) {
@@ -624,7 +833,7 @@ function startReadingFromStream(response, stream) {
 function createFromReadableStream(stream, options) {
   var response = createResponse$1(options && options.moduleMap ? options.moduleMap : null);
   startReadingFromStream(response, stream);
-  return response;
+  return getRoot(response);
 }
 
 function createFromFetch(promiseForResponse, options) {
@@ -634,7 +843,7 @@ function createFromFetch(promiseForResponse, options) {
   }, function (e) {
     reportGlobalError(response, e);
   });
-  return response;
+  return getRoot(response);
 }
 
 function createFromXHR(request, options) {
@@ -661,7 +870,7 @@ function createFromXHR(request, options) {
   request.addEventListener('error', error);
   request.addEventListener('abort', error);
   request.addEventListener('timeout', error);
-  return response;
+  return getRoot(response);
 }
 
 exports.createFromFetch = createFromFetch;
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
index ad576fe6be77ea4..8436cfe0d149c58 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
@@ -7,14 +7,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var h=require("react"),l={stream:!0},m=new Map,p=new Map;function q(a){for(var b=a.chunks,c=[],d=0;d<b.length;d++){var e=b[d];if(void 0===m.get(e)){var f=globalThis.__next_chunk_load__(e);c.push(f);var F=m.set.bind(m,e,null),k=m.set.bind(m,e);f.then(F,k);m.set(e,f)}}if(a.async){var g=Promise.all(c).then(function(){return globalThis.__next_require__(a.id)});g.then(function(a){g.status="fulfilled";g.value=a},function(a){g.status="rejected";g.reason=a});p.set(a.id,g)}}
-var r=Symbol.for("react.element"),t=Symbol.for("react.lazy"),u=Symbol.for("react.default_value"),v=h.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;function w(a){v[a]||(v[a]=h.createServerContext(a,u));return v[a]}function x(a,b,c){this._status=a;this._value=b;this._response=c}x.prototype.then=function(a){0===this._status?(null===this._value&&(this._value=[]),this._value.push(a)):a()};
-function y(a){switch(a._status){case 3:return a._value;case 1:var b=JSON.parse(a._value,a._response._fromJSON);a._status=3;return a._value=b;case 2:b=a._value;if(b.async){var c=p.get(b.id);if("fulfilled"===c.status)c=c.value;else{if("rejected"===c.status)throw c.reason;throw c;}}else{c=b.chunks;for(var d=0;d<c.length;d++){var e=m.get(c[d]);if(null!==e)throw e;}c=globalThis.__next_require__(b.id)}b="*"===b.name?c:""===b.name?c.__esModule?c.default:c:c[b.name];a._status=3;return a._value=b;case 0:throw a;default:throw a._value;
-}}function z(){var a=A(this,0);return y(a)}function B(a,b){return new x(3,b,a)}function C(a){if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}function D(a,b){if(0===a._status){var c=a._value;a._status=4;a._value=b;C(c)}}function E(a,b){a._chunks.forEach(function(a){D(a,b)})}function A(a,b){var c=a._chunks,d=c.get(b);d||(d=new x(0,null,a),c.set(b,d));return d}
-function G(a,b,c){switch(c[0]){case "$":if("$"===c)return r;if("$"===c[1]||"@"===c[1])return c.substring(1);b=parseInt(c.substring(1),16);a=A(a,b);if(0===a._status)throw Error("We didn't expect to see a forward reference. This is a bug in the React Server.");return y(a);case "@":return b=parseInt(c.substring(1),16),a=A(a,b),{$$typeof:t,_payload:a,_init:y}}return c}function H(a){E(a,Error("Connection closed."))}
-function I(a,b){if(""!==b){var c=b[0],d=b.indexOf(":",1),e=parseInt(b.substring(1,d),16);d=b.substring(d+1);switch(c){case "J":b=a._chunks;(c=b.get(e))?0===c._status&&(a=c._value,c._status=1,c._value=d,C(a)):b.set(e,new x(1,d,a));break;case "M":b=a._chunks;c=b.get(e);d=JSON.parse(d,a._fromJSON);var f=a._bundlerConfig;f&&(f=f[d.id][d.name],d=d.async?{id:f.id,chunks:f.chunks,name:f.name,async:!0}:f);q(d);c?0===c._status&&(a=c._value,c._status=2,c._value=d,C(a)):b.set(e,new x(2,d,a));break;case "P":a._chunks.set(e,
-B(a,w(d).Provider));break;case "S":c=JSON.parse(d);a._chunks.set(e,B(a,Symbol.for(c)));break;case "E":b=JSON.parse(d);c=Error(b.message);c.stack=b.stack;b=a._chunks;(d=b.get(e))?D(d,c):b.set(e,new x(4,c,a));break;default:throw Error("Error parsing the data. It's probably an error code or network corruption.");}}}
-function J(a){return function(b,c){return"string"===typeof c?G(a,this,c):"object"===typeof c&&null!==c?(b=c[0]===r?{$$typeof:r,type:c[1],key:c[2],ref:null,props:c[3],_owner:null}:c,b):c}}function K(a){var b=new TextDecoder,c=new Map;a={_bundlerConfig:a,_chunks:c,readRoot:z,_partialRow:"",_stringDecoder:b};a._fromJSON=J(a);return a}
-function L(a,b){function c(b){var f=b.value;if(b.done)H(a);else{b=f;f=a._stringDecoder;for(var k=b.indexOf(10);-1<k;){var g=a._partialRow;var n=b.subarray(0,k);n=f.decode(n);I(a,g+n);a._partialRow="";b=b.subarray(k+1);k=b.indexOf(10)}a._partialRow+=f.decode(b,l);return e.read().then(c).catch(d)}}function d(b){E(a,b)}var e=b.getReader();e.read().then(c).catch(d)}exports.createFromFetch=function(a,b){var c=K(b&&b.moduleMap?b.moduleMap:null);a.then(function(a){L(c,a.body)},function(a){E(c,a)});return c};
-exports.createFromReadableStream=function(a,b){b=K(b&&b.moduleMap?b.moduleMap:null);L(b,a);return b};
-exports.createFromXHR=function(a,b){function c(){for(var b=a.responseText,c=f,d=b.indexOf("\n",c);-1<d;)c=e._partialRow+b.substring(c,d),I(e,c),e._partialRow="",c=d+1,d=b.indexOf("\n",c);e._partialRow+=b.substring(c);f=b.length}function d(){E(e,new TypeError("Network error"))}var e=K(b&&b.moduleMap?b.moduleMap:null),f=0;a.addEventListener("progress",c);a.addEventListener("load",function(){c();H(e)});a.addEventListener("error",d);a.addEventListener("abort",d);a.addEventListener("timeout",d);return e};
+'use strict';var k=require("react"),l={stream:!0};function m(a,b){return a?(a=a[b.id][b.name],b.async?{id:a.id,chunks:a.chunks,name:a.name,async:!0}:a):b}var n=new Map,p=new Map;
+function q(a){for(var b=a.chunks,c=[],d=0;d<b.length;d++){var e=b[d];if(void 0===n.get(e)){var f=globalThis.__next_chunk_load__(e);c.push(f);var g=n.set.bind(n,e,null),L=n.set.bind(n,e);f.then(g,L);n.set(e,f)}}if(a.async){if(b=p.get(a.id))return"fulfilled"===b.status?null:b;var h=Promise.all(c).then(function(){return globalThis.__next_require__(a.id)});h.then(function(a){h.status="fulfilled";h.value=a},function(a){h.status="rejected";h.reason=a});p.set(a.id,h);return h}return 0<c.length?Promise.all(c):null}
+var r=Symbol.for("react.element"),t=Symbol.for("react.lazy"),u=Symbol.for("react.default_value"),v=k.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;function w(a){v[a]||(v[a]=k.createServerContext(a,u));return v[a]}function y(a,b,c,d){this.status=a;this.value=b;this.reason=c;this._response=d}y.prototype=Object.create(Promise.prototype);
+y.prototype.then=function(a,b){switch(this.status){case "resolved_model":z(this);break;case "resolved_module":A(this)}switch(this.status){case "fulfilled":a(this.value);break;case "pending":case "blocked":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};
+function B(a){switch(a.status){case "resolved_model":z(a);break;case "resolved_module":A(a)}switch(a.status){case "fulfilled":return a.value;case "pending":case "blocked":throw a;default:throw a.reason;}}function C(a,b){return new y("fulfilled",b,null,a)}function D(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function E(a,b,c){switch(a.status){case "fulfilled":D(b,a.value);break;case "pending":case "blocked":a.value=b;a.reason=c;break;case "rejected":c&&D(c,a.reason)}}
+function F(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&D(c,b)}}function G(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.value,d=a.reason;a.status="resolved_module";a.value=b;null!==c&&(A(a),E(a,c,d))}}var H=null,I=null;
+function z(a){var b=H,c=I;H=a;I=null;try{var d=JSON.parse(a.value,a._response._fromJSON);null!==I&&0<I.deps?(I.value=d,a.status="blocked",a.value=null,a.reason=null):(a.status="fulfilled",a.value=d)}catch(e){a.status="rejected",a.reason=e}finally{H=b,I=c}}
+function A(a){try{var b=a.value;if(b.async){var c=p.get(b.id);if("fulfilled"===c.status)var d=c.value;else throw c.reason;}else d=globalThis.__next_require__(b.id);var e="*"===b.name?d:""===b.name?d.__esModule?d.default:d:d[b.name];a.status="fulfilled";a.value=e}catch(f){a.status="rejected",a.reason=f}}function J(a,b){a._chunks.forEach(function(a){"pending"===a.status&&F(a,b)})}function K(a,b){var c=a._chunks,d=c.get(b);d||(d=new y("pending",null,null,a),c.set(b,d));return d}
+function M(a,b,c){if(I){var d=I;d.deps++}else d=I={deps:1,value:null};return function(e){b[c]=e;d.deps--;0===d.deps&&"blocked"===a.status&&(e=a.value,a.status="fulfilled",a.value=d.value,null!==e&&D(e,d.value))}}function N(a){return function(b){return F(a,b)}}
+function O(a,b,c,d){switch(d[0]){case "$":if("$"===d)return r;if("$"===d[1]||"@"===d[1])return d.substring(1);d=parseInt(d.substring(1),16);a=K(a,d);switch(a.status){case "resolved_model":z(a);break;case "resolved_module":A(a)}switch(a.status){case "fulfilled":return a.value;case "pending":case "blocked":return d=H,a.then(M(d,b,c),N(d)),null;default:throw a.reason;}case "@":return b=parseInt(d.substring(1),16),b=K(a,b),{$$typeof:t,_payload:b,_init:B}}return d}
+function P(a,b,c){var d=a._chunks,e=d.get(b);c=JSON.parse(c,a._fromJSON);var f=m(a._bundlerConfig,c);if(c=q(f)){if(e){var g=e;g.status="blocked"}else g=new y("blocked",null,null,a),d.set(b,g);c.then(function(){return G(g,f)},function(a){return F(g,a)})}else e?G(e,f):d.set(b,new y("resolved_module",f,null,a))}function Q(a){J(a,Error("Connection closed."))}
+function R(a,b){if(""!==b){var c=b[0],d=b.indexOf(":",1),e=parseInt(b.substring(1,d),16);b=b.substring(d+1);switch(c){case "J":d=a._chunks;(c=d.get(e))?"pending"===c.status&&(a=c.value,e=c.reason,c.status="resolved_model",c.value=b,null!==a&&(z(c),E(c,a,e))):d.set(e,new y("resolved_model",b,null,a));break;case "M":P(a,e,b);break;case "P":a._chunks.set(e,C(a,w(b).Provider));break;case "S":b=JSON.parse(b);a._chunks.set(e,C(a,Symbol.for(b)));break;case "E":c=JSON.parse(b);b=Error(c.message);b.stack=
+c.stack;c=a._chunks;(d=c.get(e))?F(d,b):c.set(e,new y("rejected",null,b,a));break;default:throw Error("Error parsing the data. It's probably an error code or network corruption.");}}}function S(a){return function(b,c){return"string"===typeof c?O(a,this,b,c):"object"===typeof c&&null!==c?(b=c[0]===r?{$$typeof:r,type:c[1],key:c[2],ref:null,props:c[3],_owner:null}:c,b):c}}
+function T(a){var b=new TextDecoder,c=new Map;a={_bundlerConfig:a,_chunks:c,_partialRow:"",_stringDecoder:b};a._fromJSON=S(a);return a}function U(a,b){function c(b){var g=b.value;if(b.done)Q(a);else{b=g;g=a._stringDecoder;for(var f=b.indexOf(10);-1<f;){var h=a._partialRow;var x=b.subarray(0,f);x=g.decode(x);R(a,h+x);a._partialRow="";b=b.subarray(f+1);f=b.indexOf(10)}a._partialRow+=g.decode(b,l);return e.read().then(c).catch(d)}}function d(b){J(a,b)}var e=b.getReader();e.read().then(c).catch(d)}
+exports.createFromFetch=function(a,b){var c=T(b&&b.moduleMap?b.moduleMap:null);a.then(function(a){U(c,a.body)},function(a){J(c,a)});return K(c,0)};exports.createFromReadableStream=function(a,b){b=T(b&&b.moduleMap?b.moduleMap:null);U(b,a);return K(b,0)};
+exports.createFromXHR=function(a,b){function c(){for(var b=a.responseText,c=f,d=b.indexOf("\n",c);-1<d;)c=e._partialRow+b.substring(c,d),R(e,c),e._partialRow="",c=d+1,d=b.indexOf("\n",c);e._partialRow+=b.substring(c);f=b.length}function d(){J(e,new TypeError("Network error"))}var e=T(b&&b.moduleMap?b.moduleMap:null),f=0;a.addEventListener("progress",c);a.addEventListener("load",function(){c();Q(e)});a.addEventListener("error",d);a.addEventListener("abort",d);a.addEventListener("timeout",d);return K(e,
+0)};
diff --git a/packages/next/package.json b/packages/next/package.json
index 38d15573d02f5ed..2104f671e5736f2 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -244,7 +244,7 @@
     "raw-body": "2.4.1",
     "react-is": "17.0.2",
     "react-refresh": "0.12.0",
-    "react-server-dom-webpack": "0.0.0-experimental-7028ce745-20220907",
+    "react-server-dom-webpack": "0.0.0-experimental-975b64464-20220914",
     "regenerator-runtime": "0.13.4",
     "sass-loader": "12.4.0",
     "schema-utils2": "npm:schema-utils@2.7.1",
diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
index a689c072523504b..0202abd6c455035 100644
--- a/packages/next/server/app-render.tsx
+++ b/packages/next/server/app-render.tsx
@@ -29,6 +29,9 @@ import { FlushEffectsContext } from '../client/components/hooks-client'
 import { stripInternalQueries } from './internal-utils'
 import type { ComponentsType } from '../build/webpack/loaders/next-app-loader'
 
+// TODO-APP: change to React.use once it becomes stable
+const use = (React as any).experimental_use
+
 // this needs to be required lazily so that `next-server` can set
 // the env before we require
 const ReactDOMServer = shouldUseReactRoot
@@ -251,7 +254,7 @@ function createServerComponentRenderer(
       flightResponseRef,
       nonce
     )
-    return response.readRoot()
+    return use(response)
   }
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18e87087aa3a731..abb565419511c89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -548,7 +548,7 @@ importers:
       raw-body: 2.4.1
       react-is: 17.0.2
       react-refresh: 0.12.0
-      react-server-dom-webpack: 0.0.0-experimental-7028ce745-20220907
+      react-server-dom-webpack: 0.0.0-experimental-975b64464-20220914
       regenerator-runtime: 0.13.4
       sass-loader: 12.4.0
       schema-utils2: npm:schema-utils@2.7.1
@@ -737,7 +737,7 @@ importers:
       raw-body: 2.4.1
       react-is: 17.0.2
       react-refresh: 0.12.0
-      react-server-dom-webpack: 0.0.0-experimental-7028ce745-20220907_webpack@5.74.0
+      react-server-dom-webpack: 0.0.0-experimental-975b64464-20220914_webpack@5.74.0
       regenerator-runtime: 0.13.4
       sass-loader: 12.4.0_webpack@5.74.0
       schema-utils2: /schema-utils/2.7.1
@@ -24444,14 +24444,14 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
-  /react-server-dom-webpack/0.0.0-experimental-7028ce745-20220907_webpack@5.74.0:
+  /react-server-dom-webpack/0.0.0-experimental-975b64464-20220914_webpack@5.74.0:
     resolution:
       {
-        integrity: sha512-DqVpIa9DdgQNre2urGq5brXRrgtd6jqCUO4Ax5yBAHvmWW5L2XkU3jI+YCMMZdxVwcP+NIJoB9mkIsFyIo8NAQ==,
+        integrity: sha512-RU8yWstn6EpbprfOEnpCpp4fzSTgRLIjvWjJYZq2AiVrXXaAl54stVC1LlZ5Ox4hNXBc6K/FAuQqF4nopXx5Aw==,
       }
     engines: { node: '>=0.10.0' }
     peerDependencies:
-      react: 0.0.0-experimental-7028ce745-20220907
+      react: 0.0.0-experimental-975b64464-20220914
       webpack: ^5.59.0
     dependencies:
       acorn: 6.4.2