From 66da039002b7add53d839c52ded9004622e463c6 Mon Sep 17 00:00:00 2001
From: eps1lon <sebastian.silbermann@vercel.com>
Date: Thu, 16 May 2024 13:21:09 -0700
Subject: [PATCH] Update React from 4508873393 to 04b058868c

---
 package.json                                  |  14 +-
 packages/next/package.json                    |   4 +-
 .../cjs/react-dom-client.development.js       |  17 +-
 .../cjs/react-dom-client.production.js        |   8 +-
 .../cjs/react-dom-profiling.development.js    |  17 +-
 .../cjs/react-dom-profiling.profiling.js      |   8 +-
 ...t-dom-server-legacy.browser.development.js |  31 +-
 ...ct-dom-server-legacy.browser.production.js |  54 +-
 ...eact-dom-server-legacy.node.development.js |  31 +-
 ...react-dom-server-legacy.node.production.js |  60 ++-
 .../react-dom-server.browser.development.js   |  31 +-
 .../react-dom-server.browser.production.js    |  14 +-
 .../cjs/react-dom-server.bun.production.js    |  20 +-
 .../cjs/react-dom-server.edge.development.js  |  31 +-
 .../cjs/react-dom-server.edge.production.js   |  20 +-
 .../cjs/react-dom-server.node.development.js  |  31 +-
 .../cjs/react-dom-server.node.production.js   |  20 +-
 .../react-dom-unstable_testing.development.js |   7 +-
 .../react-dom-unstable_testing.production.js  |   8 +-
 .../cjs/react-dom.development.js              |  12 +-
 .../cjs/react-dom.production.js               |   2 +-
 .../react-dom-experimental/package.json       |   4 +-
 .../cjs/react.development.js                  |  12 +-
 .../cjs/react.production.js                   |   2 +-
 .../cjs/react.react-server.development.js     |   2 +-
 .../cjs/react.react-server.production.js      |   2 +-
 ...om-turbopack-client.browser.development.js | 211 +++++++-
 ...dom-turbopack-client.browser.production.js | 163 ++++--
 ...r-dom-turbopack-client.edge.development.js | 211 +++++++-
 ...er-dom-turbopack-client.edge.production.js | 163 ++++--
 ...r-dom-turbopack-client.node.development.js | 211 +++++++-
 ...er-dom-turbopack-client.node.production.js | 163 ++++--
 ...opack-client.node.unbundled.development.js | 211 +++++++-
 ...bopack-client.node.unbundled.production.js | 163 ++++--
 ...om-turbopack-server.browser.development.js | 467 ++++++++++++++---
 ...dom-turbopack-server.browser.production.js | 378 +++++++++++---
 ...r-dom-turbopack-server.edge.development.js | 477 +++++++++++++++---
 ...er-dom-turbopack-server.edge.production.js | 378 +++++++++++---
 ...r-dom-turbopack-server.node.development.js | 432 +++++++++++++---
 ...er-dom-turbopack-server.node.production.js | 408 +++++++++++----
 ...opack-server.node.unbundled.development.js | 432 +++++++++++++---
 ...bopack-server.node.unbundled.production.js | 408 +++++++++++----
 .../package.json                              |   4 +-
 ...-dom-webpack-client.browser.development.js | 211 +++++++-
 ...r-dom-webpack-client.browser.production.js | 163 ++++--
 ...ver-dom-webpack-client.edge.development.js | 211 +++++++-
 ...rver-dom-webpack-client.edge.production.js | 163 ++++--
 ...ver-dom-webpack-client.node.development.js | 211 +++++++-
 ...rver-dom-webpack-client.node.production.js | 163 ++++--
 ...bpack-client.node.unbundled.development.js | 211 +++++++-
 ...ebpack-client.node.unbundled.production.js | 163 ++++--
 ...-dom-webpack-server.browser.development.js | 467 ++++++++++++++---
 ...r-dom-webpack-server.browser.production.js | 378 +++++++++++---
 ...ver-dom-webpack-server.edge.development.js | 477 +++++++++++++++---
 ...rver-dom-webpack-server.edge.production.js | 378 +++++++++++---
 ...ver-dom-webpack-server.node.development.js | 432 +++++++++++++---
 ...rver-dom-webpack-server.node.production.js | 408 +++++++++++----
 ...bpack-server.node.unbundled.development.js | 432 +++++++++++++---
 ...ebpack-server.node.unbundled.production.js | 408 +++++++++++----
 .../package.json                              |   4 +-
 .../cjs/scheduler.development.js              |  10 +-
 .../scheduler/cjs/scheduler.development.js    |  10 +-
 pnpm-lock.yaml                                |  60 +--
 63 files changed, 8376 insertions(+), 1926 deletions(-)

diff --git a/package.json b/package.json
index 4045eb4bd4f68..b2f5809186e40 100644
--- a/package.json
+++ b/package.json
@@ -203,12 +203,12 @@
     "react-dom": "19.0.0-beta-04b058868c-20240508",
     "react-dom-17": "npm:react-dom@17.0.2",
     "react-dom-builtin": "npm:react-dom@19.0.0-beta-04b058868c-20240508",
-    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-4508873393-20240430",
-    "react-experimental-builtin": "npm:react@0.0.0-experimental-4508873393-20240430",
+    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-04b058868c-20240508",
+    "react-experimental-builtin": "npm:react@0.0.0-experimental-04b058868c-20240508",
     "react-server-dom-turbopack": "19.0.0-beta-04b058868c-20240508",
-    "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-4508873393-20240430",
+    "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-04b058868c-20240508",
     "react-server-dom-webpack": "19.0.0-beta-04b058868c-20240508",
-    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-4508873393-20240430",
+    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-04b058868c-20240508",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -218,8 +218,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.9",
-    "scheduler-builtin": "npm:scheduler@0.25.0-beta-4508873393-20240430",
-    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-4508873393-20240430",
+    "scheduler-builtin": "npm:scheduler@0.25.0-beta-04b058868c-20240508",
+    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-04b058868c-20240508",
     "seedrandom": "3.0.5",
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
@@ -256,7 +256,7 @@
     "react": "19.0.0-beta-04b058868c-20240508",
     "react-dom": "19.0.0-beta-04b058868c-20240508",
     "react-is": "19.0.0-beta-04b058868c-20240508",
-    "scheduler": "0.25.0-beta-94eed63c49-20240425"
+    "scheduler": "0.25.0-beta-04b058868c-20240508"
   },
   "engines": {
     "node": ">=18.17.0",
diff --git a/packages/next/package.json b/packages/next/package.json
index 515ebed8886e6..8884e9d5dd2e7 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -105,8 +105,8 @@
     "@opentelemetry/api": "^1.1.0",
     "@playwright/test": "^1.41.2",
     "babel-plugin-react-compiler": "*",
-    "react": "^19.0.0-0",
-    "react-dom": "^19.0.0-0",
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508",
     "sass": "^1.3.0"
   },
   "peerDependenciesMeta": {
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js
index 56ad0950abf4a..355746f3d2aed 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js
@@ -12,10 +12,7 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
@@ -23,7 +20,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var React = require("next/dist/compiled/react-experimental");
+var React = require("next/dist/compiled/react-experimental");
 var Scheduler = require("next/dist/compiled/scheduler-experimental");
 var ReactDOM = require('react-dom');
 
@@ -8784,6 +8781,11 @@ function extractEvents$1(dispatchQueue, domEventName, maybeTargetInst, nativeEve
       var temp = submitter.ownerDocument.createElement('input');
       temp.name = submitter.name;
       temp.value = submitter.value;
+
+      if (form.id) {
+        temp.setAttribute('form', form.id);
+      }
+
       submitter.parentNode.insertBefore(temp, submitter);
       formData = new FormData(form);
       temp.parentNode.removeChild(temp);
@@ -36167,7 +36169,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 // Might add PROFILE later.
 
@@ -37667,7 +37669,6 @@ var foundDevTools = injectIntoDevTools({
 exports.createRoot = createRoot;
 exports.hydrateRoot = hydrateRoot;
 exports.version = ReactVersion;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -37675,6 +37676,6 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js
index 5dd6ba6969213..1f75c262ceee2 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js
@@ -2292,6 +2292,8 @@ function extractEvents$1(
                   var temp = submitter.ownerDocument.createElement("input");
                   temp.name = submitter.name;
                   temp.value = submitter.value;
+                  nativeEventTarget.id &&
+                    temp.setAttribute("form", nativeEventTarget.id);
                   submitter.parentNode.insertBefore(temp, submitter);
                   var formData = new FormData(nativeEventTarget);
                   temp.parentNode.removeChild(temp);
@@ -14696,7 +14698,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
 var devToolsConfig$jscomp$inline_1621 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-experimental-4508873393-20240430",
+  version: "19.0.0-experimental-04b058868c-20240508",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_1999 = {
@@ -14726,7 +14728,7 @@ var internals$jscomp$inline_1999 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-experimental-4508873393-20240430"
+  reconcilerVersion: "19.0.0-experimental-04b058868c-20240508"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2000 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14832,4 +14834,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
   listenToAllSupportedEvents(container);
   return new ReactDOMHydrationRoot(initialChildren);
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js
index 50e824c12877e..d925dc50635d9 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js
@@ -12,10 +12,7 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
@@ -23,7 +20,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var React = require("next/dist/compiled/react-experimental");
+var React = require("next/dist/compiled/react-experimental");
 var Scheduler = require("next/dist/compiled/scheduler-experimental");
 var ReactDOM = require('react-dom');
 
@@ -8832,6 +8829,11 @@ function extractEvents$1(dispatchQueue, domEventName, maybeTargetInst, nativeEve
       var temp = submitter.ownerDocument.createElement('input');
       temp.name = submitter.name;
       temp.value = submitter.value;
+
+      if (form.id) {
+        temp.setAttribute('form', form.id);
+      }
+
       submitter.parentNode.insertBefore(temp, submitter);
       formData = new FormData(form);
       temp.parentNode.removeChild(temp);
@@ -36215,7 +36217,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
@@ -38121,7 +38123,6 @@ exports.unstable_batchedUpdates = batchedUpdates;
 exports.useFormState = useFormState;
 exports.useFormStatus = useFormStatus;
 exports.version = ReactVersion;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -38129,6 +38130,6 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js
index 7b251c79e2cae..d932d63cbc27a 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js
@@ -2414,6 +2414,8 @@ function extractEvents$1(
                   var temp = submitter.ownerDocument.createElement("input");
                   temp.name = submitter.name;
                   temp.value = submitter.value;
+                  nativeEventTarget.id &&
+                    temp.setAttribute("form", nativeEventTarget.id);
                   submitter.parentNode.insertBefore(temp, submitter);
                   var formData = new FormData(nativeEventTarget);
                   temp.parentNode.removeChild(temp);
@@ -15407,7 +15409,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
 var devToolsConfig$jscomp$inline_1708 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-experimental-4508873393-20240430",
+  version: "19.0.0-experimental-04b058868c-20240508",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -15450,7 +15452,7 @@ var devToolsConfig$jscomp$inline_1708 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-experimental-4508873393-20240430"
+  reconcilerVersion: "19.0.0-experimental-04b058868c-20240508"
 });
 function noop() {}
 function getCrossOriginStringAs(as, input) {
@@ -15704,7 +15706,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js
index d9189546f1663..4360146ead0d5 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js
@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
 var React = require("next/dist/compiled/react-experimental");
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
@@ -2565,11 +2565,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
-  }
-
+  validateAdditionalFormField(value);
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2582,6 +2578,21 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
+function validateAdditionalFormField(value, key) {
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+  }
+}
+
+function validateAdditionalFormFields(formData) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(validateAdditionalFormField);
+  }
+
+  return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2589,7 +2600,13 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      return formAction.$$FORM_ACTION(prefix);
+      var customFields = formAction.$$FORM_ACTION(prefix);
+
+      if (customFields) {
+        validateAdditionalFormFields(customFields.data);
+      }
+
+      return customFields;
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js
index f4db93113cadb..fcd54f42b6415 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js
@@ -436,17 +436,25 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
   this.push('<input type="hidden"');
-  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+  validateAdditionalFormField(value);
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push("/>");
 }
+function validateAdditionalFormField(value) {
+  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      return formAction.$$FORM_ACTION(resumableState);
+      var customFields = formAction.$$FORM_ACTION(resumableState);
+      if (customFields) {
+        var formData = customFields.data;
+        null != formData && formData.forEach(validateAdditionalFormField);
+      }
+      return customFields;
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -2618,16 +2626,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1686 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1688 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1700 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1701 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1702 = new Set(),
-    JSCompiler_object_inline_styles_1703 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1704 = new Set(),
-    JSCompiler_object_inline_scripts_1705 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1706 = new Set(),
-    JSCompiler_object_inline_preloads_1707 = {
+  var JSCompiler_object_inline_preconnects_1702 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1703 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1704 = new Set(),
+    JSCompiler_object_inline_styles_1705 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1706 = new Set(),
+    JSCompiler_object_inline_scripts_1707 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1708 = new Set(),
+    JSCompiler_object_inline_preloads_1709 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2664,7 +2672,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1704.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1706.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2705,7 +2713,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1704.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1706.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2720,7 +2728,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1686,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1688,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2740,14 +2748,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     charsetChunks: [],
     viewportChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1700,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1701,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1702,
-    styles: JSCompiler_object_inline_styles_1703,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1704,
-    scripts: JSCompiler_object_inline_scripts_1705,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1706,
-    preloads: JSCompiler_object_inline_preloads_1707,
+    preconnects: JSCompiler_object_inline_preconnects_1702,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1703,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1704,
+    styles: JSCompiler_object_inline_styles_1705,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1706,
+    scripts: JSCompiler_object_inline_scripts_1707,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1708,
+    preloads: JSCompiler_object_inline_preloads_1709,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
   };
@@ -5855,4 +5863,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js
index e9b5d5c2eba7b..9c4056075e762 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js
@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
 var React = require("next/dist/compiled/react-experimental");
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
@@ -2565,11 +2565,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
-  }
-
+  validateAdditionalFormField(value);
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2582,6 +2578,21 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
+function validateAdditionalFormField(value, key) {
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+  }
+}
+
+function validateAdditionalFormFields(formData) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(validateAdditionalFormField);
+  }
+
+  return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2589,7 +2600,13 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      return formAction.$$FORM_ACTION(prefix);
+      var customFields = formAction.$$FORM_ACTION(prefix);
+
+      if (customFields) {
+        validateAdditionalFormFields(customFields.data);
+      }
+
+      return customFields;
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js
index a08cb50111e98..3de011aac8137 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js
@@ -424,20 +424,28 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
   this.push('<input type="hidden"');
-  if ("string" !== typeof value)
-    throw Error(
-      "File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action."
-    );
+  validateAdditionalFormField(value);
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push("/>");
 }
