vercel · ide · Apr 24, 2022
@@ -111,7 +111,6 @@ import { TelemetryPlugin } from './webpack/plugins/telemetry-plugin'
 import { MiddlewareManifest } from './webpack/plugins/middleware-plugin'
 import type { webpack5 as webpack } from 'next/dist/compiled/webpack/webpack'
 import { recursiveCopy } from '../lib/recursive-copy'
-import { shouldUseReactRoot } from '../server/config'
 
 export type SsgRoute = {
   initialRevalidateSeconds: number | false
@@ -160,8 +159,8 @@ export default async function build(
     setGlobal('distDir', distDir)
 
     // We enable concurrent features (Fizz-related rendering architecture) when
-    // using React 18 or experimental.
-    const hasReactRoot = shouldUseReactRoot()
+    // using React 18 or experimental and the developer hasn't opted out
+    const hasReactRoot = !!config.experimental.reactRoot
     const hasConcurrentFeatures = hasReactRoot
     const hasServerComponents =
       hasReactRoot && !!config.experimental.serverComponents

@@ -189,7 +189,7 @@ function assignDefaults(userConfig: { [key: string]: any }) {
   }
 
   const hasReactRoot = shouldUseReactRoot()
-  if (hasReactRoot) {
+  if (hasReactRoot && userConfig.experimental?.reactRoot !== false) {
     // users might not have the `experimental` key in their config
     result.experimental = result.experimental || {}
     result.experimental.reactRoot = true

@@ -0,0 +1,6 @@
+module.exports = {
+  experimental: {
+    // Explicitly opt out of concurrent rendering
+    reactRoot: false,
+  },
+}
@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "dev": "yarn next dev",
+    "build": "yarn next build",
+    "start": "yarn next start"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}
@@ -0,0 +1,36 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document'
+
+export default class CustomDocument extends Document {
+  static async getInitialProps(ctx) {
+    let mainContentLength
+
+    const originalRenderPage = ctx.renderPage
+    // Keep renderPage synchronous since this integration test checks for
+    // serial rendering
+    ctx.renderPage = () => {
+      const result = originalRenderPage()
+      mainContentLength = result.html.length
+      return result
+    }
+
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps, mainContentLength }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <meta
+            name="test-main-content-length"
+            value={this.props.mainContentLength}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
@@ -0,0 +1,12 @@
+import ReactDOM from 'react-dom'
+
+export default function Index() {
+  if (typeof window !== 'undefined') {
+    window.didHydrate = true
+  }
+  return (
+    <div>
+      <p id="react-dom-version">{ReactDOM.version}</p>
+    </div>
+  )
+}
@@ -0,0 +1,17 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+import { renderViaHTTP } from 'next-test-utils'
+
+export default (context, env) => {
+  it('renders pages in serial', async () => {
+    const html = await renderViaHTTP(context.appPort, '/')
+    expect(html).toMatch(/<meta name="test-main-content-length" value="\d+"\/>/)
+  })
+
+  it('hydrates correctly for normal page', async () => {
+    const browser = await webdriver(context.appPort, '/')
+    expect(await browser.eval('window.didHydrate')).toBe(true)
+    expect(await browser.elementById('react-dom-version').text()).toMatch(/18/)
+  })
+}
@@ -0,0 +1,18 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+
+import { runDevSuite, runProdSuite } from 'next-test-utils'
+import basics from './basics'
+
+const appDir = join(__dirname, '../app')
+
+describe('Basics', () => {
+  runTests('react 18 with reactRoot set to false', basics)
+})
+
+function runTests(name, fn, opts) {
+  const suiteOptions = { ...opts, runTests: fn }
+  runDevSuite(name, appDir, suiteOptions)
+  runProdSuite(name, appDir, suiteOptions)
+}