diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
index bf9b28cf3a04fae..7937f7a0ec667f5 100644
--- a/.github/workflows/build_test_deploy.yml
+++ b/.github/workflows/build_test_deploy.yml
@@ -208,12 +208,16 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [16, 17]
     steps:
       - name: Setup node
         uses: actions/setup-node@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
-          node-version: 14
+          node-version: ${{ matrix.node }}
 
       - run: echo ${{needs.build.outputs.docsChange}}
 
@@ -258,12 +262,16 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [16, 17]
     steps:
       - name: Setup node
         uses: actions/setup-node@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
-          node-version: 14
+          node-version: ${{ matrix.node }}
 
       - run: echo ${{needs.build.outputs.docsChange}}
 
@@ -308,12 +316,16 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [16, 17]
     steps:
       - name: Setup node
         uses: actions/setup-node@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
-          node-version: 14
+          node-version: ${{ matrix.node }}
 
       - run: echo ${{needs.build.outputs.docsChange}}
 
@@ -348,12 +360,16 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [16, 17]
     steps:
       - name: Setup node
         uses: actions/setup-node@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
-          node-version: 14
+          node-version: ${{ matrix.node }}
 
       - run: echo ${{needs.build.outputs.docsChange}}
 
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 4035fa8c65ec71a..2e75c38e14e7249 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -48,15 +48,23 @@ When using an external URL, you must add it to
 
 ### width
 