+function validateAdditionalFormField(value) {
+  if ("string" !== typeof value)
+    throw Error(
+      "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration."
+    );
+}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      return formAction.$$FORM_ACTION(resumableState);
+      var customFields = formAction.$$FORM_ACTION(resumableState);
+      if (customFields) {
+        var formData = customFields.data;
+        null != formData && formData.forEach(validateAdditionalFormField);
+      }
+      return customFields;
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -2639,16 +2647,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1686 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1688 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1700 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1701 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1702 = new Set(),
-    JSCompiler_object_inline_styles_1703 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1704 = new Set(),
-    JSCompiler_object_inline_scripts_1705 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1706 = new Set(),
-    JSCompiler_object_inline_preloads_1707 = {
+  var JSCompiler_object_inline_preconnects_1702 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1703 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1704 = new Set(),
+    JSCompiler_object_inline_styles_1705 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1706 = new Set(),
+    JSCompiler_object_inline_scripts_1707 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1708 = new Set(),
+    JSCompiler_object_inline_preloads_1709 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2685,7 +2693,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1704.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1706.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2726,7 +2734,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1704.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1706.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2741,7 +2749,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1686,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1688,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2761,14 +2769,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     charsetChunks: [],
     viewportChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1700,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1701,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1702,
-    styles: JSCompiler_object_inline_styles_1703,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1704,
-    scripts: JSCompiler_object_inline_scripts_1705,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1706,
-    preloads: JSCompiler_object_inline_preloads_1707,
+    preconnects: JSCompiler_object_inline_preconnects_1702,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1703,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1704,
+    styles: JSCompiler_object_inline_styles_1705,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1706,
+    scripts: JSCompiler_object_inline_scripts_1707,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1708,
+    preloads: JSCompiler_object_inline_preloads_1709,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
   };
@@ -5951,4 +5959,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server'
   );
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js
index 2e9a25e62e9ce..443ef01f10227 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js
@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
 var React = require("next/dist/compiled/react-experimental");
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
@@ -2666,11 +2666,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
-  }
-
+  validateAdditionalFormField(value);
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2683,6 +2679,21 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
+function validateAdditionalFormField(value, key) {
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+  }
+}
+
+function validateAdditionalFormFields(formData) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(validateAdditionalFormField);
+  }
+
+  return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2690,7 +2701,13 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      return formAction.$$FORM_ACTION(prefix);
+      var customFields = formAction.$$FORM_ACTION(prefix);
+
+      if (customFields) {
+        validateAdditionalFormFields(customFields.data);
+      }
+
+      return customFields;
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js
index cdce1c4eca64f..3f4ff704319cb 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js
@@ -759,17 +759,25 @@ var actionJavaScriptURL = stringToPrecomputedChunk(
   startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   this.push(startHiddenInputChunk);
-  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+  validateAdditionalFormField(value);
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push(endOfStartTagSelfClosing);
 }
+function validateAdditionalFormField(value) {
+  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      return formAction.$$FORM_ACTION(resumableState);
+      var customFields = formAction.$$FORM_ACTION(resumableState);
+      if (customFields) {
+        var formData = customFields.data;
+        null != formData && formData.forEach(validateAdditionalFormField);
+      }
+      return customFields;
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -6534,4 +6542,4 @@ exports.resume = function (children, postponedState, options) {
     startWork(request);
   });
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js
index 0a536cfdf541a..89025a66473ec 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js
@@ -572,20 +572,28 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
   this.push('<input type="hidden"');
-  if ("string" !== typeof value)
-    throw Error(
-      "File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action."
-    );
+  validateAdditionalFormField(value);
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push("/>");
 }
+function validateAdditionalFormField(value) {
+  if ("string" !== typeof value)
+    throw Error(
+      "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration."
+    );
+}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      return formAction.$$FORM_ACTION(resumableState);
+      var customFields = formAction.$$FORM_ACTION(resumableState);
+      if (customFields) {
+        var formData = customFields.data;
+        null != formData && formData.forEach(validateAdditionalFormField);
+      }
+      return customFields;
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -5943,4 +5951,4 @@ exports.renderToReadableStream = function (children, options) {
       safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks);
   });
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js
index 6146731c3ffbd..5529ec6fe3f2c 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js
@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
 var React = require("next/dist/compiled/react-experimental");
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
@@ -2666,11 +2666,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
-  }
-
+  validateAdditionalFormField(value);
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2683,6 +2679,21 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
+function validateAdditionalFormField(value, key) {
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+  }
+}
+
+function validateAdditionalFormFields(formData) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(validateAdditionalFormField);
+  }
+
+  return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2690,7 +2701,13 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      return formAction.$$FORM_ACTION(prefix);
+      var customFields = formAction.$$FORM_ACTION(prefix);
+
+      if (customFields) {
+        validateAdditionalFormFields(customFields.data);
+      }
+
+      return customFields;
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js
index 3788541e1ddaa..9db101eb52f8b 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js
@@ -747,20 +747,28 @@ var actionJavaScriptURL = stringToPrecomputedChunk(
   startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   this.push(startHiddenInputChunk);
-  if ("string" !== typeof value)
-    throw Error(
-      "File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action."
-    );
+  validateAdditionalFormField(value);
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push(endOfStartTagSelfClosing);
 }
+function validateAdditionalFormField(value) {
+  if ("string" !== typeof value)
+    throw Error(
+      "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration."
+    );
+}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      return formAction.$$FORM_ACTION(resumableState);
+      var customFields = formAction.$$FORM_ACTION(resumableState);
+      if (customFields) {
+        var formData = customFields.data;
+        null != formData && formData.forEach(validateAdditionalFormField);
+      }
+      return customFields;
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -6657,4 +6665,4 @@ exports.resume = function (children, postponedState, options) {
     startWork(request);
   });
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js
index af3d1c5f929a9..7c38a078204df 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js
@@ -21,7 +21,7 @@ var async_hooks = require('async_hooks');
 var ReactDOM = require('react-dom');
 var stream = require('stream');
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
@@ -2647,11 +2647,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
-  }
-
+  validateAdditionalFormField(value);
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2664,6 +2660,21 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
+function validateAdditionalFormField(value, key) {
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+  }
+}
+
+function validateAdditionalFormFields(formData) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(validateAdditionalFormField);
+  }
+
+  return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2671,7 +2682,13 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      return formAction.$$FORM_ACTION(prefix);
+      var customFields = formAction.$$FORM_ACTION(prefix);
+
+      if (customFields) {
+        validateAdditionalFormFields(customFields.data);
+      }
+
+      return customFields;
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js
index e7fbcfa09fd18..33bffc63d4328 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js
@@ -693,20 +693,28 @@ var actionJavaScriptURL = stringToPrecomputedChunk(
   startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   this.push(startHiddenInputChunk);
-  if ("string" !== typeof value)
-    throw Error(
-      "File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action."
-    );
+  validateAdditionalFormField(value);
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push(endOfStartTagSelfClosing);
 }
