Revert "Make concurrent features independent from the global runtime option" (#35405)

Reverts #35245

Author: shuding

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
     }
   }
 

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(

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

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 || []) {

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),

packages/next/pages/_document.tsx

@@ -585,9 +585,11 @@ export class Head extends Component<
       disableOptimizedLoading,
       optimizeCss,
       optimizeFonts,
-      hasConcurrentFeatures,
+      runtime,
     } = this.context
 
+    const hasConcurrentFeatures = !!runtime
+
     const disableRuntimeJS = unstable_runtimeJS === false
     const disableJsPreload =
       unstable_JsPreload === false || !disableOptimizedLoading

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)
 

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,
   }
 }

packages/next/server/next-server.ts

@@ -693,7 +693,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',

packages/next/server/render.tsx

@@ -450,12 +450,12 @@ export async function renderToHTML(
     supportsDynamicHTML,
     images,
     reactRoot,
-    runtime: globalRuntime,
+    runtime,
     ComponentMod,
     AppMod,
   } = renderOpts
 
-  const hasConcurrentFeatures = reactRoot
+  const hasConcurrentFeatures = !!runtime
 
   let Document = renderOpts.Document
   const OriginalComponent = renderOpts.Component
@@ -464,7 +464,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
@@ -1243,7 +1243,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 +1329,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} />
@@ -1362,6 +1361,7 @@ export async function renderToHTML(
               ),
               generateStaticHTML: true,
             })
+
             const flushed = await streamToString(flushEffectStream)
             return flushed
           }
@@ -1489,8 +1489,7 @@ export async function renderToHTML(
     optimizeCss: renderOpts.optimizeCss,
     optimizeFonts: renderOpts.optimizeFonts,
     nextScriptWorkers: renderOpts.nextScriptWorkers,
-    runtime: globalRuntime,
-    hasConcurrentFeatures,
+    runtime,
   }
 
   const document = (