-The width of the image, in pixels. Must be an integer without a unit.
+The `width` property can represent either the _rendered_ width or _original_ width in pixels, depending on the [`layout`](#layout) and [`sizes`](#sizes) properties.
 
-Required, except for statically imported images, or those with [`layout="fill"`](#layout).
+When using `layout="intrinsic"`, `layout="fixed"`, or `layout="raw"` without `sizes`, the `width` property represents the _rendered_ width in pixels, so it will affect how large the image appears.
+
+When using `layout="responsive"`, `layout="fill"`, or `layout="raw"` with `sizes`, the `width` property represents the _original_ width in pixels, so it will only affect the aspect ratio.
+
+The `width` property is required, except for [statically imported images](#local-images), or those with `layout="fill"`.
 
 ### height
 
-The height of the image, in pixels. Must be an integer without a unit.
+The `height` property can represent either the _rendered_ height or _original_ height in pixels, depending on the [`layout`](#layout) and [`sizes`](#sizes) properties.
+
+When using `layout="intrinsic"`, `layout="fixed"`, or `layout="raw"` without `sizes`, the `height` property represents the _rendered_ height in pixels, so it will affect how large the image appears.
+
+When using `layout="responsive"`, `layout="fill"`, or `layout="raw"` with `sizes`, the `height` property represents the _original_ height in pixels, so it will only affect the aspect ratio.
 
-Required, except for statically imported images, or those with [`layout="fill"`](#layout).
+The `height` property is required, except for [statically imported images](#local-images), or those with `layout="fill"`.
 
 ## Optional Props
 
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
index 9de528f1910b175..0c55837410ec0fa 100644
--- a/docs/basic-features/image-optimization.md
+++ b/docs/basic-features/image-optimization.md
@@ -150,8 +150,8 @@ One of the ways that images most commonly hurt performance is through _layout sh
 Because `next/image` is designed to guarantee good performance results, it cannot be used in a way that will contribute to layout shift, and **must** be sized in one of three ways:
 
 1. Automatically, using a [static import](#local-images)
-2. Explicitly, by including a `height` **and** `width` property
-3. Implicitly, by using `layout="fill"` which causes the image to expand to fill its parent element.
+2. Explicitly, by including a [`width`](/docs/api-reference/next/image.md#width) and [`height`](/docs/api-reference/next/image.md#height) property
+3. Implicitly, by using [`layout="fill"`](/docs/api-reference/next/image.md#layout) which causes the image to expand to fill its parent element.
 
 > ### What if I don't know the size of my images?
 >
diff --git a/lerna.json b/lerna.json
index 4415b75844cbced..5e8cd0b1971db5c 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1-canary.13"
+  "version": "12.1.1-canary.14"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 2d57e6a8e2baa0e..d0e4f0d7d2a671f 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index e68969e8aa4275c..5b3017880013fa0 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.1.1-canary.13",
+    "@next/eslint-plugin-next": "12.1.1-canary.14",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 3fe50fb6b560104..690f94fef4168f6 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index fb7f83556de056e..a9a59a5c10672cb 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index e709967e7c402cc..e3565e5c5371c03 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 2cc25fd36d5d215..3047335bfe99bd4 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 868e2c86ced2bbd..1e157d63d80d576 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 74a1e3a4e04e40e..66f42c4541a2199 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 70fc47de314b664..01186936731e9f8 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index e3a31329d734cc9..07ce96320c474a4 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index dbe4fe548158304..4e36d27fbd4c8a8 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index c6a57df897a06d8..304b7047b1490ad 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -187,6 +187,9 @@ export async function getPageRuntime(
   if (!pageRuntime) {
     if (isRuntimeRequired) {
       pageRuntime = globalRuntimeFallback
+    } else {
+      // @TODO: Remove this branch to fully implement the RFC.
+      pageRuntime = globalRuntimeFallback
     }
   }
 
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index 3e0584d68b43948..e1176656fe08d14 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -76,11 +76,7 @@ import {
 } from '../telemetry/events'
 import { Telemetry } from '../telemetry/storage'
 import { CompilerResult, runCompiler } from './compiler'
-import {
-  createEntrypoints,
-  createPagesMapping,
-  getPageRuntime,
-} from './entries'
+import { createEntrypoints, createPagesMapping } from './entries'
 import { generateBuildId } from './generate-build-id'
 import { isWriteable } from './is-writeable'
 import * as Log from './output/log'
@@ -157,10 +153,11 @@ export default async function build(
     setGlobal('phase', PHASE_PRODUCTION_BUILD)
     setGlobal('distDir', distDir)
 
-    // We enable concurrent features (Fizz-related rendering architecture) when
-    // using React 18 or experimental.
+    // Currently, when the runtime option is set (either `nodejs` or `edge`),
+    // we enable concurrent features (Fizz-related rendering architecture).
+    const runtime = config.experimental.runtime
     const hasReactRoot = shouldUseReactRoot()
-    const hasConcurrentFeatures = hasReactRoot
+    const hasConcurrentFeatures = !!runtime
 
     const hasServerComponents =
       hasReactRoot && !!config.experimental.serverComponents
@@ -625,7 +622,6 @@ export default async function build(
               entrypoints: entrypoints.client,
               rewrites,
               runWebpackSpan,
-              hasReactRoot,
             }),
             getBaseWebpackConfig(dir, {
               buildId,
@@ -637,7 +633,6 @@ export default async function build(
               entrypoints: entrypoints.server,
               rewrites,
               runWebpackSpan,
-              hasReactRoot,
             }),
             hasReactRoot
               ? getBaseWebpackConfig(dir, {
@@ -651,7 +646,6 @@ export default async function build(
                   entrypoints: entrypoints.edgeServer,
                   rewrites,
                   runWebpackSpan,
-                  hasReactRoot,
                 })
               : null,
           ])
@@ -960,22 +954,10 @@ export default async function build(
             let ssgPageRoutes: string[] | null = null
             let isMiddlewareRoute = !!page.match(MIDDLEWARE_ROUTE)
 
-            const pagePath = pagePaths.find((_path) =>
-              _path.startsWith(actualPage + '.')
-            )
-            const pageRuntime =
-              hasConcurrentFeatures && pagePath
-                ? await getPageRuntime(
-                    join(pagesDir, pagePath),
-                    config.experimental.runtime
-                  )
-                : null
-
             if (
               !isMiddlewareRoute &&
               !isReservedPage(page) &&
-              // We currently don't support staic optimization in the Edge runtime.
-              pageRuntime !== 'edge'
+              !hasConcurrentFeatures
             ) {
               try {
                 let isPageStaticSpan =
@@ -1501,7 +1483,10 @@ export default async function build(
 
     const combinedPages = [...staticPages, ...ssgPages]
 
-    if (combinedPages.length > 0 || useStatic404 || useDefaultStatic500) {
+    if (
+      !hasConcurrentFeatures &&
+      (combinedPages.length > 0 || useStatic404 || useDefaultStatic500)
+    ) {
       const staticGenerationSpan = nextBuildSpan.traceChild('static-generation')
       await staticGenerationSpan.traceAsyncFn(async () => {
         detectConflictingPaths(
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index a42abcae003e0a5..b07c42e17557b83 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -48,6 +48,7 @@ import type { Span } from '../trace'
 import { getRawPageExtensions } from './utils'
 import browserslist from 'next/dist/compiled/browserslist'
 import loadJsConfig from './load-jsconfig'
+import { shouldUseReactRoot } from '../server/config'
 import { getMiddlewareSourceMapPlugins } from './webpack/plugins/middleware-source-maps-plugin'
 
 const watchOptions = Object.freeze({
@@ -309,7 +310,6 @@ export default async function getBaseWebpackConfig(
     rewrites,
     isDevFallback = false,
     runWebpackSpan,
-    hasReactRoot,
   }: {
     buildId: string
     config: NextConfigComplete
@@ -323,7 +323,6 @@ export default async function getBaseWebpackConfig(
     rewrites: CustomRoutes['rewrites']
     isDevFallback?: boolean
     runWebpackSpan: Span
-    hasReactRoot: boolean
   }
 ): Promise<webpack.Configuration> {
   const { useTypeScript, jsConfig, resolvedBaseUrl } = await loadJsConfig(
@@ -336,10 +335,10 @@ export default async function getBaseWebpackConfig(
     rewrites.afterFiles.length > 0 ||
     rewrites.fallback.length > 0
   const hasReactRefresh: boolean = dev && !isServer
-
+  const hasReactRoot = shouldUseReactRoot()
   const runtime = config.experimental.runtime
 
-  // Make sure `reactRoot` is enabled when React 18 or experimental is detected.
+  // Make sure reactRoot is enabled when react 18 is detected
   if (hasReactRoot) {
     config.experimental.reactRoot = true
   }
@@ -354,14 +353,14 @@ export default async function getBaseWebpackConfig(
       '`experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18.'
     )
   }
-  if (config.experimental.serverComponents && !hasReactRoot) {
+  if (config.experimental.serverComponents && !runtime) {
     throw new Error(
-      '`experimental.serverComponents` requires React 18 to be installed.'
+      '`experimental.runtime` is required to be set along with `experimental.serverComponents`.'
     )
   }
 
   const targetWeb = isEdgeRuntime || !isServer
-  const hasConcurrentFeatures = hasReactRoot
+  const hasConcurrentFeatures = !!runtime && hasReactRoot
   const hasServerComponents =
     hasConcurrentFeatures && !!config.experimental.serverComponents
   const disableOptimizedLoading = hasConcurrentFeatures
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index c00d17f7276cd09..cd2f3fc315b2e68 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -678,9 +678,13 @@ if (process.env.__NEXT_RSC) {
   } = require('next/dist/compiled/react-server-dom-webpack')
 
   const encoder = new TextEncoder()
+
   let initialServerDataBuffer: string[] | undefined = undefined
   let initialServerDataWriter: WritableStreamDefaultWriter | undefined =
     undefined
+  let initialServerDataLoaded = false
+  let initialServerDataFlushed = false
+
   function nextServerDataCallback(seg: [number, string, string]) {
     if (seg[0] === 0) {
       initialServerDataBuffer = []
@@ -695,24 +699,45 @@ if (process.env.__NEXT_RSC) {
       }
     }
   }
+
+  // There might be race conditions between `nextServerDataRegisterWriter` and
+  // `DOMContentLoaded`. The former will be called when React starts to hydrate
+  // the root, the latter will be called when the DOM is fully loaded.
+  // For streaming, the former is called first due to partial hydration.
+  // For non-streaming, the latter can be called first.
+  // Hence, we use two variables `initialServerDataLoaded` and
+  // `initialServerDataFlushed` to make sure the writer will be closed and
+  // `initialServerDataBuffer` will be cleared in the right time.
   function nextServerDataRegisterWriter(writer: WritableStreamDefaultWriter) {
     if (initialServerDataBuffer) {
       initialServerDataBuffer.forEach((val) => {
         writer.write(encoder.encode(val))
       })
+      if (initialServerDataLoaded && !initialServerDataFlushed) {
+        writer.close()
+        initialServerDataFlushed = true
+        initialServerDataBuffer = undefined
+      }
     }
+
     initialServerDataWriter = writer
   }
+
   // When `DOMContentLoaded`, we can close all pending writers to finish hydration.
-  document.addEventListener(
-    'DOMContentLoaded',
-    function () {
-      if (initialServerDataWriter && !initialServerDataWriter.closed) {
-        initialServerDataWriter.close()
-      }
-    },
-    false
-  )
+  const DOMContentLoaded = function () {
+    if (initialServerDataWriter && !initialServerDataFlushed) {
+      initialServerDataWriter.close()
+      initialServerDataFlushed = true
+      initialServerDataBuffer = undefined
+    }
+    initialServerDataLoaded = true
+  }
+  // It's possible that the DOM is already loaded.
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)
+  } else {
+    DOMContentLoaded()
+  }
 
   const nextServerDataLoadingGlobal = ((self as any).__next_s =
     (self as any).__next_s || [])
@@ -771,9 +796,6 @@ if (process.env.__NEXT_RSC) {
     React.useEffect(() => {
       rscCache.delete(cacheKey)
     })
-    React.useEffect(() => {
-      initialServerDataBuffer = undefined
-    }, [])
     const response = useServerResponse(cacheKey, serialized)
     const root = response.readRoot()
     return root
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index df995262048eeee..937c01ab089cfc3 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -588,7 +588,6 @@ export default async function exportApp(
               nextConfig.experimental.disableOptimizedLoading,
             parentSpanId: pageExportSpan.id,
             httpAgentOptions: nextConfig.httpAgentOptions,
-            serverComponents: nextConfig.experimental.serverComponents,
           })
 
           for (const validation of result.ampValidations || []) {
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 3679b28eebd1d4a..f2e6dbb64f133f0 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -59,7 +59,6 @@ interface ExportPageInput {
   disableOptimizedLoading: any
   parentSpanId: any
   httpAgentOptions: NextConfigComplete['httpAgentOptions']
-  serverComponents?: boolean
 }
 
 interface ExportPageResults {
@@ -107,7 +106,6 @@ export default async function exportPage({
   optimizeCss,
   disableOptimizedLoading,
   httpAgentOptions,
-  serverComponents,
 }: ExportPageInput): Promise<ExportPageResults> {
   setHttpAgentOptions(httpAgentOptions)
   const exportPageSpan = trace('export-page-worker', parentSpanId)
@@ -262,7 +260,7 @@ export default async function exportPage({
           getServerSideProps,
           getStaticProps,
           pageConfig,
-        } = await loadComponents(distDir, page, serverless, serverComponents)
+        } = await loadComponents(distDir, page, serverless)
         const ampState = {
           ampFirst: pageConfig?.amp === true,
           hasQuery: Boolean(query.amp),
@@ -323,12 +321,7 @@ export default async function exportPage({
           throw new Error(`Failed to render serverless page`)
         }
       } else {
-        const components = await loadComponents(
-          distDir,
-          page,
-          serverless,
-          serverComponents
-        )
+        const components = await loadComponents(distDir, page, serverless)
         const ampState = {
           ampFirst: components.pageConfig?.amp === true,
           hasQuery: Boolean(query.amp),
diff --git a/packages/next/package.json b/packages/next/package.json
index 355a8dc0cd55a0f..91ce61279a02b5a 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.1-canary.13",
+    "@next/env": "12.1.1-canary.14",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.1-canary.13",
-    "@next/polyfill-nomodule": "12.1.1-canary.13",
-    "@next/react-dev-overlay": "12.1.1-canary.13",
-    "@next/react-refresh-utils": "12.1.1-canary.13",
-    "@next/swc": "12.1.1-canary.13",
+    "@next/polyfill-module": "12.1.1-canary.14",
+    "@next/polyfill-nomodule": "12.1.1-canary.14",
+    "@next/react-dev-overlay": "12.1.1-canary.14",
+    "@next/react-refresh-utils": "12.1.1-canary.14",
+    "@next/swc": "12.1.1-canary.14",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 72868292fa6aeb6..adc58bf357df7cb 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -585,7 +585,6 @@ export class Head extends Component<
       disableOptimizedLoading,
       optimizeCss,
       optimizeFonts,
-      hasConcurrentFeatures,
     } = this.context
 
     const disableRuntimeJS = unstable_runtimeJS === false
@@ -700,7 +699,7 @@ export class Head extends Component<
 
     return (
       <head {...this.props}>
-        {!hasConcurrentFeatures && this.context.isDevelopment && (
+        {this.context.isDevelopment && (
           <>
             <style
               data-next-hide-fouc
diff --git a/packages/next/server/api-utils/node.ts b/packages/next/server/api-utils/node.ts
index 73f4d6d8cd77641..68f928a23755259 100644
--- a/packages/next/server/api-utils/node.ts
+++ b/packages/next/server/api-utils/node.ts
@@ -31,6 +31,7 @@ import {
   SYMBOL_PREVIEW_DATA,
   RESPONSE_LIMIT_DEFAULT,
 } from './index'
+import { mockRequest } from '../lib/mock-request'
 
 export function tryGetPreviewData(
   req: IncomingMessage | BaseNextRequest,
@@ -149,16 +150,17 @@ export async function parseBody(
   }
 }
 
+type ApiContext = __ApiPreviewProps & {
+  trustHostHeader?: boolean
+  revalidate?: (_req: IncomingMessage, _res: ServerResponse) => Promise<any>
+}
+
 export async function apiResolver(
   req: IncomingMessage,
   res: ServerResponse,
   query: any,
   resolverModule: any,
-  apiContext: __ApiPreviewProps & {
-    trustHostHeader?: boolean
-    hostname?: string
-    port?: number
-  },
+  apiContext: ApiContext,
   propagateError: boolean,
   dev?: boolean,
   page?: string
@@ -277,55 +279,59 @@ export async function apiResolver(
 
 async function unstable_revalidate(
   urlPath: string,
-  req: IncomingMessage | BaseNextRequest,
-  context: {
-    hostname?: string
-    port?: number
-    previewModeId: string
-    trustHostHeader?: boolean
-  }
+  req: IncomingMessage,
+  context: ApiContext
 ) {
-  if (!context.trustHostHeader && (!context.hostname || !context.port)) {
-    throw new Error(
-      `"hostname" and "port" must be provided when starting next to use "unstable_revalidate". See more here https://nextjs.org/docs/advanced-features/custom-server`
-    )
-  }
-
   if (typeof urlPath !== 'string' || !urlPath.startsWith('/')) {
     throw new Error(
       `Invalid urlPath provided to revalidate(), must be a path e.g. /blog/post-1, received ${urlPath}`
     )
   }
 
-  const baseUrl = context.trustHostHeader
-    ? `https://${req.headers.host}`
-    : `http://${context.hostname}:${context.port}`
-
-  const extraHeaders: Record<string, string | undefined> = {}
-
-  if (context.trustHostHeader) {
-    extraHeaders.cookie = req.headers.cookie
-  }
-
   try {
-    const res = await fetch(`${baseUrl}${urlPath}`, {
-      headers: {
-        [PRERENDER_REVALIDATE_HEADER]: context.previewModeId,
-        ...extraHeaders,
-      },
-    })
-
-    // we use the cache header to determine successful revalidate as
-    // a non-200 status code can be returned from a successful revalidate
-    // e.g. notFound: true returns 404 status code but is successful
-    const cacheHeader =
-      res.headers.get('x-vercel-cache') || res.headers.get('x-nextjs-cache')
+    if (context.trustHostHeader) {
+      const res = await fetch(`https://${req.headers.host}${urlPath}`, {
+        headers: {
+          [PRERENDER_REVALIDATE_HEADER]: context.previewModeId,
+          cookie: req.headers.cookie || '',
+        },
+      })
+      // we use the cache header to determine successful revalidate as
+      // a non-200 status code can be returned from a successful revalidate
+      // e.g. notFound: true returns 404 status code but is successful
+      const cacheHeader =
+        res.headers.get('x-vercel-cache') || res.headers.get('x-nextjs-cache')
+
+      if (cacheHeader?.toUpperCase() !== 'REVALIDATED') {
+        throw new Error(`Invalid response ${res.status}`)
+      }
+    } else if (context.revalidate) {
+      const {
+        req: mockReq,
+        res: mockRes,
+        streamPromise,
+      } = mockRequest(
+        urlPath,
+        {
+          [PRERENDER_REVALIDATE_HEADER]: context.previewModeId,
+        },
+        'GET'
+      )
+      await context.revalidate(mockReq, mockRes)
+      await streamPromise
 
-    if (cacheHeader?.toUpperCase() !== 'REVALIDATED') {
-      throw new Error(`Invalid response ${res.status}`)
+      if (mockRes.getHeader('x-nextjs-cache') !== 'REVALIDATED') {
+        throw new Error(`Invalid response ${mockRes.status}`)
+      }
+    } else {
+      throw new Error(
+        `Invariant: required internal revalidate method not passed to api-utils`
+      )
     }
-  } catch (err) {
-    throw new Error(`Failed to revalidate ${urlPath}`)
+  } catch (err: unknown) {
+    throw new Error(
+      `Failed to revalidate ${urlPath}: ${isError(err) ? err.message : err}`
+    )
   }
 }
 
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index b30f365b54ffcf5..bcd58454ab578cf 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -154,7 +154,6 @@ export default class HotReloader {
   private config: NextConfigComplete
   private runtime?: 'nodejs' | 'edge'
   private hasServerComponents: boolean
-  private hasReactRoot: boolean
   public clientStats: webpack5.Stats | null
   public serverStats: webpack5.Stats | null
   private clientError: Error | null = null
@@ -198,9 +197,7 @@ export default class HotReloader {
 
     this.config = config
     this.runtime = config.experimental.runtime
-    this.hasReactRoot = shouldUseReactRoot()
-    this.hasServerComponents =
-      this.hasReactRoot && !!config.experimental.serverComponents
+    this.hasServerComponents = !!config.experimental.serverComponents
     this.previewProps = previewProps
     this.rewrites = rewrites
     this.hotReloaderSpan = trace('hot-reloader', undefined, {
@@ -343,6 +340,8 @@ export default class HotReloader {
           )
         )
 
+      const hasReactRoot = shouldUseReactRoot()
+
       return webpackConfigSpan
         .traceChild('generate-webpack-config')
         .traceAsyncFn(() =>
@@ -357,7 +356,6 @@ export default class HotReloader {
                 rewrites: this.rewrites,
                 entrypoints: entrypoints.client,
                 runWebpackSpan: this.hotReloaderSpan,
-                hasReactRoot: this.hasReactRoot,
               }),
               getBaseWebpackConfig(this.dir, {
                 dev: true,
@@ -368,10 +366,9 @@ export default class HotReloader {
                 rewrites: this.rewrites,
                 entrypoints: entrypoints.server,
                 runWebpackSpan: this.hotReloaderSpan,
-                hasReactRoot: this.hasReactRoot,
               }),
               // The edge runtime is only supported with React root.
-              this.hasReactRoot
+              hasReactRoot
                 ? getBaseWebpackConfig(this.dir, {
                     dev: true,
                     isServer: true,
@@ -382,7 +379,6 @@ export default class HotReloader {
                     rewrites: this.rewrites,
                     entrypoints: entrypoints.edgeServer,
                     runWebpackSpan: this.hotReloaderSpan,
-                    hasReactRoot: this.hasReactRoot,
                   })
                 : null,
             ].filter(Boolean) as webpack.Configuration[]
@@ -421,7 +417,6 @@ export default class HotReloader {
           this.pagesDir
         )
       ).client,
-      hasReactRoot: this.hasReactRoot,
     })
     const fallbackCompiler = webpack(fallbackConfig)
 
diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
index 9adec2dd8a1d3bd..8a84ce7a8bb5838 100644
--- a/packages/next/server/image-optimizer.ts
+++ b/packages/next/server/image-optimizer.ts
@@ -8,7 +8,6 @@ import { IncomingMessage, ServerResponse } from 'http'
 import isAnimated from 'next/dist/compiled/is-animated'
 import contentDisposition from 'next/dist/compiled/content-disposition'
 import { join } from 'path'
-import Stream from 'stream'
 import nodeUrl, { UrlWithParsedQuery } from 'url'
 import { NextConfigComplete } from './config-shared'
 import { processBuffer, decodeBuffer, Operation } from './lib/squoosh/main'
@@ -17,6 +16,7 @@ import { getContentType, getExtension } from './serve-static'
 import chalk from 'next/dist/compiled/chalk'
 import { NextUrlWithParsedQuery } from './request-meta'
 import { IncrementalCacheEntry, IncrementalCacheValue } from './response-cache'
+import { mockRequest } from './lib/mock-request'
 
 type XCacheHeader = 'MISS' | 'HIT' | 'STALE'
 
@@ -307,60 +307,12 @@ export async function imageOptimizer(
     maxAge = getMaxAge(upstreamRes.headers.get('Cache-Control'))
   } else {
     try {
-      const resBuffers: Buffer[] = []
-      const mockRes: any = new Stream.Writable()
-
-      const isStreamFinished = new Promise(function (resolve, reject) {
-        mockRes.on('finish', () => resolve(true))
-        mockRes.on('end', () => resolve(true))
-        mockRes.on('error', (err: any) => reject(err))
-      })
-
-      mockRes.write = (chunk: Buffer | string) => {
-        resBuffers.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk))
-      }
-      mockRes._write = (
-        chunk: Buffer | string,
-        _encoding: string,
-        callback: () => void
-      ) => {
-        mockRes.write(chunk)
-        // According to Node.js documentation, the callback MUST be invoked to signal that
-        // the write completed successfully. If this callback is not invoked, the 'finish' event
-        // will not be emitted.
-        // https://nodejs.org/docs/latest-v16.x/api/stream.html#writable_writechunk-encoding-callback
-        callback()
-      }
-
-      const mockHeaders: Record<string, string | string[]> = {}
-
-      mockRes.writeHead = (_status: any, _headers: any) =>
-        Object.assign(mockHeaders, _headers)
-      mockRes.getHeader = (name: string) => mockHeaders[name.toLowerCase()]
-      mockRes.getHeaders = () => mockHeaders
-      mockRes.getHeaderNames = () => Object.keys(mockHeaders)
-      mockRes.setHeader = (name: string, value: string | string[]) =>
-        (mockHeaders[name.toLowerCase()] = value)
-      mockRes.removeHeader = (name: string) => {
-        delete mockHeaders[name.toLowerCase()]
-      }
-      mockRes._implicitHeader = () => {}
-      mockRes.connection = _res.connection
-      mockRes.finished = false
-      mockRes.statusCode = 200
-
-      const mockReq: any = new Stream.Readable()
-
-      mockReq._read = () => {
-        mockReq.emit('end')
-        mockReq.emit('close')
-        return Buffer.from('')
-      }
-
-      mockReq.headers = _req.headers
-      mockReq.method = _req.method
-      mockReq.url = href
-      mockReq.connection = _req.connection
+      const {
+        resBuffers,
+        req: mockReq,
+        res: mockRes,
+        streamPromise: isStreamFinished,
+      } = mockRequest(href, _req.headers, _req.method || 'GET', _req.connection)
 
       await handleRequest(mockReq, mockRes, nodeUrl.parse(href, true))
       await isStreamFinished
diff --git a/packages/next/server/lib/mock-request.ts b/packages/next/server/lib/mock-request.ts
new file mode 100644
index 000000000000000..5d25ba0ddd105af
--- /dev/null
+++ b/packages/next/server/lib/mock-request.ts
@@ -0,0 +1,70 @@
+import Stream from 'stream'
+
+export function mockRequest(
+  requestUrl: string,
+  requestHeaders: Record<string, string | string[] | undefined>,
+  requestMethod: string,
+  requestConnection?: any
+) {
+  const resBuffers: Buffer[] = []
+  const mockRes: any = new Stream.Writable()
+
+  const isStreamFinished = new Promise(function (resolve, reject) {
+    mockRes.on('finish', () => resolve(true))
+    mockRes.on('end', () => resolve(true))
+    mockRes.on('error', (err: any) => reject(err))
+  })
+
+  mockRes.write = (chunk: Buffer | string) => {
+    resBuffers.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk))
+  }
+  mockRes._write = (
+    chunk: Buffer | string,
+    _encoding: string,
+    callback: () => void
+  ) => {
+    mockRes.write(chunk)
+    // According to Node.js documentation, the callback MUST be invoked to signal that
+    // the write completed successfully. If this callback is not invoked, the 'finish' event
+    // will not be emitted.
+    // https://nodejs.org/docs/latest-v16.x/api/stream.html#writable_writechunk-encoding-callback
+    callback()
+  }
+
+  const mockHeaders: Record<string, string | string[]> = {}
+
+  mockRes.writeHead = (_status: any, _headers: any) =>
+    Object.assign(mockHeaders, _headers)
+  mockRes.getHeader = (name: string) => mockHeaders[name.toLowerCase()]
+  mockRes.getHeaders = () => mockHeaders
+  mockRes.getHeaderNames = () => Object.keys(mockHeaders)
+  mockRes.setHeader = (name: string, value: string | string[]) =>
+    (mockHeaders[name.toLowerCase()] = value)
+  mockRes.removeHeader = (name: string) => {
+    delete mockHeaders[name.toLowerCase()]
+  }
+  mockRes._implicitHeader = () => {}
+  mockRes.connection = requestConnection
+  mockRes.finished = false
+  mockRes.statusCode = 200
+
+  const mockReq: any = new Stream.Readable()
+
+  mockReq._read = () => {
+    mockReq.emit('end')
+    mockReq.emit('close')
+    return Buffer.from('')
+  }
+
+  mockReq.headers = requestHeaders
+  mockReq.method = requestMethod
+  mockReq.url = requestUrl
+  mockReq.connection = requestConnection
+
+  return {
+    resBuffers,
+    req: mockReq,
+    res: mockRes,
+    streamPromise: isStreamFinished,
+  }
+}
diff --git a/packages/next/server/load-components.ts b/packages/next/server/load-components.ts
index 361f0183899d550..ae247d9ea66fdbe 100644
--- a/packages/next/server/load-components.ts
+++ b/packages/next/server/load-components.ts
@@ -6,7 +6,6 @@ import type {
 import {
   BUILD_MANIFEST,
   REACT_LOADABLE_MANIFEST,
-  MIDDLEWARE_FLIGHT_MANIFEST,
 } from '../shared/lib/constants'
 import { join } from 'path'
 import { requirePage } from './require'
@@ -31,7 +30,6 @@ export type LoadComponentsReturnType = {
   pageConfig: PageConfig
   buildManifest: BuildManifest
   reactLoadableManifest: ReactLoadableManifest
-  serverComponentManifest?: any | null
   Document: DocumentType
   App: AppType
   getStaticProps?: GetStaticProps
@@ -63,8 +61,7 @@ export async function loadDefaultErrorComponents(distDir: string) {
 export async function loadComponents(
   distDir: string,
   pathname: string,
-  serverless: boolean,
-  serverComponents?: boolean
+  serverless: boolean
 ): Promise<LoadComponentsReturnType> {
   if (serverless) {
     const ComponentMod = await requirePage(pathname, distDir, serverless)
@@ -105,14 +102,10 @@ export async function loadComponents(
     requirePage(pathname, distDir, serverless),
   ])
 
-  const [buildManifest, reactLoadableManifest, serverComponentManifest] =
-    await Promise.all([
-      require(join(distDir, BUILD_MANIFEST)),
-      require(join(distDir, REACT_LOADABLE_MANIFEST)),
-      serverComponents
-        ? require(join(distDir, 'server', MIDDLEWARE_FLIGHT_MANIFEST + '.json'))
-        : null,
-    ])
+  const [buildManifest, reactLoadableManifest] = await Promise.all([
+    require(join(distDir, BUILD_MANIFEST)),
+    require(join(distDir, REACT_LOADABLE_MANIFEST)),
+  ])
 
   const Component = interopDefault(ComponentMod)
   const Document = interopDefault(DocumentMod)
@@ -132,6 +125,5 @@ export async function loadComponents(
     getServerSideProps,
     getStaticProps,
     getStaticPaths,
-    serverComponentManifest,
   }
 }
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index 2455112a313d79b..d7fa9a4d5f8c74a 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -554,8 +554,11 @@ export default class NextNodeServer extends BaseServer {
       pageModule,
       {
         ...this.renderOpts.previewProps,
-        port: this.port,
-        hostname: this.hostname,
+        revalidate: (newReq: IncomingMessage, newRes: ServerResponse) =>
+          this.getRequestHandler()(
+            new NodeNextRequest(newReq),
+            new NodeNextResponse(newRes)
+          ),
         // internal config so is not typed
         trustHostHeader: (this.nextConfig.experimental as any).trustHostHeader,
       },
@@ -693,7 +696,7 @@ export default class NextNodeServer extends BaseServer {
   }
 
   protected getServerComponentManifest() {
-    if (!this.nextConfig.experimental.serverComponents) return undefined
+    if (!this.nextConfig.experimental.runtime) return undefined
     return require(join(
       this.distDir,
       'server',
diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts
new file mode 100644
index 000000000000000..b8b1cc6ff98da83
--- /dev/null
+++ b/packages/next/server/node-web-streams-helper.ts
@@ -0,0 +1,359 @@
+export function readableStreamTee<T = any>(
+  readable: ReadableStream<T>
+): [ReadableStream<T>, ReadableStream<T>] {
+  const transformStream = new TransformStream()
+  const transformStream2 = new TransformStream()
+  const writer = transformStream.writable.getWriter()
+  const writer2 = transformStream2.writable.getWriter()
+
+  const reader = readable.getReader()
+  function read() {
+    reader.read().then(({ done, value }) => {
+      if (done) {
+        writer.close()
+        writer2.close()
+        return
+      }
+      writer.write(value)
+      writer2.write(value)
+      read()
+    })
+  }
+  read()
+
+  return [transformStream.readable, transformStream2.readable]
+}
+
+export function pipeTo<T>(
+  readable: ReadableStream<T>,
+  writable: WritableStream<T>,
+  options?: { preventClose: boolean }
+) {
+  let resolver: () => void
+  const promise = new Promise<void>((resolve) => (resolver = resolve))
+
+  const reader = readable.getReader()
+  const writer = writable.getWriter()
+  function process() {
+    reader.read().then(({ done, value }) => {
+      if (done) {
+        if (options?.preventClose) {
+          writer.releaseLock()
+        } else {
+          writer.close()
+        }
+        resolver()
+      } else {
+        writer.write(value)
+        process()
+      }
+    })
+  }
+  process()
+  return promise
+}
+
+export function pipeThrough<Input, Output>(
+  readable: ReadableStream<Input>,
+  transformStream: TransformStream<Input, Output>
+) {
+  pipeTo(readable, transformStream.writable)
+  return transformStream.readable
+}
+
+export function chainStreams<T>(
+  streams: ReadableStream<T>[]
+): ReadableStream<T> {
+  const { readable, writable } = new TransformStream()
+
+  let promise = Promise.resolve()
+  for (let i = 0; i < streams.length; ++i) {
+    promise = promise.then(() =>
+      pipeTo(streams[i], writable, {
+        preventClose: i + 1 < streams.length,
+      })
+    )
+  }
+
+  return readable
+}
+
+export function streamFromArray(strings: string[]): ReadableStream<Uint8Array> {
+  // Note: we use a TransformStream here instead of instantiating a ReadableStream
+  // because the built-in ReadableStream polyfill runs strings through TextEncoder.
+  const { readable, writable } = new TransformStream()
+
+  const writer = writable.getWriter()
+  strings.forEach((str) => writer.write(encodeText(str)))
+  writer.close()
+
+  return readable
+}
+
+export async function streamToString(
+  stream: ReadableStream<Uint8Array>
+): Promise<string> {
+  const reader = stream.getReader()
+  let bufferedString = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+
+    if (done) {
+      return bufferedString
+    }
+
+    bufferedString += decodeText(value)
+  }
+}
+
+export function encodeText(input: string) {
+  return new TextEncoder().encode(input)
+}
+
+export function decodeText(input?: Uint8Array) {
+  return new TextDecoder().decode(input)
+}
+
+export function createTransformStream<Input, Output>({
+  flush,
+  transform,
+}: {
+  flush?: (
+    controller: TransformStreamDefaultController<Output>
+  ) => Promise<void> | void
+  transform?: (
+    chunk: Input,
+    controller: TransformStreamDefaultController<Output>
+  ) => Promise<void> | void
+}): TransformStream<Input, Output> {
+  const source = new TransformStream()
+  const sink = new TransformStream()
+  const reader = source.readable.getReader()
+  const writer = sink.writable.getWriter()
+
+  const controller = {
+    enqueue(chunk: Output) {
+      writer.write(chunk)
+    },
+
+    error(reason: Error) {
+      writer.abort(reason)
+      reader.cancel()
+    },
+
+    terminate() {
+      writer.close()
+      reader.cancel()
+    },
+
+    get desiredSize() {
+      return writer.desiredSize
+    },
+  }
+
+  ;(async () => {
+    try {
+      while (true) {
+        const { done, value } = await reader.read()
+
+        if (done) {
+          const maybePromise = flush?.(controller)
+          if (maybePromise) {
+            await maybePromise
+          }
+          writer.close()
+          return
+        }
+
+        if (transform) {
+          const maybePromise = transform(value, controller)
+          if (maybePromise) {
+            await maybePromise
+          }
+        } else {
+          controller.enqueue(value)
+        }
+      }
+    } catch (err) {
+      writer.abort(err)
+    }
+  })()
+
+  return {
+    readable: sink.readable,
+    writable: source.writable,
+  }
+}
+
+export function createBufferedTransformStream(): TransformStream<
+  Uint8Array,
+  Uint8Array
+> {
+  let bufferedString = ''
+  let pendingFlush: Promise<void> | null = null
+
+  const flushBuffer = (controller: TransformStreamDefaultController) => {
+    if (!pendingFlush) {
+      pendingFlush = new Promise((resolve) => {
+        setTimeout(() => {
+          controller.enqueue(encodeText(bufferedString))
+          bufferedString = ''
+          pendingFlush = null
+          resolve()
+        }, 0)
+      })
+    }
+    return pendingFlush
+  }
+
+  return createTransformStream({
+    transform(chunk, controller) {
+      bufferedString += decodeText(chunk)
+      flushBuffer(controller)
+    },
+
+    flush() {
+      if (pendingFlush) {
+        return pendingFlush
+      }
+    },
+  })
+}
+
+export function createFlushEffectStream(
+  handleFlushEffect: () => Promise<string>
+): TransformStream<Uint8Array, Uint8Array> {
+  return createTransformStream({
+    async transform(chunk, controller) {
+      const extraChunk = await handleFlushEffect()
+      // those should flush together at once
+      controller.enqueue(encodeText(extraChunk + decodeText(chunk)))
+    },
+  })
+}
+
+export async function renderToStream({
+  ReactDOMServer,
+  element,
+  suffix,
+  dataStream,
+  generateStaticHTML,
+  flushEffectHandler,
+}: {
+  ReactDOMServer: typeof import('react-dom/server')
+  element: React.ReactElement
+  suffix?: string
+  dataStream?: ReadableStream<Uint8Array>
+  generateStaticHTML: boolean
+  flushEffectHandler?: () => Promise<string>
+}): Promise<ReadableStream<Uint8Array>> {
+  const closeTag = '</body></html>'
+  const suffixUnclosed = suffix ? suffix.split(closeTag)[0] : null
+  const renderStream: ReadableStream<Uint8Array> & {
+    allReady?: Promise<void>
+  } = await (ReactDOMServer as any).renderToReadableStream(element)
+
+  if (generateStaticHTML) {
+    await renderStream.allReady
+  }
+
+  const transforms: Array<TransformStream<Uint8Array, Uint8Array>> = [
+    createBufferedTransformStream(),
+    flushEffectHandler ? createFlushEffectStream(flushEffectHandler) : null,
+    suffixUnclosed != null ? createPrefixStream(suffixUnclosed) : null,
+    dataStream ? createInlineDataStream(dataStream) : null,
+    suffixUnclosed != null ? createSuffixStream(closeTag) : null,
+  ].filter(Boolean) as any
+
+  return transforms.reduce(
+    (readable, transform) => pipeThrough(readable, transform),
+    renderStream
+  )
+}
+
+export function createSuffixStream(
+  suffix: string
+): TransformStream<Uint8Array, Uint8Array> {
+  return createTransformStream({
+    flush(controller) {
+      if (suffix) {
+        controller.enqueue(encodeText(suffix))
+      }
+    },
+  })
+}
+
+export function createPrefixStream(
+  prefix: string
+): TransformStream<Uint8Array, Uint8Array> {
+  let prefixFlushed = false
+  let prefixPrefixFlushFinished: Promise<void> | null = null
+  return createTransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk)
+      if (!prefixFlushed && prefix) {
+        prefixFlushed = true
+        prefixPrefixFlushFinished = new Promise((res) => {
+          // NOTE: streaming flush
+          // Enqueue prefix part before the major chunks are enqueued so that
+          // prefix won't be flushed too early to interrupt the data stream
+          setTimeout(() => {
+            controller.enqueue(encodeText(prefix))
+            res()
+          })
+        })
+      }
+    },
+    flush(controller) {
+      if (prefixPrefixFlushFinished) return prefixPrefixFlushFinished
+      if (!prefixFlushed && prefix) {
+        prefixFlushed = true
+        controller.enqueue(encodeText(prefix))
+      }
+    },
+  })
+}
+
+export function createInlineDataStream(
+  dataStream: ReadableStream<Uint8Array>
+): TransformStream<Uint8Array, Uint8Array> {
+  let dataStreamFinished: Promise<void> | null = null
+  return createTransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk)
+
+      if (!dataStreamFinished) {
+        const dataStreamReader = dataStream.getReader()
+
+        // NOTE: streaming flush
+        // We are buffering here for the inlined data stream because the
+        // "shell" stream might be chunkenized again by the underlying stream
+        // implementation, e.g. with a specific high-water mark. To ensure it's
+        // the safe timing to pipe the data stream, this extra tick is
+        // necessary.
+        dataStreamFinished = new Promise((res) =>
+          setTimeout(async () => {
+            try {
+              while (true) {
+                const { done, value } = await dataStreamReader.read()
+                if (done) {
+                  return res()
+                }
+                controller.enqueue(value)
+              }
+            } catch (err) {
+              controller.error(err)
+            }
+            res()
+          }, 0)
+        )
+      }
+    },
+    flush() {
+      if (dataStreamFinished) {
+        return dataStreamFinished
+      }
+    },
+  })
+}
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 190cfadc6b27987..c13d5ff65c1283e 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -64,7 +64,17 @@ import {
 } from '../lib/load-custom-routes'
 import RenderResult from './render-result'
 import isError from '../lib/is-error'
-import { readableStreamTee } from './web/utils'
+import {
+  readableStreamTee,
+  encodeText,
+  decodeText,
+  pipeThrough,
+  streamFromArray,
+  streamToString,
+  chainStreams,
+  createBufferedTransformStream,
+  renderToStream,
+} from './node-web-streams-helper'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { FlushEffectsContext } from '../shared/lib/flush-effects'
 
@@ -449,13 +459,13 @@ export async function renderToHTML(
     devOnlyCacheBusterQueryString,
     supportsDynamicHTML,
     images,
-    reactRoot,
-    runtime: globalRuntime,
+    // reactRoot,
+    runtime,
     ComponentMod,
     AppMod,
   } = renderOpts
 
-  const hasConcurrentFeatures = reactRoot
+  const hasConcurrentFeatures = !!runtime
 
   let Document = renderOpts.Document
   const OriginalComponent = renderOpts.Component
@@ -464,7 +474,7 @@ export async function renderToHTML(
   const isServerComponent =
     !!serverComponentManifest &&
     hasConcurrentFeatures &&
-    !!ComponentMod.__next_rsc__
+    ComponentMod.__next_rsc__
 
   let Component: React.ComponentType<{}> | ((props: any) => JSX.Element) =
     renderOpts.Component
@@ -1216,7 +1226,7 @@ export async function renderToHTML(
     return inAmpMode ? children : <div id="__next">{children}</div>
   }
 
-  const ReactDOMServer = reactRoot
+  const ReactDOMServer = hasConcurrentFeatures
     ? require('react-dom/server.browser')
     : require('react-dom/server')
 
@@ -1243,7 +1253,7 @@ export async function renderToHTML(
       | typeof Document
       | undefined
 
-    if (process.browser && Document.getInitialProps) {
+    if (runtime === 'edge' && Document.getInitialProps) {
       // In the Edge runtime, `Document.getInitialProps` isn't supported.
       // We throw an error here if it's customized.
       if (!builtinDocument) {
@@ -1329,8 +1339,7 @@ export async function renderToHTML(
         ) : (
           <Body>
             <AppContainerWithIsomorphicFiberStructure>
-              {isServerComponent && AppMod.__next_rsc__ ? (
-                // _app.server.js is used.
+              {renderOpts.serverComponents && AppMod.__next_rsc__ ? (
                 <Component {...props.pageProps} router={router} />
               ) : (
                 <App {...props} Component={Component} router={router} />
@@ -1340,7 +1349,7 @@ export async function renderToHTML(
         )
       }
 
-      if (reactRoot) {
+      if (hasConcurrentFeatures) {
         bodyResult = async (suffix: string) => {
           // this must be called inside bodyResult so appWrappers is
           // up to date when getWrappedApp is called
@@ -1362,6 +1371,7 @@ export async function renderToHTML(
               ),
               generateStaticHTML: true,
             })
+
             const flushed = await streamToString(flushEffectStream)
             return flushed
           }
@@ -1489,8 +1499,7 @@ export async function renderToHTML(
     optimizeCss: renderOpts.optimizeCss,
     optimizeFonts: renderOpts.optimizeFonts,
     nextScriptWorkers: renderOpts.nextScriptWorkers,
-    runtime: globalRuntime,
-    hasConcurrentFeatures,
+    runtime,
   }
 
   const document = (
@@ -1638,335 +1647,3 @@ function serializeError(
     statusCode: 500,
   }
 }
-
-function createTransformStream<Input, Output>({
-  flush,
-  transform,
-}: {
-  flush?: (
-    controller: TransformStreamDefaultController<Output>
-  ) => Promise<void> | void
-  transform?: (
-    chunk: Input,
-    controller: TransformStreamDefaultController<Output>
-  ) => Promise<void> | void
-}): TransformStream<Input, Output> {
-  const source = new TransformStream()
-  const sink = new TransformStream()
-  const reader = source.readable.getReader()
-  const writer = sink.writable.getWriter()
-
-  const controller = {
-    enqueue(chunk: Output) {
-      writer.write(chunk)
-    },
-
-    error(reason: Error) {
-      writer.abort(reason)
-      reader.cancel()
-    },
-
-    terminate() {
-      writer.close()
-      reader.cancel()
-    },
-
-    get desiredSize() {
-      return writer.desiredSize
-    },
-  }
-
-  ;(async () => {
-    try {
-      while (true) {
-        const { done, value } = await reader.read()
-
-        if (done) {
-          const maybePromise = flush?.(controller)
-          if (maybePromise) {
-            await maybePromise
-          }
-          writer.close()
-          return
-        }
-
-        if (transform) {
-          const maybePromise = transform(value, controller)
-          if (maybePromise) {
-            await maybePromise
-          }
-        } else {
-          controller.enqueue(value)
-        }
-      }
-    } catch (err) {
-      writer.abort(err)
-    }
-  })()
-
-  return {
-    readable: sink.readable,
-    writable: source.writable,
-  }
-}
-
-function createBufferedTransformStream(): TransformStream<
-  Uint8Array,
-  Uint8Array
-> {
-  let bufferedString = ''
-  let pendingFlush: Promise<void> | null = null
-
-  const flushBuffer = (controller: TransformStreamDefaultController) => {
-    if (!pendingFlush) {
-      pendingFlush = new Promise((resolve) => {
-        setTimeout(() => {
-          controller.enqueue(encodeText(bufferedString))
-          bufferedString = ''
-          pendingFlush = null
-          resolve()
-        }, 0)
-      })
-    }
-    return pendingFlush
-  }
-
-  return createTransformStream({
-    transform(chunk, controller) {
-      bufferedString += decodeText(chunk)
-      flushBuffer(controller)
-    },
-
-    flush() {
-      if (pendingFlush) {
-        return pendingFlush
-      }
-    },
-  })
-}
-
-function createFlushEffectStream(
-  handleFlushEffect: () => Promise<string>
-): TransformStream<Uint8Array, Uint8Array> {
-  return createTransformStream({
-    async transform(chunk, controller) {
-      const extraChunk = await handleFlushEffect()
-      // those should flush together at once
-      controller.enqueue(encodeText(extraChunk + decodeText(chunk)))
-    },
-  })
-}
-
-async function renderToStream({
-  ReactDOMServer,
-  element,
-  suffix,
-  dataStream,
-  generateStaticHTML,
-  flushEffectHandler,
-}: {
-  ReactDOMServer: typeof import('react-dom/server')
-  element: React.ReactElement
-  suffix?: string
-  dataStream?: ReadableStream<Uint8Array>
-  generateStaticHTML: boolean
-  flushEffectHandler?: () => Promise<string>
-}): Promise<ReadableStream<Uint8Array>> {
-  const closeTag = '</body></html>'
-  const suffixUnclosed = suffix ? suffix.split(closeTag)[0] : null
-  const renderStream: ReadableStream<Uint8Array> & {
-    allReady?: Promise<void>
-  } = await (ReactDOMServer as any).renderToReadableStream(element)
-
-  if (generateStaticHTML) {
-    await renderStream.allReady
-  }
-
-  const transforms: Array<TransformStream<Uint8Array, Uint8Array>> = [
-    createBufferedTransformStream(),
-    flushEffectHandler ? createFlushEffectStream(flushEffectHandler) : null,
-    suffixUnclosed != null ? createPrefixStream(suffixUnclosed) : null,
-    dataStream ? createInlineDataStream(dataStream) : null,
-    suffixUnclosed != null ? createSuffixStream(closeTag) : null,
-  ].filter(Boolean) as any
-
-  return transforms.reduce(
-    (readable, transform) => pipeThrough(readable, transform),
-    renderStream
-  )
-}
-
-function encodeText(input: string) {
-  return new TextEncoder().encode(input)
-}
-
-function decodeText(input?: Uint8Array) {
-  return new TextDecoder().decode(input)
-}
-
-function createSuffixStream(
-  suffix: string
-): TransformStream<Uint8Array, Uint8Array> {
-  return createTransformStream({
-    flush(controller) {
-      if (suffix) {
-        controller.enqueue(encodeText(suffix))
-      }
-    },
-  })
-}
-
-function createPrefixStream(
-  prefix: string
-): TransformStream<Uint8Array, Uint8Array> {
-  let prefixFlushed = false
-  let prefixPrefixFlushFinished: Promise<void> | null = null
-  return createTransformStream({
-    transform(chunk, controller) {
-      controller.enqueue(chunk)
-      if (!prefixFlushed && prefix) {
-        prefixFlushed = true
-        prefixPrefixFlushFinished = new Promise((res) => {
-          // NOTE: streaming flush
-          // Enqueue prefix part before the major chunks are enqueued so that
-          // prefix won't be flushed too early to interrupt the data stream
-          setTimeout(() => {
-            controller.enqueue(encodeText(prefix))
-            res()
-          })
-        })
-      }
-    },
-    flush(controller) {
-      if (prefixPrefixFlushFinished) return prefixPrefixFlushFinished
-      if (!prefixFlushed && prefix) {
-        prefixFlushed = true
-        controller.enqueue(encodeText(prefix))
-      }
-    },
-  })
-}
-
-function createInlineDataStream(
-  dataStream: ReadableStream<Uint8Array>
-): TransformStream<Uint8Array, Uint8Array> {
-  let dataStreamFinished: Promise<void> | null = null
-  return createTransformStream({
-    transform(chunk, controller) {
-      controller.enqueue(chunk)
-
-      if (!dataStreamFinished) {
-        const dataStreamReader = dataStream.getReader()
-
-        // NOTE: streaming flush
-        // We are buffering here for the inlined data stream because the
-        // "shell" stream might be chunkenized again by the underlying stream
-        // implementation, e.g. with a specific high-water mark. To ensure it's
-        // the safe timing to pipe the data stream, this extra tick is
-        // necessary.
-        dataStreamFinished = new Promise((res) =>
-          setTimeout(async () => {
-            try {
-              while (true) {
-                const { done, value } = await dataStreamReader.read()
-                if (done) {
-                  return res()
-                }
-                controller.enqueue(value)
-              }
-            } catch (err) {
-              controller.error(err)
-            }
-            res()
-          }, 0)
-        )
-      }
-    },
-    flush() {
-      if (dataStreamFinished) {
-        return dataStreamFinished
-      }
-    },
-  })
-}
-
-function pipeTo<T>(
-  readable: ReadableStream<T>,
-  writable: WritableStream<T>,
-  options?: { preventClose: boolean }
-) {
-  let resolver: () => void
-  const promise = new Promise<void>((resolve) => (resolver = resolve))
-
-  const reader = readable.getReader()
-  const writer = writable.getWriter()
-  function process() {
-    reader.read().then(({ done, value }) => {
-      if (done) {
-        if (options?.preventClose) {
-          writer.releaseLock()
-        } else {
-          writer.close()
-        }
-        resolver()
-      } else {
-        writer.write(value)
-        process()
-      }
-    })
-  }
-  process()
-  return promise
-}
-
-function pipeThrough<Input, Output>(
-  readable: ReadableStream<Input>,
-  transformStream: TransformStream<Input, Output>
-) {
-  pipeTo(readable, transformStream.writable)
-  return transformStream.readable
-}
-
-function chainStreams<T>(streams: ReadableStream<T>[]): ReadableStream<T> {
-  const { readable, writable } = new TransformStream()
-
-  let promise = Promise.resolve()
-  for (let i = 0; i < streams.length; ++i) {
-    promise = promise.then(() =>
-      pipeTo(streams[i], writable, {
-        preventClose: i + 1 < streams.length,
-      })
-    )
-  }
-
-  return readable
-}
-
-function streamFromArray(strings: string[]): ReadableStream<Uint8Array> {
-  // Note: we use a TransformStream here instead of instantiating a ReadableStream
-  // because the built-in ReadableStream polyfill runs strings through TextEncoder.
-  const { readable, writable } = new TransformStream()
-
-  const writer = writable.getWriter()
-  strings.forEach((str) => writer.write(encodeText(str)))
-  writer.close()
-
-  return readable
-}
-
-async function streamToString(
-  stream: ReadableStream<Uint8Array>
-): Promise<string> {
-  const reader = stream.getReader()
-  let bufferedString = ''
-
-  while (true) {
-    const { done, value } = await reader.read()
-
-    if (done) {
-      return bufferedString
-    }
-
-    bufferedString += decodeText(value)
-  }
-}
diff --git a/packages/next/server/web/utils.ts b/packages/next/server/web/utils.ts
index a795ec35e144e42..864721bb3ab40c1 100644
--- a/packages/next/server/web/utils.ts
+++ b/packages/next/server/web/utils.ts
@@ -14,32 +14,6 @@ export async function* streamToIterator<T>(
   reader.releaseLock()
 }
 
-export function readableStreamTee<T = any>(
-  readable: ReadableStream<T>
-): [ReadableStream<T>, ReadableStream<T>] {
-  const transformStream = new TransformStream()
-  const transformStream2 = new TransformStream()
-  const writer = transformStream.writable.getWriter()
-  const writer2 = transformStream2.writable.getWriter()
-
-  const reader = readable.getReader()
-  function read() {
-    reader.read().then(({ done, value }) => {
-      if (done) {
-        writer.close()
-        writer2.close()
-        return
-      }
-      writer.write(value)
-      writer2.write(value)
-      read()
-    })
-  }
-  read()
-
-  return [transformStream.readable, transformStream2.readable]
-}
-
 export function notImplemented(name: string, method: string): any {
   throw new Error(
     `Failed to get the '${method}' property on '${name}': the property is not implemented`
diff --git a/packages/next/shared/lib/html-context.ts b/packages/next/shared/lib/html-context.ts
index b069fca0f49f9d1..0a4455715361e95 100644
--- a/packages/next/shared/lib/html-context.ts
+++ b/packages/next/shared/lib/html-context.ts
@@ -38,7 +38,6 @@ export type HtmlProps = {
   optimizeFonts?: boolean
   nextScriptWorkers?: boolean
   runtime?: 'edge' | 'nodejs'
-  hasConcurrentFeatures?: boolean
 }
 
 export const HtmlContext = createContext<HtmlProps>(null as any)
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 507779634a8ee20..19af781d08e37ce 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 8c6b47de2f60a3c..5ce3467fc42e0b6 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "12.1.1-canary.13",
+  "version": "12.1.1-canary.14",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/test/e2e/yarn-pnp/test/utils.ts b/test/e2e/yarn-pnp/test/utils.ts
index 57ceb10c050e6be..976a339e5fb080c 100644
--- a/test/e2e/yarn-pnp/test/utils.ts
+++ b/test/e2e/yarn-pnp/test/utils.ts
@@ -7,49 +7,54 @@ import { NextInstance } from 'test/lib/next-modes/base'
 jest.setTimeout(2 * 60 * 1000)
 
 export function runTests(example = '') {
-  let next: NextInstance
+  const versionParts = process.versions.node.split('.').map((i) => Number(i))
 
-  beforeAll(async () => {
-    const srcDir = join(__dirname, '../../../../examples', example)
-    const srcFiles = await fs.readdir(srcDir)
+  if (
+    versionParts[0] > 16 ||
+    (versionParts[0] === 16 && versionParts[1] >= 14)
+  ) {
+    let next: NextInstance
 
-    const packageJson = await fs.readJson(join(srcDir, 'package.json'))
+    beforeAll(async () => {
+      const srcDir = join(__dirname, '../../../../examples', example)
+      const srcFiles = await fs.readdir(srcDir)
 
-    next = await createNext({
-      files: srcFiles.reduce((prev, file) => {
-        if (file !== 'package.json') {
-          prev[file] = new FileRef(join(srcDir, file))
-        }
-        return prev
-      }, {} as { [key: string]: FileRef }),
-      dependencies: {
-        ...packageJson.dependencies,
-        ...packageJson.devDependencies,
-      },
-      installCommand: ({ dependencies }) => {
-        const pkgs = Object.keys(dependencies).reduce((prev, cur) => {
-          prev.push(`${cur}@${dependencies[cur]}`)
+      const packageJson = await fs.readJson(join(srcDir, 'package.json'))
+
+      next = await createNext({
+        files: srcFiles.reduce((prev, file) => {
+          if (file !== 'package.json') {
+            prev[file] = new FileRef(join(srcDir, file))
+          }
           return prev
-        }, [] as string[])
-        return `yarn set version 3.1.1 && yarn config set enableGlobalCache true && yarn config set compressionLevel 0 && yarn add ${pkgs.join(
-          ' '
-        )}`
-      },
-      buildCommand: `yarn next build --no-lint`,
-      startCommand: (global as any).isNextDev ? `yarn next` : `yarn next start`,
+        }, {} as { [key: string]: FileRef }),
+        dependencies: {
+          ...packageJson.dependencies,
+          ...packageJson.devDependencies,
+        },
+        installCommand: ({ dependencies }) => {
+          const pkgs = Object.keys(dependencies).reduce((prev, cur) => {
+            prev.push(`${cur}@${dependencies[cur]}`)
+            return prev
+          }, [] as string[])
+          return `yarn set version berry && yarn config set enableGlobalCache true && yarn config set compressionLevel 0 && yarn add ${pkgs.join(
+            ' '
+          )}`
+        },
+        buildCommand: `yarn next build --no-lint`,
+        startCommand: (global as any).isNextDev
+          ? `yarn next`
+          : `yarn next start`,
+      })
     })
-  })
-  afterAll(() => next?.destroy())
-
-  it('should warn on not fully supported node versions', async () => {
-    expect(next.cliOutput).toContain(
-      'Node.js 16.14+ is required for Yarn PnP 3.20+. More info'
-    )
-  })
+    afterAll(() => next?.destroy())
 
-  it(`should compile and serve the index page correctly ${example}`, async () => {
-    const res = await fetchViaHTTP(next.url, '/')
-    expect(res.status).toBe(200)
-    expect(await res.text()).toContain('<html')
-  })
+    it(`should compile and serve the index page correctly ${example}`, async () => {
+      const res = await fetchViaHTTP(next.url, '/')
+      expect(res.status).toBe(200)
+      expect(await res.text()).toContain('<html')
+    })
+  } else {
+    it('should not run PnP test for older node versions', () => {})
+  }
 }
diff --git a/test/integration/react-18-invalid-config/index.test.js b/test/integration/react-18-invalid-config/index.test.js
index 9372f0f199f4d52..e0096a0b3502361 100644
--- a/test/integration/react-18-invalid-config/index.test.js
+++ b/test/integration/react-18-invalid-config/index.test.js
@@ -25,6 +25,19 @@ describe('Invalid react 18 webpack config', () => {
     )
   })
 
+  it('should require `experimental.runtime` for server components', async () => {
+    writeNextConfig({
+      reactRoot: true,
+      serverComponents: true,
+    })
+    const { stderr } = await nextBuild(appDir, [], { stderr: true })
+    nextConfig.restore()
+
+    expect(stderr).toContain(
+      '`experimental.runtime` is required to be set along with `experimental.serverComponents`.'
+    )
+  })
+
   it('should warn user when not using react 18 and `experimental.reactRoot` is enabled', async () => {
     const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
     await fs.mkdirp(reactDomPackagePah)
diff --git a/test/integration/react-18/app/pages/suspense/no-preload.js b/test/integration/react-18/app/pages/suspense/no-preload.js
index 8ae8c7c599f2eef..aaf54e244118fff 100644
--- a/test/integration/react-18/app/pages/suspense/no-preload.js
+++ b/test/integration/react-18/app/pages/suspense/no-preload.js
@@ -2,7 +2,6 @@ import { Suspense } from 'react'
 import dynamic from 'next/dynamic'
 
 const Bar = dynamic(() => import('../../components/bar'), {
-  ssr: false,
   suspense: true,
   // Explicitly declare loaded modules.
   // For suspense cases, they'll be ignored.
@@ -15,7 +14,7 @@ const Bar = dynamic(() => import('../../components/bar'), {
 
 export default function NoPreload() {
   return (
-    <Suspense fallback={'fallback'}>
+    <Suspense fallback={'rab'}>
       <Bar />
     </Suspense>
   )
diff --git a/test/integration/react-18/test/basics.js b/test/integration/react-18/test/basics.js
index bc63d2ad4f0f5d1..debbad85a56b520 100644
--- a/test/integration/react-18/test/basics.js
+++ b/test/integration/react-18/test/basics.js
@@ -31,7 +31,7 @@ export default (context) => {
     const nextData = JSON.parse($('#__NEXT_DATA__').text())
     const content = $('#__next').text()
     // <Bar> is suspended
-    expect(content).toBe('fallback')
+    expect(content).toBe('rab')
     expect(nextData.dynamicIds).toBeUndefined()
   })
 
diff --git a/test/integration/react-18/test/blocking.js b/test/integration/react-18/test/blocking.js
index 0db4aacd6cf971c..c4feeb2e8a301f6 100644
--- a/test/integration/react-18/test/blocking.js
+++ b/test/integration/react-18/test/blocking.js
@@ -8,16 +8,15 @@ export default (context, render) => {
     return cheerio.load(html)
   }
 
-  it('should render fallback on server side if suspense without ssr', async () => {
+  it('should render fallback on server side if suspense without preload', async () => {
     const $ = await get$('/suspense/no-preload')
     const nextData = JSON.parse($('#__NEXT_DATA__').text())
     const content = $('#__next').text()
-    expect(content).toBe('fallback')
+    expect(content).toBe('rab')
     expect(nextData.dynamicIds).toBeUndefined()
   })
 
-  // Testing the same thing as above.
-  it.skip('should render import fallback on server side if suspended without ssr', async () => {
+  it('should render fallback on server side if suspended on server with preload', async () => {
     const $ = await get$('/suspense/thrown')
     const html = $('body').html()
     expect(html).toContain('loading')
diff --git a/test/integration/react-streaming-and-server-components/app/pages/err/render.js b/test/integration/react-streaming-and-server-components/app/pages/err/render.js
index 7d9d321f7cb0a87..0c6ec0bd1baedbb 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/err/render.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/err/render.js
@@ -5,7 +5,3 @@ export default function MyError() {
     throw new Error('oops')
   }
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js b/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js
index 05f85b9f4b16fd8..e23ccd094bbabe3 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js
@@ -18,7 +18,3 @@ export default function page() {
     </>
   )
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js b/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js
index 96c50ace36a55e6..0083c3b9d4ccbc6 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js
@@ -7,7 +7,3 @@ const Page = () => {
 }
 
 export default Page
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js b/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
index 1162cea6f999ca3..a4d5cb765082c42 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
@@ -16,7 +16,3 @@ export default function LinkPage({ router }) {
     </>
   )
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js b/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js
index 8604f3bdcb72673..c3740b8719feda0 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js
@@ -40,7 +40,3 @@ export default function () {
     </>
   )
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js b/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
index 27c7c0bddf02830..288d6165f9990c9 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
@@ -1,7 +1,3 @@
 export default function Pid({ router }) {
   return <div>{`query: ${router.query.dynamic}`}</div>
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js b/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js
index 7d7c0cacce37be5..c6653c9e71f816d 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js
@@ -29,7 +29,3 @@ export default function Page() {
     </div>
   )
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/streaming.js b/test/integration/react-streaming-and-server-components/app/pages/streaming.js
index 70aaf4ced70ef0b..ac58f5e9e2c382c 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/streaming.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/streaming.js
@@ -21,7 +21,3 @@ export default function Page() {
     </Suspense>
   )
 }
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js b/test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js
deleted file mode 100644
index 7b4ccb839cd641c..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const withReact18 = require('../../react-18/test/with-react-18')
-
-module.exports = withReact18({
-  reactStrictMode: true,
-  experimental: {
-    serverComponents: true,
-    // runtime: 'edge',
-  },
-})
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/package.json b/test/integration/react-streaming-and-server-components/switchable-runtime/package.json
deleted file mode 100644
index 90af0ce830c998e..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "lnext": "node -r ../../react-18/test/require-hook.js ../../../../packages/next/dist/bin/next",
-    "dev": "yarn lnext dev",
-    "build": "yarn lnext build",
-    "start": "yarn lnext start"
-  }
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json b/test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json
deleted file mode 100644
index 4aa797aeaee3080..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/_app": "pages/_app.js",
-  "/_error": "pages/_error.js",
-  "/edge-rsc": "pages/edge-rsc.js",
-  "/static": "pages/static.js",
-  "/node-rsc": "pages/node-rsc.js",
-  "/node": "pages/node.js",
-  "/edge": "pages/edge.js"
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
deleted file mode 100644
index 83dc8c219e84ef0..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page() {
-  return (
-    <div>
-      This is a SSR RSC page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
deleted file mode 100644
index c3425c7e64af7cd..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page() {
-  return (
-    <div>
-      This is a SSR page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export const config = {
-  runtime: 'edge',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
deleted file mode 100644
index 362e634644eb2ba..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page({ type }) {
-  return (
-    <div>
-      This is a {type} RSC page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export function getStaticProps() {
-  return {
-    props: {
-      type: 'SSG',
-    },
-  }
-}
-
-export const config = {
-  runtime: 'nodejs',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
deleted file mode 100644
index 1b8b01526a3cede..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page({ type }) {
-  return (
-    <div>
-      This is a {type} RSC page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export function getServerSideProps() {
-  return {
-    props: {
-      type: 'SSR',
-    },
-  }
-}
-
-export const config = {
-  runtime: 'nodejs',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
deleted file mode 100644
index f3563039b63bdfe..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page() {
-  return (
-    <div>
-      This is a static RSC page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export const config = {
-  runtime: 'nodejs',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
deleted file mode 100644
index d555009acfcdb83..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page({ type }) {
-  return (
-    <div>
-      This is a {type} page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export function getStaticProps() {
-  return {
-    props: {
-      type: 'SSG',
-    },
-  }
-}
-
-export const config = {
-  runtime: 'nodejs',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
deleted file mode 100644
index e58276b47a76386..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page({ type }) {
-  return (
-    <div>
-      This is a {type} page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export function getServerSideProps() {
-  return {
-    props: {
-      type: 'SSR',
-    },
-  }
-}
-
-export const config = {
-  runtime: 'nodejs',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
deleted file mode 100644
index bf065da478ba866..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page() {
-  return (
-    <div>
-      This is a static page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
-
-export const config = {
-  runtime: 'nodejs',
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
deleted file mode 100644
index e44edfd7952325d..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
-
-export default function Page() {
-  return (
-    <div>
-      This is a static page.
-      <br />
-      {'Runtime: ' + getRuntime()}
-      <br />
-      {'Time: ' + getTime()}
-    </div>
-  )
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
deleted file mode 100644
index 444f1ee8b498bbb..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function getRuntime() {
-  return process.version ? `Node.js ${process.version}` : 'Edge/Browser'
-}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
deleted file mode 100644
index cf78549b9a7c124..000000000000000
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function getTime() {
-  return Date.now()
-}
diff --git a/test/integration/react-streaming-and-server-components/test/css.js b/test/integration/react-streaming-and-server-components/test/css.js
index e369a544b50e6d7..39bcf1bfafdd02b 100644
--- a/test/integration/react-streaming-and-server-components/test/css.js
+++ b/test/integration/react-streaming-and-server-components/test/css.js
@@ -16,8 +16,8 @@ export default function (context) {
     )
     expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
   })
-  // TODO: fix this test
-  it.skip('should include css modules with `serverComponents: true`', async () => {
+
+  it('should include css modules with `serverComponents: true`', async () => {
     const browser = await webdriver(context.appPort, '/css-modules')
     const currentColor = await browser.eval(
       `window.getComputedStyle(document.querySelector('h1')).color`
diff --git a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
deleted file mode 100644
index 62ebdcadf4264fc..000000000000000
--- a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/* eslint-env jest */
-
-import { join } from 'path'
-import {
-  // File,
-  nextBuild as _nextBuild,
-  nextStart as _nextStart,
-} from 'next-test-utils'
-
-import { findPort, killApp, renderViaHTTP } from 'next-test-utils'
-
-const nodeArgs = ['-r', join(__dirname, '../../react-18/test/require-hook.js')]
-
-const appDir = join(__dirname, '../switchable-runtime')
-// const nextConfig = new File(join(appDir, 'next.config.js'))
-
-async function nextBuild(dir, options) {
-  return await _nextBuild(dir, [], {
-    ...options,
-    stdout: true,
-    stderr: true,
-    nodeArgs,
-  })
-}
-
-async function nextStart(dir, port) {
-  return await _nextStart(dir, port, {
-    stdout: true,
-    stderr: true,
-    nodeArgs,
-  })
-}
-
-async function testRoute(appPort, url, { isStatic, isEdge }) {
-  const html1 = await renderViaHTTP(appPort, url)
-  const renderedAt1 = +html1.match(/Time: (\d+)/)[1]
-  expect(html1).toContain(`Runtime: ${isEdge ? 'Edge' : 'Node.js'}`)
-
-  const html2 = await renderViaHTTP(appPort, url)
-  const renderedAt2 = +html2.match(/Time: (\d+)/)[1]
-  expect(html2).toContain(`Runtime: ${isEdge ? 'Edge' : 'Node.js'}`)
-
-  if (isStatic) {
-    // Should not be re-rendered, some timestamp should be returned.
-    expect(renderedAt1).toBe(renderedAt2)
-  } else {
-    // Should be re-rendered.
-    expect(renderedAt1).toBeLessThan(renderedAt2)
-  }
-}
-
-describe('Without global runtime configuration', () => {
-  const context = { appDir }
-
-  beforeAll(async () => {
-    context.appPort = await findPort()
-    const { stderr } = await nextBuild(context.appDir)
-    context.stderr = stderr
-    context.server = await nextStart(context.appDir, context.appPort)
-  })
-  afterAll(async () => {
-    await killApp(context.server)
-  })
-
-  it('should build /static as a static page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/static', {
-      isStatic: true,
-      isEdge: false,
-    })
-  })
-
-  it('should build /node as a static page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/node', {
-      isStatic: true,
-      isEdge: false,
-    })
-  })
-
-  it('should build /node-ssr as a dynamic page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/node-ssr', {
-      isStatic: false,
-      isEdge: false,
-    })
-  })
-
-  it('should build /node-ssg as a static page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/node-ssg', {
-      isStatic: true,
-      isEdge: false,
-    })
-  })
-
-  it('should build /node-rsc as a static page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/node-rsc', {
-      isStatic: true,
-      isEdge: false,
-    })
-  })
-
-  it('should build /node-rsc-ssr as a dynamic page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/node-rsc-ssr', {
-      isStatic: false,
-      isEdge: false,
-    })
-  })
-
-  it('should build /node-rsc-ssg as a static page with the nodejs runtime', async () => {
-    await testRoute(context.appPort, '/node-rsc-ssg', {
-      isStatic: true,
-      isEdge: false,
-    })
-  })
-
-  it('should build /edge as a dynamic page with the edge runtime', async () => {
-    await testRoute(context.appPort, '/edge', {
-      isStatic: false,
-      isEdge: true,
-    })
-  })
-
-  it('should build /edge-rsc as a dynamic page with the edge runtime', async () => {
-    await testRoute(context.appPort, '/edge-rsc', {
-      isStatic: false,
-      isEdge: true,
-    })
-  })
-})
diff --git a/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js b/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js
index deb87bcba88d7c6..4783ccbdadb7868 100644
--- a/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js
+++ b/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js
@@ -3,6 +3,7 @@ const withReact18 = require('../../react-18/test/with-react-18')
 module.exports = withReact18({
   experimental: {
     reactRoot: true,
+    runtime: 'edge',
     serverComponents: true,
   },
 })
diff --git a/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js b/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js
index 8371b4c194f7d0b..31f0f204a9d3bd4 100644
--- a/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js
+++ b/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js
@@ -8,7 +8,3 @@ export default function Index() {
   console.log(EOF)
   return 'Access Node.js native module dns'
 }
-
-export const config = {
-  runtime: 'edge',
-}