+function validateAdditionalFormField(value) {
+  if ("string" !== typeof value)
+    throw Error(
+      "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration."
+    );
+}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      return formAction.$$FORM_ACTION(resumableState);
+      var customFields = formAction.$$FORM_ACTION(resumableState);
+      if (customFields) {
+        var formData = customFields.data;
+        null != formData && formData.forEach(validateAdditionalFormField);
+      }
+      return customFields;
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -6529,4 +6537,4 @@ exports.resumeToPipeableStream = function (children, postponedState, options) {
     }
   };
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js
index e22ccbb958292..c7214007ecdd6 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js
@@ -8922,6 +8922,11 @@ function extractEvents$1(dispatchQueue, domEventName, maybeTargetInst, nativeEve
       var temp = submitter.ownerDocument.createElement('input');
       temp.name = submitter.name;
       temp.value = submitter.value;
+
+      if (form.id) {
+        temp.setAttribute('form', form.id);
+      }
+
       submitter.parentNode.insertBefore(temp, submitter);
       formData = new FormData(form);
       temp.parentNode.removeChild(temp);
@@ -36865,7 +36870,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 // Might add PROFILE later.
 
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js
index 656c55be9cc9c..21f0f7258a0b7 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js
@@ -2428,6 +2428,8 @@ function extractEvents$1(
                   var temp = submitter.ownerDocument.createElement("input");
                   temp.name = submitter.name;
                   temp.value = submitter.value;
+                  nativeEventTarget.id &&
+                    temp.setAttribute("form", nativeEventTarget.id);
                   submitter.parentNode.insertBefore(temp, submitter);
                   var formData = new FormData(nativeEventTarget);
                   temp.parentNode.removeChild(temp);
@@ -15075,7 +15077,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
 var devToolsConfig$jscomp$inline_1650 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-experimental-4508873393-20240430",
+  version: "19.0.0-experimental-04b058868c-20240508",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2033 = {
@@ -15105,7 +15107,7 @@ var internals$jscomp$inline_2033 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-experimental-4508873393-20240430"
+  reconcilerVersion: "19.0.0-experimental-04b058868c-20240508"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2034 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15362,4 +15364,4 @@ exports.observeVisibleRects = function (
     }
   };
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js
index a86f9eec3976a..67c2038947978 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js
@@ -12,10 +12,7 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
@@ -23,7 +20,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var React = require("next/dist/compiled/react-experimental");
+var React = require("next/dist/compiled/react-experimental");
 
 var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
@@ -129,7 +126,7 @@ var Internals = {
   findDOMNode: null
 };
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 /**
  * HTML nodeType values that represent the type of the node
@@ -613,7 +610,6 @@ exports.unstable_batchedUpdates = batchedUpdates;
 exports.useFormState = useFormState;
 exports.useFormStatus = useFormStatus;
 exports.version = ReactVersion;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -621,6 +617,6 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }
diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js
index d7a1d5b035a40..9bfa63407800f 100644
--- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js
+++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js
@@ -206,4 +206,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom-experimental/package.json b/packages/next/src/compiled/react-dom-experimental/package.json
index 7579d0ecba54c..640217546e560 100644
--- a/packages/next/src/compiled/react-dom-experimental/package.json
+++ b/packages/next/src/compiled/react-dom-experimental/package.json
@@ -72,10 +72,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "scheduler": "0.0.0-experimental-4508873393-20240430"
+    "scheduler": "0.0.0-experimental-04b058868c-20240508"
   },
   "peerDependencies": {
-    "react": "0.0.0-experimental-4508873393-20240430"
+    "react": "0.0.0-experimental-04b058868c-20240508"
   },
   "browser": {
     "./server.js": "./server.browser.js",
diff --git a/packages/next/src/compiled/react-experimental/cjs/react.development.js b/packages/next/src/compiled/react-experimental/cjs/react.development.js
index ee484de1dba8b..c579d2d386b6a 100644
--- a/packages/next/src/compiled/react-experimental/cjs/react.development.js
+++ b/packages/next/src/compiled/react-experimental/cjs/react.development.js
@@ -12,10 +12,7 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
@@ -23,7 +20,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var ReactSharedInternals = {
+var ReactSharedInternals = {
   H: null,
   A: null,
   T: null
@@ -114,7 +111,7 @@ function printWarning(level, format, args) {
   }
 }
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 // -----------------------------------------------------------------------------
 
@@ -2844,7 +2841,6 @@ exports.useState = useState;
 exports.useSyncExternalStore = useSyncExternalStore;
 exports.useTransition = useTransition;
 exports.version = ReactVersion;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -2852,6 +2848,6 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }
diff --git a/packages/next/src/compiled/react-experimental/cjs/react.production.js b/packages/next/src/compiled/react-experimental/cjs/react.production.js
index b74ee1d621b73..748e81c7ee498 100644
--- a/packages/next/src/compiled/react-experimental/cjs/react.production.js
+++ b/packages/next/src/compiled/react-experimental/cjs/react.production.js
@@ -559,4 +559,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js b/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js
index 4eaba047ad997..4439439b3ce5c 100644
--- a/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js
+++ b/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js
@@ -2195,7 +2195,7 @@ function postpone(reason) {
   throw postponeInstance;
 }
 
-var ReactVersion = '19.0.0-experimental-4508873393-20240430';
+var ReactVersion = '19.0.0-experimental-04b058868c-20240508';
 
 var getPrototypeOf = Object.getPrototypeOf;
 
diff --git a/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js b/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js
index b9ab83fff39a4..6df04394259dc 100644
--- a/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js
+++ b/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js
@@ -564,4 +564,4 @@ exports.useId = function () {
 exports.useMemo = function (create, deps) {
   return ReactSharedInternals.H.useMemo(create, deps);
 };
-exports.version = "19.0.0-experimental-4508873393-20240430";
+exports.version = "19.0.0-experimental-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js
index 1267cee2ce341..e81b1c52f93ec 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js
@@ -893,7 +893,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -904,6 +906,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -973,12 +1123,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1019,12 +1169,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1034,11 +1184,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1069,32 +1217,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1163,9 +1319,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1176,18 +1333,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.production.js
index a3c436af28364..dc27b1a89aa02 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.production.js
@@ -114,12 +114,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -151,20 +242,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -176,32 +267,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -221,7 +307,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -258,6 +351,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -782,8 +883,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -791,10 +892,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -922,8 +1023,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js
index 108ef42c58e72..1debf26a486d6 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js
@@ -931,7 +931,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -942,6 +944,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -1011,12 +1161,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1057,12 +1207,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1072,11 +1222,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1107,32 +1255,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1201,9 +1357,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1214,18 +1371,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.production.js
index 5e66b25ec0c01..4447aef4addd3 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.production.js
@@ -135,12 +135,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -172,20 +263,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -197,32 +288,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -242,7 +328,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -279,6 +372,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -950,8 +1051,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -959,10 +1060,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -1090,8 +1191,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js
index b29790567ae40..8b92a7945383d 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js
@@ -929,7 +929,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -940,6 +942,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -1009,12 +1159,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1055,12 +1205,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1070,11 +1220,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1105,32 +1253,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1199,9 +1355,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1212,18 +1369,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.production.js
index 3e9564b385d33..44a7f8f18afe3 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.production.js
@@ -136,12 +136,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -173,20 +264,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -198,32 +289,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -243,7 +329,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -280,6 +373,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -979,8 +1080,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -988,10 +1089,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -1119,8 +1220,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js
index 16252dd0612f6..074cd331241ef 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js
@@ -884,7 +884,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -895,6 +897,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -964,12 +1114,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1010,12 +1160,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1025,11 +1175,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1060,32 +1208,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1154,9 +1310,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1167,18 +1324,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.production.js
index 0fd4cfcab524a..882cb299b394c 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.production.js
@@ -120,12 +120,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -157,20 +248,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -182,32 +273,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -227,7 +313,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -264,6 +357,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -959,8 +1060,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -968,10 +1069,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -1099,8 +1200,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js
index 6836fcfc556d0..b1e6776d2245a 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js
@@ -770,6 +770,8 @@ function createHints() {
 
 var supportsRequestStorage = false;
 var requestStorage = null;
+var supportsComponentStorage = false;
+var componentStorage = null;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
@@ -1117,6 +1119,16 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1141,16 +1153,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1533,7 +1538,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2025,8 +2030,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2054,18 +2062,14 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) ; else {
+        result = Component(props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2267,9 +2271,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2413,7 +2416,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2825,7 +2828,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -2938,7 +2941,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4315,7 +4318,6 @@ function loadChunk(filename) {
   return __turbopack_load__(filename);
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4391,9 +4393,38 @@ function wakeChunk(listeners, 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 && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4412,6 +4443,60 @@ function createResolvedModelChunk(response, value) {
   return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
+function resolveModelChunk(chunk, value) {
+  if (chunk.status !== PENDING) {
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
+    return;
+  }
+
+  var resolveListeners = chunk.value;
+  var rejectListeners = chunk.reason;
+  var resolvedChunk = chunk;
+  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 createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4440,7 +4525,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4517,21 +4602,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4557,19 +4651,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
+
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
 
-  return chunk.value;
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4583,13 +4704,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4604,9 +4920,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4615,7 +4930,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4630,8 +4945,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4639,9 +4953,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4649,9 +4961,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4659,10 +4969,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4670,9 +4980,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4772,32 +5080,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js
index 2e50612c29054..8f0398e0c150f 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js
@@ -824,8 +824,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -900,8 +900,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1005,11 +1005,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1535,10 +1535,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1549,7 +1549,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1838,7 +1838,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1847,14 +1847,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -1956,17 +1956,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -1976,20 +2021,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2030,17 +2082,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2055,11 +2112,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2070,20 +2154,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2094,7 +2340,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2108,29 +2354,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2178,28 +2422,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js
index a1b550b0f66de..e82cf6a632148 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js
@@ -789,7 +789,9 @@ function initAsyncDebugInfo() {
 }
 
 var supportsRequestStorage = typeof AsyncLocalStorage === 'function';
-var requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null; // We use the Node version but get access to async_hooks from a global.
+var requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null;
+var supportsComponentStorage = supportsRequestStorage;
+var componentStorage = supportsComponentStorage ? new AsyncLocalStorage() : null; // We use the Node version but get access to async_hooks from a global.
 
 var createAsyncHook = typeof async_hooks === 'object' ? async_hooks.createHook : function () {
   return {
@@ -1145,6 +1147,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  if (supportsComponentStorage) {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1169,16 +1186,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1562,7 +1572,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2059,8 +2069,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2088,18 +2101,17 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
-
-  var secondArg = undefined;
-  var result;
 
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) {
+        // Run the component in an Async Context that tracks the current owner.
+        result = componentStorage.run(componentDebugInfo, Component, props, secondArg);
+      } else {
+        result = Component(props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2301,9 +2313,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2447,7 +2458,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2859,7 +2870,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -2972,7 +2983,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4359,7 +4370,6 @@ function loadChunk(filename) {
   return globalThis.__next_chunk_load__(filename);
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4435,9 +4445,38 @@ function wakeChunk(listeners, 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 && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4456,6 +4495,60 @@ function createResolvedModelChunk(response, value) {
   return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
+function resolveModelChunk(chunk, value) {
+  if (chunk.status !== PENDING) {
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
+    return;
+  }
+
+  var resolveListeners = chunk.value;
+  var rejectListeners = chunk.reason;
+  var resolvedChunk = chunk;
+  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 createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4484,7 +4577,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4561,21 +4654,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4601,19 +4703,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
+
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
+
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
+
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
 
-  return chunk.value;
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4627,13 +4756,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4648,9 +4972,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4659,7 +4982,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4674,8 +4997,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4683,9 +5005,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4693,9 +5013,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4703,10 +5021,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4714,9 +5032,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4816,32 +5132,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js
index d58b16b32aad1..780ded0ae5e1d 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js
@@ -839,8 +839,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -915,8 +915,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1020,11 +1020,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1552,10 +1552,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1566,7 +1566,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1871,7 +1871,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1880,14 +1880,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -1989,17 +1989,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -2009,20 +2054,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2063,17 +2115,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2088,11 +2145,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2103,20 +2187,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2127,7 +2373,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2141,29 +2387,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2211,28 +2455,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js
index 9a2c2c0e922a4..4d6c59db5ccb3 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js
@@ -851,6 +851,8 @@ function initAsyncDebugInfo() {
 
 var supportsRequestStorage = true;
 var requestStorage = new async_hooks.AsyncLocalStorage();
+var supportsComponentStorage = true;
+var componentStorage = new async_hooks.AsyncLocalStorage() ;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
@@ -1198,6 +1200,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1222,16 +1239,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1615,7 +1625,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2112,8 +2122,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2141,18 +2154,15 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) {
+        // Run the component in an Async Context that tracks the current owner.
+        result = componentStorage.run(componentDebugInfo, Component, props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2354,9 +2364,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2500,7 +2509,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2912,7 +2921,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -3025,7 +3034,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4406,7 +4415,6 @@ function loadChunk(filename) {
   return globalThis.__next_chunk_load__(filename);
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4505,7 +4513,15 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
 function triggerErrorOnChunk(chunk, error) {
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4526,7 +4542,19 @@ function createResolvedModelChunk(response, value) {
 
 function resolveModelChunk(chunk, value) {
   if (chunk.status !== PENDING) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
     return;
   }
 
@@ -4546,6 +4574,26 @@ function resolveModelChunk(chunk, value) {
   }
 }
 
+function createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4574,7 +4622,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4651,21 +4699,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4691,19 +4748,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
+
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
+
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
 
-  return chunk.value;
+function createSet(response, model) {
+  return new Set(model);
+}
+
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4717,13 +4801,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4738,9 +5017,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4749,7 +5027,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4764,8 +5042,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4773,9 +5050,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4783,9 +5058,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4793,10 +5066,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4804,9 +5077,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4906,32 +5177,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js
index ebf00e2d4cf19..14bc445a58dce 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js
@@ -866,8 +866,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -942,8 +942,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1046,11 +1046,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1576,10 +1576,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1590,7 +1590,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1915,7 +1915,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1924,14 +1924,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -2033,17 +2033,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -2053,20 +2098,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2107,17 +2159,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2132,11 +2189,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2147,20 +2231,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2171,7 +2417,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2185,29 +2431,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2255,28 +2499,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
@@ -2302,30 +2536,10 @@ function createResponse(bundlerConfig, formFieldPrefix) {
 function resolveField(response, key, value) {
   response._formData.append(key, value);
   var prefix = response._prefix;
-  if (
-    key.startsWith(prefix) &&
+  key.startsWith(prefix) &&
     ((response = response._chunks),
     (key = +key.slice(prefix.length)),
-    (key = response.get(key)) &&
-      "pending" === key.status &&
-      ((prefix = key.value),
-      (response = key.reason),
-      (key.status = "resolved_model"),
-      (key.value = value),
-      null !== prefix))
-  )
-    switch ((initializeModelChunk(key), key.status)) {
-      case "fulfilled":
-        wakeChunk(prefix, key.value);
-        break;
-      case "pending":
-      case "blocked":
-        key.value = prefix;
-        key.reason = response;
-        break;
-      case "rejected":
-        response && wakeChunk(response, key.reason);
-    }
+    (key = response.get(key)) && resolveModelChunk(key, value));
 }
 function close(response) {
   reportGlobalError(response, Error("Connection closed."));
@@ -2410,12 +2624,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, turbopackMap) {
         "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it."
       );
     pendingFiles++;
-    var JSCompiler_object_inline_chunks_207 = [];
+    var JSCompiler_object_inline_chunks_203 = [];
     value.on("data", function (chunk) {
-      JSCompiler_object_inline_chunks_207.push(chunk);
+      JSCompiler_object_inline_chunks_203.push(chunk);
     });
     value.on("end", function () {
-      var blob = new Blob(JSCompiler_object_inline_chunks_207, {
+      var blob = new Blob(JSCompiler_object_inline_chunks_203, {
         type: mimeType
       });
       response._formData.append(name, blob, filename);
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js
index d9c17ceeb9366..610ab779cf22d 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js
@@ -851,6 +851,8 @@ function initAsyncDebugInfo() {
 
 var supportsRequestStorage = true;
 var requestStorage = new async_hooks.AsyncLocalStorage();
+var supportsComponentStorage = true;
+var componentStorage = new async_hooks.AsyncLocalStorage() ;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
@@ -1198,6 +1200,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1222,16 +1239,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1615,7 +1625,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2112,8 +2122,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2141,18 +2154,15 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) {
+        // Run the component in an Async Context that tracks the current owner.
+        result = componentStorage.run(componentDebugInfo, Component, props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2354,9 +2364,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2500,7 +2509,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2912,7 +2921,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -3025,7 +3034,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4335,7 +4344,6 @@ function requireModule(metadata) {
   return moduleExports[metadata.name];
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4434,7 +4442,15 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
 function triggerErrorOnChunk(chunk, error) {
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4455,7 +4471,19 @@ function createResolvedModelChunk(response, value) {
 
 function resolveModelChunk(chunk, value) {
   if (chunk.status !== PENDING) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
     return;
   }
 
@@ -4475,6 +4503,26 @@ function resolveModelChunk(chunk, value) {
   }
 }
 
+function createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4503,7 +4551,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4580,21 +4628,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4620,19 +4677,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
+
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
 
-  return chunk.value;
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4646,13 +4730,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4667,9 +4946,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4678,7 +4956,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4693,8 +4971,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4702,9 +4979,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4712,9 +4987,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4722,10 +4995,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4733,9 +5006,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4835,32 +5106,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js
index 3a2230ccd39c9..7cdc10e823ce9 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js
@@ -866,8 +866,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -942,8 +942,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1046,11 +1046,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1576,10 +1576,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1590,7 +1590,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1915,7 +1915,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1924,14 +1924,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -2002,17 +2002,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -2022,20 +2067,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2076,17 +2128,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2101,11 +2158,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2116,20 +2200,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2140,7 +2386,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2154,29 +2400,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2224,28 +2468,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
@@ -2271,30 +2505,10 @@ function createResponse(bundlerConfig, formFieldPrefix) {
 function resolveField(response, key, value) {
   response._formData.append(key, value);
   var prefix = response._prefix;
-  if (
-    key.startsWith(prefix) &&
+  key.startsWith(prefix) &&
     ((response = response._chunks),
     (key = +key.slice(prefix.length)),
-    (key = response.get(key)) &&
-      "pending" === key.status &&
-      ((prefix = key.value),
-      (response = key.reason),
-      (key.status = "resolved_model"),
-      (key.value = value),
-      null !== prefix))
-  )
-    switch ((initializeModelChunk(key), key.status)) {
-      case "fulfilled":
-        wakeChunk(prefix, key.value);
-        break;
-      case "pending":
-      case "blocked":
-        key.value = prefix;
-        key.reason = response;
-        break;
-      case "rejected":
-        response && wakeChunk(response, key.reason);
-    }
+    (key = response.get(key)) && resolveModelChunk(key, value));
 }
 function close(response) {
   reportGlobalError(response, Error("Connection closed."));
@@ -2379,12 +2593,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, turbopackMap) {
         "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it."
       );
     pendingFiles++;
-    var JSCompiler_object_inline_chunks_207 = [];
+    var JSCompiler_object_inline_chunks_203 = [];
     value.on("data", function (chunk) {
-      JSCompiler_object_inline_chunks_207.push(chunk);
+      JSCompiler_object_inline_chunks_203.push(chunk);
     });
     value.on("end", function () {
-      var blob = new Blob(JSCompiler_object_inline_chunks_207, {
+      var blob = new Blob(JSCompiler_object_inline_chunks_203, {
         type: mimeType
       });
       response._formData.append(name, blob, filename);
diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json b/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json
index bf1d1d7d7dd5c..a2847c5a9efcb 100644
--- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json
+++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json
@@ -47,7 +47,7 @@
     "neo-async": "^2.6.1"
   },
   "peerDependencies": {
-    "react": "0.0.0-experimental-4508873393-20240430",
-    "react-dom": "0.0.0-experimental-4508873393-20240430"
+    "react": "0.0.0-experimental-04b058868c-20240508",
+    "react-dom": "0.0.0-experimental-04b058868c-20240508"
   }
 }
\ No newline at end of file
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js
index 51b308ce55e39..7eafce41703bb 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js
@@ -914,7 +914,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -925,6 +927,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -994,12 +1144,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1040,12 +1190,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1055,11 +1205,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1090,32 +1238,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1184,9 +1340,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1197,18 +1354,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.production.js
index 3289f2a64400c..0b06efc05e2e4 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.production.js
@@ -124,12 +124,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -161,20 +252,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -186,32 +277,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -231,7 +317,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -268,6 +361,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -792,8 +893,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -801,10 +902,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -932,8 +1033,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js
index b97328d713465..5ea4d610bdfcd 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js
@@ -933,7 +933,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -944,6 +946,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -1013,12 +1163,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1059,12 +1209,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1074,11 +1224,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1109,32 +1257,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1203,9 +1359,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1216,18 +1373,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.production.js
index 1c4c86ccb7ea5..8c6f8b9c36ab5 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.production.js
@@ -136,12 +136,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -173,20 +264,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -198,32 +289,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -243,7 +329,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -280,6 +373,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -951,8 +1052,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -960,10 +1061,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -1091,8 +1192,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js
index a1d331c38bed0..22e7dc386bd6b 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js
@@ -931,7 +931,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -942,6 +944,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -1011,12 +1161,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1057,12 +1207,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1072,11 +1222,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1107,32 +1255,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1201,9 +1357,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1214,18 +1371,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.production.js
index d05d6980e8a42..63bd5c902bacf 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.production.js
@@ -137,12 +137,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -174,20 +265,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -199,32 +290,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -244,7 +330,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -281,6 +374,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -980,8 +1081,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -989,10 +1090,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -1120,8 +1221,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js
index 81dd2ca3d7378..61d2529b65bf2 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js
@@ -884,7 +884,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var formData = null;
 
   function serializeTypedArray(tag, typedArray) {
-    var blob = new Blob([typedArray]);
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
     var blobId = nextPartId++;
 
     if (formData === null) {
@@ -895,6 +897,154 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     return '$' + tag + blobId.toString(16);
   }
 
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
 
@@ -964,12 +1114,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1010,12 +1160,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1025,11 +1175,9 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
@@ -1060,32 +1208,40 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var _partJSON5 = JSON.stringify(Array.from(value), resolveToJSON);
 
         if (formData === null) {
           formData = new FormData();
         }
 
         var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
       {
         if (value instanceof ArrayBuffer) {
-          return serializeTypedArray('A', value);
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
         }
 
         if (value instanceof Int8Array) {
@@ -1154,9 +1310,10 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
             formData = new FormData();
           }
 
-          var blobId = nextPartId++;
-          formData.append(formFieldPrefix + blobId, value);
-          return serializeBlobID(blobId);
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
         }
       }
 
@@ -1167,18 +1324,32 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var _partJSON6 = JSON.stringify(Array.from(iterator), resolveToJSON);
 
           if (formData === null) {
             formData = new FormData();
           }
 
           var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.production.js
index 78be1055f2321..910c569b2fc40 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.production.js
@@ -120,12 +120,103 @@ function processReply(
   reject
 ) {
   function serializeTypedArray(tag, typedArray) {
-    typedArray = new Blob([typedArray]);
+    typedArray = new Blob([
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength
+      )
+    ]);
     var blobId = nextPartId++;
     null === formData && (formData = new FormData());
     formData.append(formFieldPrefix + blobId, typedArray);
     return "$" + tag + blobId.toString(16);
   }
+  function serializeBinaryReader(reader) {
+    function progress(entry) {
+      entry.done
+        ? ((entry = nextPartId++),
+          data.append(formFieldPrefix + entry, new Blob(buffer)),
+          data.append(
+            formFieldPrefix + streamId,
+            '"$o' + entry.toString(16) + '"'
+          ),
+          data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data))
+        : (buffer.push(entry.value),
+          reader.read(new Uint8Array(1024)).then(progress, reject));
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++,
+      buffer = [];
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return "$r" + streamId.toString(16);
+  }
+  function serializeReader(reader) {
+    function progress(entry) {
+      if (entry.done)
+        data.append(formFieldPrefix + streamId, "C"),
+          pendingParts--,
+          0 === pendingParts && resolve(data);
+      else
+        try {
+          var partJSON = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    reader.read().then(progress, reject);
+    return "$R" + streamId.toString(16);
+  }
+  function serializeReadableStream(stream) {
+    try {
+      var binaryReader = stream.getReader({ mode: "byob" });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+  function serializeAsyncIterable(iterable, iterator) {
+    function progress(entry) {
+      if (entry.done) {
+        if (void 0 === entry.value)
+          data.append(formFieldPrefix + streamId, "C");
+        else
+          try {
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, "C" + partJSON);
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        pendingParts--;
+        0 === pendingParts && resolve(data);
+      } else
+        try {
+          var partJSON$22 = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON$22);
+          iterator.next().then(progress, reject);
+        } catch (x$23) {
+          reject(x$23);
+        }
+    }
+    null === formData && (formData = new FormData());
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    iterable = iterable === iterator;
+    iterator.next().then(progress, reject);
+    return "$" + (iterable ? "x" : "X") + streamId.toString(16);
+  }
   function resolveToJSON(key, value) {
     if (null === value) return null;
     if ("object" === typeof value) {
@@ -157,20 +248,20 @@ function processReply(
               "function" === typeof x.then
             ) {
               pendingParts++;
-              var lazyId$22 = nextPartId++;
+              var lazyId$24 = nextPartId++;
               resolvedModel = function () {
                 try {
-                  var partJSON$23 = JSON.stringify(value, resolveToJSON),
-                    data$24 = formData;
-                  data$24.append(formFieldPrefix + lazyId$22, partJSON$23);
+                  var partJSON$25 = JSON.stringify(value, resolveToJSON),
+                    data$26 = formData;
+                  data$26.append(formFieldPrefix + lazyId$24, partJSON$25);
                   pendingParts--;
-                  0 === pendingParts && resolve(data$24);
+                  0 === pendingParts && resolve(data$26);
                 } catch (reason) {
                   reject(reason);
                 }
               };
               x.then(resolvedModel, resolvedModel);
-              return "$" + lazyId$22.toString(16);
+              return "$" + lazyId$24.toString(16);
             }
             reject(x);
             return null;
@@ -182,32 +273,27 @@ function processReply(
         null === formData && (formData = new FormData());
         pendingParts++;
         var promiseId = nextPartId++;
-        value.then(
-          function (partValue) {
-            try {
-              var partJSON$26 = JSON.stringify(partValue, resolveToJSON);
-              partValue = formData;
-              partValue.append(formFieldPrefix + promiseId, partJSON$26);
-              pendingParts--;
-              0 === pendingParts && resolve(partValue);
-            } catch (reason) {
-              reject(reason);
-            }
-          },
-          function (reason) {
+        value.then(function (partValue) {
+          try {
+            var partJSON$28 = JSON.stringify(partValue, resolveToJSON);
+            partValue = formData;
+            partValue.append(formFieldPrefix + promiseId, partJSON$28);
+            pendingParts--;
+            0 === pendingParts && resolve(partValue);
+          } catch (reason) {
             reject(reason);
           }
-        );
+        }, reject);
         return "$@" + promiseId.toString(16);
       }
       if (isArrayImpl(value)) return value;
       if (value instanceof FormData) {
         null === formData && (formData = new FormData());
-        var data$28 = formData;
+        var data$30 = formData;
         resolvedModel = nextPartId++;
         var prefix = formFieldPrefix + resolvedModel + "_";
         value.forEach(function (originalValue, originalKey) {
-          data$28.append(prefix + originalKey, originalValue);
+          data$30.append(prefix + originalKey, originalValue);
         });
         return "$K" + resolvedModel.toString(16);
       }
@@ -227,7 +313,14 @@ function processReply(
           formData.append(formFieldPrefix + lazyId, resolvedModel),
           "$W" + lazyId.toString(16)
         );
-      if (value instanceof ArrayBuffer) return serializeTypedArray("A", value);
+      if (value instanceof ArrayBuffer)
+        return (
+          (resolvedModel = new Blob([value])),
+          (lazyId = nextPartId++),
+          null === formData && (formData = new FormData()),
+          formData.append(formFieldPrefix + lazyId, resolvedModel),
+          "$A" + lazyId.toString(16)
+        );
       if (value instanceof Int8Array) return serializeTypedArray("O", value);
       if (value instanceof Uint8Array) return serializeTypedArray("o", value);
       if (value instanceof Uint8ClampedArray)
@@ -264,6 +357,14 @@ function processReply(
               "$i" + lazyId.toString(16))
             : Array.from(resolvedModel)
         );
+      if (
+        "function" === typeof ReadableStream &&
+        value instanceof ReadableStream
+      )
+        return serializeReadableStream(value);
+      resolvedModel = value[ASYNC_ITERATOR];
+      if ("function" === typeof resolvedModel)
+        return serializeAsyncIterable(value, resolvedModel.call(value));
       resolvedModel = getPrototypeOf(value);
       if (
         resolvedModel !== ObjectPrototype &&
@@ -959,8 +1060,8 @@ function startReadableStream(response, id, type) {
             (previousBlockedChunk = chunk));
       } else {
         chunk = previousBlockedChunk;
-        var chunk$43 = createPendingChunk(response);
-        chunk$43.then(
+        var chunk$46 = createPendingChunk(response);
+        chunk$46.then(
           function (v) {
             return controller.enqueue(v);
           },
@@ -968,10 +1069,10 @@ function startReadableStream(response, id, type) {
             return controller.error(e);
           }
         );
-        previousBlockedChunk = chunk$43;
+        previousBlockedChunk = chunk$46;
         chunk.then(function () {
-          previousBlockedChunk === chunk$43 && (previousBlockedChunk = null);
-          resolveModelChunk(chunk$43, json);
+          previousBlockedChunk === chunk$46 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$46, json);
         });
       }
     },
@@ -1099,8 +1200,8 @@ function mergeBuffer(buffer, lastChunk) {
   for (var l = buffer.length, byteLength = lastChunk.length, i = 0; i < l; i++)
     byteLength += buffer[i].byteLength;
   byteLength = new Uint8Array(byteLength);
-  for (var i$44 = (i = 0); i$44 < l; i$44++) {
-    var chunk = buffer[i$44];
+  for (var i$47 = (i = 0); i$47 < l; i$47++) {
+    var chunk = buffer[i$47];
     byteLength.set(chunk, i);
     i += chunk.byteLength;
   }
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js
index e5de5866a0a77..b6c44d584bd5d 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js
@@ -778,6 +778,8 @@ function createHints() {
 
 var supportsRequestStorage = false;
 var requestStorage = null;
+var supportsComponentStorage = false;
+var componentStorage = null;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
@@ -1125,6 +1127,16 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1149,16 +1161,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1541,7 +1546,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2033,8 +2038,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2062,18 +2070,14 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) ; else {
+        result = Component(props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2275,9 +2279,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2421,7 +2424,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2833,7 +2836,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -2946,7 +2949,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4347,7 +4350,6 @@ function loadChunk(chunkId, filename) {
   return __webpack_chunk_load__(chunkId);
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4423,9 +4425,38 @@ function wakeChunk(listeners, 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 && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4444,6 +4475,60 @@ function createResolvedModelChunk(response, value) {
   return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
+function resolveModelChunk(chunk, value) {
+  if (chunk.status !== PENDING) {
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
+    return;
+  }
+
+  var resolveListeners = chunk.value;
+  var rejectListeners = chunk.reason;
+  var resolvedChunk = chunk;
+  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 createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4472,7 +4557,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4549,21 +4634,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4589,19 +4683,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
+
+    default:
+      throw chunk.reason;
   }
+}
 
-  return chunk.value;
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
+
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4615,13 +4736,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4636,9 +4952,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4647,7 +4962,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4662,8 +4977,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4671,9 +4985,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4681,9 +4993,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4691,10 +5001,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4702,9 +5012,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4804,32 +5112,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js
index 2afbeec7156e4..2615fee0781e5 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js
@@ -824,8 +824,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -900,8 +900,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1005,11 +1005,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1535,10 +1535,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1549,7 +1549,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1838,7 +1838,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1847,14 +1847,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -1966,17 +1966,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -1986,20 +2031,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2040,17 +2092,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2065,11 +2122,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2080,20 +2164,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2104,7 +2350,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2118,29 +2364,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2188,28 +2432,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js
index 76c1395e7d665..daa29218a5b03 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js
@@ -797,7 +797,9 @@ function initAsyncDebugInfo() {
 }
 
 var supportsRequestStorage = typeof AsyncLocalStorage === 'function';
-var requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null; // We use the Node version but get access to async_hooks from a global.
+var requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null;
+var supportsComponentStorage = supportsRequestStorage;
+var componentStorage = supportsComponentStorage ? new AsyncLocalStorage() : null; // We use the Node version but get access to async_hooks from a global.
 
 var createAsyncHook = typeof async_hooks === 'object' ? async_hooks.createHook : function () {
   return {
@@ -1153,6 +1155,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  if (supportsComponentStorage) {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1177,16 +1194,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1570,7 +1580,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2067,8 +2077,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2096,18 +2109,17 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
 
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
-
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) {
+        // Run the component in an Async Context that tracks the current owner.
+        result = componentStorage.run(componentDebugInfo, Component, props, secondArg);
+      } else {
+        result = Component(props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2309,9 +2321,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2455,7 +2466,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2867,7 +2878,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -2980,7 +2991,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4372,7 +4383,6 @@ function loadChunk(chunkId, filename) {
   return __webpack_chunk_load__(chunkId);
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4448,9 +4458,38 @@ function wakeChunk(listeners, 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 && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4469,6 +4508,60 @@ function createResolvedModelChunk(response, value) {
   return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
+function resolveModelChunk(chunk, value) {
+  if (chunk.status !== PENDING) {
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
+    return;
+  }
+
+  var resolveListeners = chunk.value;
+  var rejectListeners = chunk.reason;
+  var resolvedChunk = chunk;
+  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 createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4497,7 +4590,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4574,21 +4667,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4614,19 +4716,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
+
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
+
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
+
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
 
-  return chunk.value;
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4640,13 +4769,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4661,9 +4985,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4672,7 +4995,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4687,8 +5010,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4696,9 +5018,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4706,9 +5026,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4716,10 +5034,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4727,9 +5045,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4829,32 +5145,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js
index ab6fdbadaaa13..5f89db106ceee 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js
@@ -839,8 +839,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -915,8 +915,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1020,11 +1020,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1552,10 +1552,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1566,7 +1566,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1871,7 +1871,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1880,14 +1880,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -1990,17 +1990,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -2010,20 +2055,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2064,17 +2116,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2089,11 +2146,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2104,20 +2188,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2128,7 +2374,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2142,29 +2388,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2212,28 +2456,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js
index 296ab2bfad2d9..3ce87594a1658 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js
@@ -859,6 +859,8 @@ function initAsyncDebugInfo() {
 
 var supportsRequestStorage = true;
 var requestStorage = new async_hooks.AsyncLocalStorage();
+var supportsComponentStorage = true;
+var componentStorage = new async_hooks.AsyncLocalStorage() ;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
@@ -1206,6 +1208,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1230,16 +1247,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1623,7 +1633,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2120,8 +2130,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2149,18 +2162,15 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) {
+        // Run the component in an Async Context that tracks the current owner.
+        result = componentStorage.run(componentDebugInfo, Component, props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2362,9 +2372,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2508,7 +2517,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2920,7 +2929,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -3033,7 +3042,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4419,7 +4428,6 @@ function loadChunk(chunkId, filename) {
   return __webpack_chunk_load__(chunkId);
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4518,7 +4526,15 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
 function triggerErrorOnChunk(chunk, error) {
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4539,7 +4555,19 @@ function createResolvedModelChunk(response, value) {
 
 function resolveModelChunk(chunk, value) {
   if (chunk.status !== PENDING) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
     return;
   }
 
@@ -4559,6 +4587,26 @@ function resolveModelChunk(chunk, value) {
   }
 }
 
+function createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4587,7 +4635,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4664,21 +4712,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4704,19 +4761,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
+
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
 
-  return chunk.value;
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4730,13 +4814,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4751,9 +5030,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4762,7 +5040,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4777,8 +5055,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4786,9 +5063,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4796,9 +5071,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4806,10 +5079,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4817,9 +5090,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4919,32 +5190,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js
index bca09f0e1f3c6..51413d7714a94 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js
@@ -866,8 +866,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -942,8 +942,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1046,11 +1046,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1576,10 +1576,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1590,7 +1590,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1915,7 +1915,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1924,14 +1924,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -2034,17 +2034,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -2054,20 +2099,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2108,17 +2160,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2133,11 +2190,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2148,20 +2232,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2172,7 +2418,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2186,29 +2432,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2256,28 +2500,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
@@ -2303,30 +2537,10 @@ function createResponse(bundlerConfig, formFieldPrefix) {
 function resolveField(response, key, value) {
   response._formData.append(key, value);
   var prefix = response._prefix;
-  if (
-    key.startsWith(prefix) &&
+  key.startsWith(prefix) &&
     ((response = response._chunks),
     (key = +key.slice(prefix.length)),
-    (key = response.get(key)) &&
-      "pending" === key.status &&
-      ((prefix = key.value),
-      (response = key.reason),
-      (key.status = "resolved_model"),
-      (key.value = value),
-      null !== prefix))
-  )
-    switch ((initializeModelChunk(key), key.status)) {
-      case "fulfilled":
-        wakeChunk(prefix, key.value);
-        break;
-      case "pending":
-      case "blocked":
-        key.value = prefix;
-        key.reason = response;
-        break;
-      case "rejected":
-        response && wakeChunk(response, key.reason);
-    }
+    (key = response.get(key)) && resolveModelChunk(key, value));
 }
 function close(response) {
   reportGlobalError(response, Error("Connection closed."));
@@ -2434,12 +2648,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, webpackMap) {
         "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it."
       );
     pendingFiles++;
-    var JSCompiler_object_inline_chunks_209 = [];
+    var JSCompiler_object_inline_chunks_205 = [];
     value.on("data", function (chunk) {
-      JSCompiler_object_inline_chunks_209.push(chunk);
+      JSCompiler_object_inline_chunks_205.push(chunk);
     });
     value.on("end", function () {
-      var blob = new Blob(JSCompiler_object_inline_chunks_209, {
+      var blob = new Blob(JSCompiler_object_inline_chunks_205, {
         type: mimeType
       });
       response._formData.append(name, blob, filename);
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js
index 210250244630e..4b309fa62b90a 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js
@@ -859,6 +859,8 @@ function initAsyncDebugInfo() {
 
 var supportsRequestStorage = true;
 var requestStorage = new async_hooks.AsyncLocalStorage();
+var supportsComponentStorage = true;
+var componentStorage = new async_hooks.AsyncLocalStorage() ;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
@@ -1206,6 +1208,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1230,16 +1247,9 @@ var DefaultAsyncDispatcher = {
     return entry;
   }
 };
-var currentOwner = null;
 
 {
-  DefaultAsyncDispatcher.getOwner = function () {
-    return currentOwner;
-  };
-}
-
-function setCurrentOwner(componentInfo) {
-  currentOwner = componentInfo;
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
 }
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
@@ -1623,7 +1633,7 @@ function patchConsole(consoleInst, methodName) {
         // refer to previous logs in debug info to associate them with a component.
 
         var id = request.nextChunkId++;
-        var owner = currentOwner;
+        var owner = resolveOwner();
         emitConsoleChunk(request, id, methodName, owner, stack, arguments);
       } // $FlowFixMe[prop-missing]
 
@@ -2120,8 +2130,11 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
-  task.thenableState = null;
-  var componentDebugInfo = null;
+  task.thenableState = null; // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -2149,18 +2162,15 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
     setCurrentOwner(componentDebugInfo);
 
     try {
-      result = Component(props, secondArg);
+      if (supportsComponentStorage) {
+        // Run the component in an Async Context that tracks the current owner.
+        result = componentStorage.run(componentDebugInfo, Component, props, secondArg);
+      }
     } finally {
       setCurrentOwner(null);
     }
@@ -2362,9 +2372,8 @@ function renderAsyncFragment(request, task, children, getAsyncIterator) {
 
 function renderClientElement(task, type, key, props, owner) // DEV-only
 {
+  // We prepend the terminal client element that actually gets serialized with
   // the keys of any Server Components which are not serialized.
-
-
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2508,7 +2517,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
+    if (keyPath !== null || implicitSlot) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2920,7 +2929,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
+            if (task.keyPath !== null || task.implicitSlot) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -3033,7 +3042,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -4346,7 +4355,6 @@ function requireModule(metadata) {
   return moduleExports[metadata.name];
 }
 
-// The server acts as a Client of itself when resolving Server References.
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
 var RESOLVED_MODEL = 'resolved_model';
@@ -4445,7 +4453,15 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
 function triggerErrorOnChunk(chunk, error) {
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
+
     return;
   }
 
@@ -4466,7 +4482,19 @@ function createResolvedModelChunk(response, value) {
 
 function resolveModelChunk(chunk, value) {
   if (chunk.status !== PENDING) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
     return;
   }
 
@@ -4486,6 +4514,26 @@ function resolveModelChunk(chunk, value) {
   }
 }
 
+function createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -4514,7 +4562,7 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
@@ -4591,21 +4639,30 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
+    // is a stale `null`, the resolved value can be used directly.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -4631,19 +4688,46 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, id, parentObject, key, map) {
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
-  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      return map(response, chunk.value);
+
+    case PENDING:
+    case BLOCKED:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, false, response, map), createModelReject(parentChunk));
+      return null;
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
+
+function createSet(response, model) {
+  return new Set(model);
+}
 
-  return chunk.value;
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
 }
 
 function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
@@ -4657,13 +4741,208 @@ function parseTypedArray(response, reference, constructor, bytesPerElement, pare
   var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
     return new constructor(buffer);
   }); // Since loading the buffer is an async operation we'll be blocking the parent
-  // chunk. TODO: This is not safe if the parent chunk needs a mapper like Map.
+  // chunk.
 
   var parentChunk = initializingChunk;
-  promise.then(createModelResolver(parentChunk, parentObject, parentKey), createModelReject(parentChunk));
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel), createModelReject(parentChunk));
   return null;
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+  }
+}
+
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
 function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -4678,9 +4957,8 @@ function parseModelString(response, obj, key, value) {
           // Promise
           var _id = parseInt(value.slice(2), 16);
 
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var chunk = getChunk(response, _id);
+          return chunk;
         }
 
       case 'F':
@@ -4689,7 +4967,7 @@ function parseModelString(response, obj, key, value) {
           var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _id2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
@@ -4704,8 +4982,7 @@ function parseModelString(response, obj, key, value) {
           // Map
           var _id3 = parseInt(value.slice(2), 16);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _id3, obj, key, createMap);
         }
 
       case 'W':
@@ -4713,9 +4990,7 @@ function parseModelString(response, obj, key, value) {
           // Set
           var _id4 = parseInt(value.slice(2), 16);
 
-          var _data = getOutlinedModel(response, _id4);
-
-          return new Set(_data);
+          return getOutlinedModel(response, _id4, obj, key, createSet);
         }
 
       case 'K':
@@ -4723,9 +4998,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -4733,10 +5006,10 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
@@ -4744,9 +5017,7 @@ function parseModelString(response, obj, key, value) {
           // Iterator
           var _id5 = parseInt(value.slice(2), 16);
 
-          var _data3 = getOutlinedModel(response, _id5);
-
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _id5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4846,32 +5117,35 @@ function parseModelString(response, obj, key, value) {
             return backingEntry;
           }
       }
-    } // We assume that anything else is a reference ID.
-
+    }
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
 
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
 
-      default:
-        throw chunk.reason;
-    }
+    var id = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, id, obj, key, createModel);
   }
 
   return value;
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js
index 64dbd5eafd758..4b63b901f0e71 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js
@@ -866,8 +866,8 @@ function serializeReadableStream(request, task, stream) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             reader.read().then(progress, error);
-        } catch (x$8) {
-          error(x$8);
+        } catch (x$9) {
+          error(x$9);
         }
   }
   function error(reason) {
@@ -942,8 +942,8 @@ function serializeAsyncIterable(request, task, iterable, iterator) {
             emitChunk(request, streamTask, streamTask.model),
             enqueueFlush(request),
             iterator.next().then(progress, error);
-        } catch (x$9) {
-          error(x$9);
+        } catch (x$10) {
+          error(x$10);
         }
   }
   function error(reason) {
@@ -1046,11 +1046,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
           Component instanceof ReadableStream)
       )
     ) {
-      var iterableChild$10 = Component;
+      var iterableChild$11 = Component;
       Component = {};
       Component =
         ((Component[ASYNC_ITERATOR] = function () {
-          return iterableChild$10[ASYNC_ITERATOR]();
+          return iterableChild$11[ASYNC_ITERATOR]();
         }),
         Component);
     }
@@ -1576,10 +1576,10 @@ function renderModelDestructive(
   }
   if ("symbol" === typeof value) {
     task = request.writtenSymbols;
-    var existingId$17 = task.get(value);
-    if (void 0 !== existingId$17) return serializeByValueID(existingId$17);
-    existingId$17 = value.description;
-    if (Symbol.for(existingId$17) !== value)
+    var existingId$18 = task.get(value);
+    if (void 0 !== existingId$18) return serializeByValueID(existingId$18);
+    existingId$18 = value.description;
+    if (Symbol.for(existingId$18) !== value)
       throw 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.") +
@@ -1590,7 +1590,7 @@ function renderModelDestructive(
     parentPropertyName = encodeReferenceChunk(
       request,
       parent,
-      "$S" + existingId$17
+      "$S" + existingId$18
     );
     request.completedImportChunks.push(parentPropertyName);
     task.set(value, parent);
@@ -1915,7 +1915,7 @@ function abort(request, reason) {
     }
     var abortListeners = request.abortListeners;
     if (0 < abortListeners.size) {
-      var error$25 =
+      var error$26 =
         "object" === typeof reason &&
         null !== reason &&
         reason.$$typeof === REACT_POSTPONE_TYPE
@@ -1924,14 +1924,14 @@ function abort(request, reason) {
           ? Error("The render was aborted by the server without a reason.")
           : reason;
       abortListeners.forEach(function (callback) {
-        return callback(error$25);
+        return callback(error$26);
       });
       abortListeners.clear();
     }
     null !== request.destination &&
       flushCompletedChunks(request, request.destination);
-  } catch (error$26) {
-    logRecoverableError(request, error$26), fatalError(request, error$26);
+  } catch (error$27) {
+    logRecoverableError(request, error$27), fatalError(request, error$27);
   }
 }
 function resolveServerReference(bundlerConfig, id) {
@@ -2002,17 +2002,62 @@ Chunk.prototype.then = function (resolve, reject) {
       reject(this.reason);
   }
 };
+function createPendingChunk(response) {
+  return new Chunk("pending", null, null, response);
+}
 function wakeChunk(listeners, value) {
   for (var i = 0; i < listeners.length; i++) (0, listeners[i])(value);
 }
 function triggerErrorOnChunk(chunk, error) {
-  if ("pending" === chunk.status || "blocked" === chunk.status) {
+  if ("pending" !== chunk.status && "blocked" !== chunk.status)
+    chunk.reason.error(error);
+  else {
     var listeners = chunk.reason;
     chunk.status = "rejected";
     chunk.reason = error;
     null !== listeners && wakeChunk(listeners, error);
   }
 }
+function resolveModelChunk(chunk, value) {
+  if ("pending" !== chunk.status)
+    (chunk = chunk.reason),
+      "C" === value[0]
+        ? chunk.close("C" === value ? '"$undefined"' : value.slice(1))
+        : chunk.enqueueModel(value);
+  else {
+    var resolveListeners = chunk.value,
+      rejectListeners = chunk.reason;
+    chunk.status = "resolved_model";
+    chunk.value = value;
+    if (null !== resolveListeners)
+      switch ((initializeModelChunk(chunk), chunk.status)) {
+        case "fulfilled":
+          wakeChunk(resolveListeners, chunk.value);
+          break;
+        case "pending":
+        case "blocked":
+          chunk.value = resolveListeners;
+          chunk.reason = rejectListeners;
+          break;
+        case "rejected":
+          rejectListeners && wakeChunk(rejectListeners, chunk.reason);
+      }
+  }
+}
+function createResolvedIteratorResultChunk(response, value, done) {
+  return new Chunk(
+    "resolved_model",
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}",
+    null,
+    response
+  );
+}
+function resolveIteratorResultChunk(chunk, value, done) {
+  resolveModelChunk(
+    chunk,
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + "}"
+  );
+}
 function loadServerReference$1(
   response,
   id,
@@ -2022,20 +2067,27 @@ function loadServerReference$1(
   key
 ) {
   var serverReference = resolveServerReference(response._bundlerConfig, id);
-  response = preloadModule(serverReference);
+  id = preloadModule(serverReference);
   if (bound)
-    bound = Promise.all([bound, response]).then(function (_ref) {
+    bound = Promise.all([bound, id]).then(function (_ref) {
       _ref = _ref[0];
       var fn = requireModule(serverReference);
       return fn.bind.apply(fn, [null].concat(_ref));
     });
-  else if (response)
-    bound = Promise.resolve(response).then(function () {
+  else if (id)
+    bound = Promise.resolve(id).then(function () {
       return requireModule(serverReference);
     });
   else return requireModule(serverReference);
   bound.then(
-    createModelResolver(parentChunk, parentObject, key),
+    createModelResolver(
+      parentChunk,
+      parentObject,
+      key,
+      !1,
+      response,
+      createModel
+    ),
     createModelReject(parentChunk)
   );
   return null;
@@ -2076,17 +2128,22 @@ function getChunk(response, id) {
     (chunk =
       null != chunk
         ? new Chunk("resolved_model", chunk, null, response)
-        : new Chunk("pending", null, null, response)),
+        : createPendingChunk(response)),
     chunks.set(id, chunk));
   return chunk;
 }
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   if (initializingChunkBlockedModel) {
     var blocked = initializingChunkBlockedModel;
-    blocked.deps++;
-  } else blocked = initializingChunkBlockedModel = { deps: 1, value: null };
+    cyclic || blocked.deps++;
+  } else
+    blocked = initializingChunkBlockedModel = {
+      deps: cyclic ? 0 : 1,
+      value: null
+    };
   return function (value) {
-    parentObject[key] = value;
+    parentObject[key] = map(response, value);
+    "" === key && null === blocked.value && (blocked.value = parentObject[key]);
     blocked.deps--;
     0 === blocked.deps &&
       "blocked" === chunk.status &&
@@ -2101,11 +2158,38 @@ function createModelReject(chunk) {
     return triggerErrorOnChunk(chunk, error);
   };
 }
-function getOutlinedModel(response, id) {
-  response = getChunk(response, id);
-  "resolved_model" === response.status && initializeModelChunk(response);
-  if ("fulfilled" !== response.status) throw response.reason;
-  return response.value;
+function getOutlinedModel(response, id, parentObject, key, map) {
+  id = getChunk(response, id);
+  switch (id.status) {
+    case "resolved_model":
+      initializeModelChunk(id);
+  }
+  switch (id.status) {
+    case "fulfilled":
+      return map(response, id.value);
+    case "pending":
+    case "blocked":
+      var parentChunk = initializingChunk;
+      id.then(
+        createModelResolver(parentChunk, parentObject, key, !1, response, map),
+        createModelReject(parentChunk)
+      );
+      return null;
+    default:
+      throw id.reason;
+  }
+}
+function createMap(response, model) {
+  return new Map(model);
+}
+function createSet(response, model) {
+  return new Set(model);
+}
+function extractIterator(response, model) {
+  return model[Symbol.iterator]();
+}
+function createModel(response, model) {
+  return model;
 }
 function parseTypedArray(
   response,
@@ -2116,20 +2200,182 @@ function parseTypedArray(
   parentKey
 ) {
   reference = parseInt(reference.slice(2), 16);
-  response = response._formData.get(response._prefix + reference);
-  response =
+  reference = response._formData.get(response._prefix + reference);
+  reference =
     constructor === ArrayBuffer
-      ? response.arrayBuffer()
-      : response.arrayBuffer().then(function (buffer) {
+      ? reference.arrayBuffer()
+      : reference.arrayBuffer().then(function (buffer) {
           return new constructor(buffer);
         });
-  reference = initializingChunk;
-  response.then(
-    createModelResolver(reference, parentObject, parentKey),
-    createModelReject(reference)
+  bytesPerElement = initializingChunk;
+  reference.then(
+    createModelResolver(
+      bytesPerElement,
+      parentObject,
+      parentKey,
+      !1,
+      response,
+      createModel
+    ),
+    createModelReject(bytesPerElement)
   );
   return null;
 }
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  stream = new Chunk("fulfilled", stream, controller, response);
+  chunks.set(id, stream);
+  response = response._formData.getAll(response._prefix + id);
+  for (id = 0; id < response.length; id++)
+    (chunks = response[id]),
+      "C" === chunks[0]
+        ? controller.close("C" === chunks ? '"$undefined"' : chunks.slice(1))
+        : controller.enqueueModel(chunks);
+}
+function parseReadableStream(response, reference, type) {
+  reference = parseInt(reference.slice(2), 16);
+  var controller = null;
+  type = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  resolveStream(response, reference, type, {
+    enqueueModel: function (json) {
+      if (null === previousBlockedChunk) {
+        var chunk = new Chunk("resolved_model", json, null, response);
+        initializeModelChunk(chunk);
+        "fulfilled" === chunk.status
+          ? controller.enqueue(chunk.value)
+          : (chunk.then(
+              function (v) {
+                return controller.enqueue(v);
+              },
+              function (e) {
+                return controller.error(e);
+              }
+            ),
+            (previousBlockedChunk = chunk));
+      } else {
+        chunk = previousBlockedChunk;
+        var chunk$28 = createPendingChunk(response);
+        chunk$28.then(
+          function (v) {
+            return controller.enqueue(v);
+          },
+          function (e) {
+            return controller.error(e);
+          }
+        );
+        previousBlockedChunk = chunk$28;
+        chunk.then(function () {
+          previousBlockedChunk === chunk$28 && (previousBlockedChunk = null);
+          resolveModelChunk(chunk$28, json);
+        });
+      }
+    },
+    close: function () {
+      if (null === previousBlockedChunk) controller.close();
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (null === previousBlockedChunk) controller.error(error);
+      else {
+        var blockedChunk = previousBlockedChunk;
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  });
+  return type;
+}
+function asyncIterator() {
+  return this;
+}
+function createIterator(next) {
+  next = { next: next };
+  next[ASYNC_ITERATOR] = asyncIterator;
+  return next;
+}
+function parseAsyncIterable(response, reference, iterator) {
+  reference = parseInt(reference.slice(2), 16);
+  var buffer = [],
+    closed = !1,
+    nextWriteIndex = 0,
+    $jscomp$compprop2 = {};
+  $jscomp$compprop2 =
+    (($jscomp$compprop2[ASYNC_ITERATOR] = function () {
+      var nextReadIndex = 0;
+      return createIterator(function (arg) {
+        if (void 0 !== arg)
+          throw Error(
+            "Values cannot be passed to next() of AsyncIterables passed to Client Components."
+          );
+        if (nextReadIndex === buffer.length) {
+          if (closed)
+            return new Chunk(
+              "fulfilled",
+              { done: !0, value: void 0 },
+              null,
+              response
+            );
+          buffer[nextReadIndex] = createPendingChunk(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    }),
+    $jscomp$compprop2);
+  iterator = iterator ? $jscomp$compprop2[ASYNC_ITERATOR]() : $jscomp$compprop2;
+  resolveStream(response, reference, iterator, {
+    enqueueModel: function (value) {
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !1
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !1);
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = !0;
+      nextWriteIndex === buffer.length
+        ? (buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+            response,
+            value,
+            !0
+          ))
+        : resolveIteratorResultChunk(buffer[nextWriteIndex], value, !0);
+      for (nextWriteIndex++; nextWriteIndex < buffer.length; )
+        resolveIteratorResultChunk(
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          !0
+        );
+    },
+    error: function (error) {
+      closed = !0;
+      for (
+        nextWriteIndex === buffer.length &&
+        (buffer[nextWriteIndex] = createPendingChunk(response));
+        nextWriteIndex < buffer.length;
+
+      )
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+    }
+  });
+  return iterator;
+}
 function parseModelString(response, obj, key, value) {
   if ("$" === value[0]) {
     switch (value[1]) {
@@ -2140,7 +2386,7 @@ function parseModelString(response, obj, key, value) {
       case "F":
         return (
           (value = parseInt(value.slice(2), 16)),
-          (value = getOutlinedModel(response, value)),
+          (value = getOutlinedModel(response, value, obj, key, createModel)),
           loadServerReference$1(
             response,
             value.id,
@@ -2154,29 +2400,27 @@ function parseModelString(response, obj, key, value) {
         return createTemporaryReference(value.slice(2));
       case "Q":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Map(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createMap)
         );
       case "W":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          (response = getOutlinedModel(response, obj)),
-          new Set(response)
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, createSet)
         );
       case "K":
         obj = value.slice(2);
         var formPrefix = response._prefix + obj + "_",
-          data$31 = new FormData();
+          data = new FormData();
         response._formData.forEach(function (entry, entryKey) {
           entryKey.startsWith(formPrefix) &&
-            data$31.append(entryKey.slice(formPrefix.length), entry);
+            data.append(entryKey.slice(formPrefix.length), entry);
         });
-        return data$31;
+        return data;
       case "i":
         return (
-          (obj = parseInt(value.slice(2), 16)),
-          getOutlinedModel(response, obj)[Symbol.iterator]()
+          (value = parseInt(value.slice(2), 16)),
+          getOutlinedModel(response, value, obj, key, extractIterator)
         );
       case "I":
         return Infinity;
@@ -2224,28 +2468,18 @@ function parseModelString(response, obj, key, value) {
           response._formData.get(response._prefix + obj)
         );
     }
-    value = parseInt(value.slice(1), 16);
-    response = getChunk(response, value);
-    switch (response.status) {
-      case "resolved_model":
-        initializeModelChunk(response);
-    }
-    switch (response.status) {
-      case "fulfilled":
-        return response.value;
-      case "pending":
-      case "blocked":
-        return (
-          (value = initializingChunk),
-          response.then(
-            createModelResolver(value, obj, key),
-            createModelReject(value)
-          ),
-          null
-        );
-      default:
-        throw response.reason;
+    switch (value[1]) {
+      case "R":
+        return parseReadableStream(response, value, void 0);
+      case "r":
+        return parseReadableStream(response, value, "bytes");
+      case "X":
+        return parseAsyncIterable(response, value, !1);
+      case "x":
+        return parseAsyncIterable(response, value, !0);
     }
+    value = parseInt(value.slice(1), 16);
+    return getOutlinedModel(response, value, obj, key, createModel);
   }
   return value;
 }
@@ -2271,30 +2505,10 @@ function createResponse(bundlerConfig, formFieldPrefix) {
 function resolveField(response, key, value) {
   response._formData.append(key, value);
   var prefix = response._prefix;
-  if (
-    key.startsWith(prefix) &&
+  key.startsWith(prefix) &&
     ((response = response._chunks),
     (key = +key.slice(prefix.length)),
-    (key = response.get(key)) &&
-      "pending" === key.status &&
-      ((prefix = key.value),
-      (response = key.reason),
-      (key.status = "resolved_model"),
-      (key.value = value),
-      null !== prefix))
-  )
-    switch ((initializeModelChunk(key), key.status)) {
-      case "fulfilled":
-        wakeChunk(prefix, key.value);
-        break;
-      case "pending":
-      case "blocked":
-        key.value = prefix;
-        key.reason = response;
-        break;
-      case "rejected":
-        response && wakeChunk(response, key.reason);
-    }
+    (key = response.get(key)) && resolveModelChunk(key, value));
 }
 function close(response) {
   reportGlobalError(response, Error("Connection closed."));
@@ -2402,12 +2616,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, webpackMap) {
         "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it."
       );
     pendingFiles++;
-    var JSCompiler_object_inline_chunks_209 = [];
+    var JSCompiler_object_inline_chunks_205 = [];
     value.on("data", function (chunk) {
-      JSCompiler_object_inline_chunks_209.push(chunk);
+      JSCompiler_object_inline_chunks_205.push(chunk);
     });
     value.on("end", function () {
-      var blob = new Blob(JSCompiler_object_inline_chunks_209, {
+      var blob = new Blob(JSCompiler_object_inline_chunks_205, {
         type: mimeType
       });
       response._formData.append(name, blob, filename);
diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json b/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json
index ad79efacd2c66..b24cf9fef5459 100644
--- a/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json
+++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json
@@ -46,8 +46,8 @@
     "neo-async": "^2.6.1"
   },
   "peerDependencies": {
-    "react": "0.0.0-experimental-4508873393-20240430",
-    "react-dom": "0.0.0-experimental-4508873393-20240430",
+    "react": "0.0.0-experimental-04b058868c-20240508",
+    "react-dom": "0.0.0-experimental-04b058868c-20240508",
     "webpack": "^5.59.0"
   }
 }
\ No newline at end of file
diff --git a/packages/next/src/compiled/scheduler-experimental/cjs/scheduler.development.js b/packages/next/src/compiled/scheduler-experimental/cjs/scheduler.development.js
index 098eb37798b1f..8d4d4420ff9c1 100644
--- a/packages/next/src/compiled/scheduler-experimental/cjs/scheduler.development.js
+++ b/packages/next/src/compiled/scheduler-experimental/cjs/scheduler.development.js
@@ -12,10 +12,7 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
@@ -23,7 +20,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var enableSchedulerDebugging = false;
+var enableSchedulerDebugging = false;
 var enableProfiling = false;
 var frameYieldMs = 5;
 var userBlockingPriorityTimeout = 250;
@@ -612,7 +609,6 @@ exports.unstable_runWithPriority = unstable_runWithPriority;
 exports.unstable_scheduleCallback = unstable_scheduleCallback;
 exports.unstable_shouldYield = shouldYieldToHost;
 exports.unstable_wrapCallback = unstable_wrapCallback;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -620,6 +616,6 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }
diff --git a/packages/next/src/compiled/scheduler/cjs/scheduler.development.js b/packages/next/src/compiled/scheduler/cjs/scheduler.development.js
index 098eb37798b1f..8d4d4420ff9c1 100644
--- a/packages/next/src/compiled/scheduler/cjs/scheduler.development.js
+++ b/packages/next/src/compiled/scheduler/cjs/scheduler.development.js
@@ -12,10 +12,7 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
@@ -23,7 +20,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var enableSchedulerDebugging = false;
+var enableSchedulerDebugging = false;
 var enableProfiling = false;
 var frameYieldMs = 5;
 var userBlockingPriorityTimeout = 250;
@@ -612,7 +609,6 @@ exports.unstable_runWithPriority = unstable_runWithPriority;
 exports.unstable_scheduleCallback = unstable_scheduleCallback;
 exports.unstable_shouldYield = shouldYieldToHost;
 exports.unstable_wrapCallback = unstable_wrapCallback;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -620,6 +616,6 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e861e69166e3..9056be3af5c38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,7 +18,7 @@ overrides:
   react: 19.0.0-beta-04b058868c-20240508
   react-dom: 19.0.0-beta-04b058868c-20240508
   react-is: 19.0.0-beta-04b058868c-20240508
-  scheduler: 0.25.0-beta-94eed63c49-20240425
+  scheduler: 0.25.0-beta-04b058868c-20240508
 
 importers:
 
@@ -454,23 +454,23 @@ importers:
         specifier: npm:react-dom@19.0.0-beta-04b058868c-20240508
         version: /react-dom@19.0.0-beta-04b058868c-20240508(react@19.0.0-beta-04b058868c-20240508)
       react-dom-experimental-builtin:
-        specifier: npm:react-dom@0.0.0-experimental-4508873393-20240430
-        version: /react-dom@0.0.0-experimental-4508873393-20240430(react@19.0.0-beta-04b058868c-20240508)
+        specifier: npm:react-dom@0.0.0-experimental-04b058868c-20240508
+        version: /react-dom@0.0.0-experimental-04b058868c-20240508(react@19.0.0-beta-04b058868c-20240508)
       react-experimental-builtin:
-        specifier: npm:react@0.0.0-experimental-4508873393-20240430
-        version: /react@0.0.0-experimental-4508873393-20240430
+        specifier: npm:react@0.0.0-experimental-04b058868c-20240508
+        version: /react@0.0.0-experimental-04b058868c-20240508
       react-server-dom-turbopack:
         specifier: 19.0.0-beta-04b058868c-20240508
         version: 19.0.0-beta-04b058868c-20240508(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)
       react-server-dom-turbopack-experimental:
-        specifier: npm:react-server-dom-turbopack@0.0.0-experimental-4508873393-20240430
-        version: /react-server-dom-turbopack@0.0.0-experimental-4508873393-20240430(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)
+        specifier: npm:react-server-dom-turbopack@0.0.0-experimental-04b058868c-20240508
+        version: /react-server-dom-turbopack@0.0.0-experimental-04b058868c-20240508(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)
       react-server-dom-webpack:
         specifier: 19.0.0-beta-04b058868c-20240508
         version: 19.0.0-beta-04b058868c-20240508(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)(webpack@5.90.0)
       react-server-dom-webpack-experimental:
-        specifier: npm:react-server-dom-webpack@0.0.0-experimental-4508873393-20240430
-        version: /react-server-dom-webpack@0.0.0-experimental-4508873393-20240430(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)(webpack@5.90.0)
+        specifier: npm:react-server-dom-webpack@0.0.0-experimental-04b058868c-20240508
+        version: /react-server-dom-webpack@0.0.0-experimental-04b058868c-20240508(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)(webpack@5.90.0)
       react-ssr-prepass:
         specifier: 1.0.8
         version: 1.0.8(react-is@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)
@@ -499,11 +499,11 @@ importers:
         specifier: 0.10.9
         version: 0.10.9
       scheduler-builtin:
-        specifier: npm:scheduler@0.25.0-beta-4508873393-20240430
-        version: /scheduler@0.25.0-beta-4508873393-20240430
+        specifier: npm:scheduler@0.25.0-beta-04b058868c-20240508
+        version: /scheduler@0.25.0-beta-04b058868c-20240508
       scheduler-experimental-builtin:
-        specifier: npm:scheduler@0.0.0-experimental-4508873393-20240430
-        version: /scheduler@0.0.0-experimental-4508873393-20240430
+        specifier: npm:scheduler@0.0.0-experimental-04b058868c-20240508
+        version: /scheduler@0.0.0-experimental-04b058868c-20240508
       seedrandom:
         specifier: 3.0.5
         version: 3.0.5
@@ -21326,13 +21326,13 @@ packages:
       strip-json-comments: 2.0.1
     dev: true
 
-  /react-dom@0.0.0-experimental-4508873393-20240430(react@19.0.0-beta-04b058868c-20240508):
-    resolution: {integrity: sha512-xmoRPU8s6sFJmhNhfUTSVztr/ExqJpYBI1NSVr/aQffKAfdriTdRT/iOxxCkPjD9a6eV4kjMagcw29Mt27aybA==}
+  /react-dom@0.0.0-experimental-04b058868c-20240508(react@19.0.0-beta-04b058868c-20240508):
+    resolution: {integrity: sha512-Lln68q2EH1Gjy01IwAsSWmf4bvrH7FFJc5stnTX4TOj4IEfeRxdQgQtSO1c2G065TGe6hua01lDewGifSktT9w==}
     peerDependencies:
       react: 19.0.0-beta-04b058868c-20240508
     dependencies:
       react: 19.0.0-beta-04b058868c-20240508
-      scheduler: 0.25.0-beta-94eed63c49-20240425
+      scheduler: 0.25.0-beta-04b058868c-20240508
     dev: true
 
   /react-dom@17.0.2(react@19.0.0-beta-04b058868c-20240508):
@@ -21343,7 +21343,7 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react: 19.0.0-beta-04b058868c-20240508
-      scheduler: 0.25.0-beta-94eed63c49-20240425
+      scheduler: 0.25.0-beta-04b058868c-20240508
     dev: true
 
   /react-dom@19.0.0-beta-04b058868c-20240508(react@19.0.0-beta-04b058868c-20240508):
@@ -21352,7 +21352,7 @@ packages:
       react: 19.0.0-beta-04b058868c-20240508
     dependencies:
       react: 19.0.0-beta-04b058868c-20240508
-      scheduler: 0.25.0-beta-94eed63c49-20240425
+      scheduler: 0.25.0-beta-04b058868c-20240508
 
   /react-is@19.0.0-beta-04b058868c-20240508:
     resolution: {integrity: sha512-fn/t9y3/gURwRREkXGoFgvkSWngyHqN2bKg74rNNGtwsFeYqfquqxGHeE1u1Y1lddYupmltCkJR15Eh9RKUTFw==}
@@ -21366,8 +21366,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-server-dom-turbopack@0.0.0-experimental-4508873393-20240430(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508):
-    resolution: {integrity: sha512-+TcuMDyyfB2n4axpYzowXnUBYjO4uAjfIeAKVet7qwwWiRRnMOJYACIQDdK3FKYge8CZ5bF3dqZerhbzxc3HrA==}
+  /react-server-dom-turbopack@0.0.0-experimental-04b058868c-20240508(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508):
+    resolution: {integrity: sha512-+voMRIMMif4pb1wgvLpxW9qGA21O0G+pc1yLYwr3JLT+8UAWUnDxzneVC40GJ0522g/AKnQ7tCR0blOSyz4MRw==}
     engines: {node: '>=0.10.0'}
     peerDependencies:
       react: 19.0.0-beta-04b058868c-20240508
@@ -21392,8 +21392,8 @@ packages:
       react-dom: 19.0.0-beta-04b058868c-20240508(react@19.0.0-beta-04b058868c-20240508)
     dev: true
 
-  /react-server-dom-webpack@0.0.0-experimental-4508873393-20240430(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)(webpack@5.90.0):
-    resolution: {integrity: sha512-RaJGhlOUnHnnOHhN2swOD6DeCNlh/KPPlHRoG7QnkKRjP593tSS68CrP9nnPGvuqZvFSVUP2NpuvOYMJSH+93w==}
+  /react-server-dom-webpack@0.0.0-experimental-04b058868c-20240508(react-dom@19.0.0-beta-04b058868c-20240508)(react@19.0.0-beta-04b058868c-20240508)(webpack@5.90.0):
+    resolution: {integrity: sha512-Y5A/BcgBTHfLovk0od9Fyt+44li9U2H8I5q16TmDnVNnXfntM4L9RdjPgI/T2AOsSmByBJ2Nw1Iwco7k425fnQ==}
     engines: {node: '>=0.10.0'}
     peerDependencies:
       react: 19.0.0-beta-04b058868c-20240508
@@ -21449,8 +21449,8 @@ packages:
       react-lifecycles-compat: 3.0.4
     dev: true
 
-  /react@0.0.0-experimental-4508873393-20240430:
-    resolution: {integrity: sha512-lO/bf0CFNiNy2PxZI0wrwVhUoZ7IYRXaBFTiKJXOY0Inz3QWPaAZitZNccHOL9ug6Q+qOmO7VmK6fkz7yReBrw==}
+  /react@0.0.0-experimental-04b058868c-20240508:
+    resolution: {integrity: sha512-Sw5C323J4jyhwnJM1C3DflomFdvsi6OFn6ygokaUeWjEyUxpzyzXCunfm4hE9PsE/IYqQFMWQY8ZtlTv5eQBHA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
@@ -22452,16 +22452,12 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
-  /scheduler@0.0.0-experimental-4508873393-20240430:
-    resolution: {integrity: sha512-IWqVUYTSfu234x/NmD2lW/0rZlKAzZuABnLTRCohH61//00kgLvFVRxpo15GRtzvRkHBi7vb82cWOHm+AWRigA==}
+  /scheduler@0.0.0-experimental-04b058868c-20240508:
+    resolution: {integrity: sha512-9CYaAmpRK3c2NLiKf48q4pqG2MifEqG1R1lgYTTowMzpeBXyKAamB0CDpvbsdGeXSyLnvdLC3hrMzrbfpuXIfw==}
     dev: true
 
-  /scheduler@0.25.0-beta-4508873393-20240430:
-    resolution: {integrity: sha512-gk9vDoDOjTys0DpLgFll+hYk5gLhLnTipi81Pl+XSRtWkQnqQdjxLO2RF726t0g0jQ5tvwjLfBCgsvusgB6Luw==}
-    dev: true
-
-  /scheduler@0.25.0-beta-94eed63c49-20240425:
-    resolution: {integrity: sha512-U8hoOV7uut5E8cMvRSMikEBBqLXfv2BpdxUsG45euaOfnqEgFrCdLLh6ydM+YBJ36+28olXMNmK2PFFzeg4UdQ==}
+  /scheduler@0.25.0-beta-04b058868c-20240508:
+    resolution: {integrity: sha512-9BiO+0jJiftEqYhVXGIc7MQTxbDAd7mfRMIctKsH0DxvuN8vzzaOQbG5Jy720Pz6KUAjgAAJJ/2nZW35+XwuHg==}
 
   /schema-utils@2.7.1:
     resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}