Add experimental concurrentFeatures config (#27768)

devknoll · web-flow · commit 459b391775ac · 2021-08-11T03:06:42.000Z
Allows opting in to support for new concurrent features, like server-side Suspense.

**!!! DO NOT USE !!!**
This is highly experimental. We **will** be gating additional breaking changes behind this same flag. 
**!!! DO NOT USE !!!**

Also resolves suspense for static pages (i.e. `getStaticProps` or `next build`/`next export`) since we can't currently support streaming for those cases anyway.
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
@@ -113,6 +113,7 @@ export type NextConfig = { [key: string]: any } & {
     staticPageGenerationTimeout?: number
     pageDataCollectionTimeout?: number
     isrMemoryCacheSize?: number
+    concurrentFeatures?: boolean
   }
 }
 
@@ -185,6 +186,7 @@ export const defaultConfig: NextConfig = {
     pageDataCollectionTimeout: 60,
     // default to 50MB limit
     isrMemoryCacheSize: 50 * 1024 * 1024,
+    concurrentFeatures: false,
   },
   future: {
     strictPostcssConfiguration: false,
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
@@ -181,6 +181,7 @@ export default class Server {
     defaultLocale?: string
     domainLocales?: DomainLocale[]
     distDir: string
+    concurrentFeatures?: boolean
   }
   private compression?: Middleware
   private incrementalCache: IncrementalCache
@@ -241,6 +242,7 @@ export default class Server {
         .disableOptimizedLoading,
       domainLocales: this.nextConfig.i18n?.domains,
       distDir: this.distDir,
+      concurrentFeatures: this.nextConfig.experimental.concurrentFeatures,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -1,7 +1,8 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import { ParsedUrlQuery } from 'querystring'
+import { PassThrough } from 'stream'
 import React from 'react'
-import { renderToStaticMarkup, renderToString } from 'react-dom/server'
+import * as ReactDOMServer from 'react-dom/server'
 import { warn } from '../build/output/log'
 import { UnwrapPromise } from '../lib/coalesced-function'
 import {
@@ -43,6 +44,7 @@ import {
   loadGetInitialProps,
   NextComponentType,
   RenderPage,
+  RenderPageResult,
 } from '../shared/lib/utils'
 import {
   tryGetPreviewData,
@@ -190,6 +192,7 @@ export type RenderOptsPartial = {
   domainLocales?: DomainLocale[]
   disableOptimizedLoading?: boolean
   requireStaticHTML?: boolean
+  concurrentFeatures?: boolean
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -263,7 +266,7 @@ function renderDocument(
 ): string {
   return (
     '<!DOCTYPE html>' +
-    renderToStaticMarkup(
+    ReactDOMServer.renderToStaticMarkup(
       <AmpStateContext.Provider value={ampState}>
         {Document.renderDocument(Document, {
           __NEXT_DATA__: {
@@ -408,6 +411,7 @@ export async function renderToHTML(
     previewProps,
     basePath,
     devOnlyCacheBusterQueryString,
+    concurrentFeatures,
   } = renderOpts
 
   const getFontDefinition = (url: string): string => {
@@ -626,6 +630,8 @@ export async function renderToHTML(
   let head: JSX.Element[] = defaultHead(inAmpMode)
 
   let scriptLoader: any = {}
+  const nextExport =
+    !isSSG && (renderOpts.nextExport || (dev && (isAutoExport || isFallback)))
 
   const AppContainer = ({ children }: any) => (
     <RouterContext.Provider value={router}>
@@ -991,11 +997,45 @@ export async function renderToHTML(
     }
   }
 
+  // TODO: Support SSR streaming of Suspense.
+  const renderToString = concurrentFeatures
+    ? (element: React.ReactElement) =>
+        new Promise<string>((resolve, reject) => {
+          const stream = new PassThrough()
+          const buffers: Buffer[] = []
+          stream.on('data', (chunk) => {
+            buffers.push(chunk)
+          })
+          stream.once('end', () => {
+            resolve(Buffer.concat(buffers).toString('utf-8'))
+          })
+
+          const {
+            abort,
+            startWriting,
+          } = (ReactDOMServer as any).pipeToNodeWritable(element, stream, {
+            onError(error: Error) {
+              abort()
+              reject(error)
+            },
+            onCompleteAll() {
+              startWriting()
+            },
+          })
+        })
+    : ReactDOMServer.renderToString
+
   const renderPage: RenderPage = (
     options: ComponentsEnhancer = {}
-  ): { html: string; head: any } => {
+  ): RenderPageResult | Promise<RenderPageResult> => {
     if (ctx.err && ErrorDebug) {
-      return { html: renderToString(<ErrorDebug error={ctx.err} />), head }
+      const htmlOrPromise = renderToString(<ErrorDebug error={ctx.err} />)
+      return typeof htmlOrPromise === 'string'
+        ? { html: htmlOrPromise, head }
+        : htmlOrPromise.then((html) => ({
+            html,
+            head,
+          }))
     }
 
     if (dev && (props.router || props.Component)) {
@@ -1009,13 +1049,17 @@ export async function renderToHTML(
       Component: EnhancedComponent,
     } = enhanceComponents(options, App, Component)
 
-    const html = renderToString(
+    const htmlOrPromise = renderToString(
       <AppContainer>
         <EnhancedApp Component={EnhancedComponent} router={router} {...props} />
       </AppContainer>
     )
-
-    return { html, head }
+    return typeof htmlOrPromise === 'string'
+      ? { html: htmlOrPromise, head }
+      : htmlOrPromise.then((html) => ({
+          html,
+          head,
+        }))
   }
   const documentCtx = { ...ctx, renderPage }
   const docProps: DocumentInitialProps = await loadGetInitialProps(
@@ -1049,8 +1093,6 @@ export async function renderToHTML(
   const hybridAmp = ampState.hybrid
 
   const docComponentsRendered: DocumentProps['docComponentsRendered'] = {}
-  const nextExport =
-    !isSSG && (renderOpts.nextExport || (dev && (isAutoExport || isFallback)))
 
   let html = renderDocument(Document, {
     ...renderOpts,

Original file line number	Diff line number	Diff line change
`@@ -113,6 +113,7 @@ export type NextConfig = { [key: string]: any } & {`
`113`	`113`	`staticPageGenerationTimeout?: number`
`114`	`114`	`pageDataCollectionTimeout?: number`
`115`	`115`	`isrMemoryCacheSize?: number`
	`116`	`+ concurrentFeatures?: boolean`
`116`	`117`	`}`
`117`	`118`	`}`
`118`	`119`
`@@ -185,6 +186,7 @@ export const defaultConfig: NextConfig = {`
`185`	`186`	`pageDataCollectionTimeout: 60,`
`186`	`187`	`// default to 50MB limit`
`187`	`188`	`isrMemoryCacheSize: 50 * 1024 * 1024,`
	`189`	`+ concurrentFeatures: false,`
`188`	`190`	`},`
`189`	`191`	`future: {`
`190`	`192`	`strictPostcssConfiguration: false,`
Original file line number	Diff line number	Diff line change
`@@ -181,6 +181,7 @@ export default class Server {`
`181`	`181`	`defaultLocale?: string`
`182`	`182`	`domainLocales?: DomainLocale[]`
`183`	`183`	`distDir: string`
	`184`	`+ concurrentFeatures?: boolean`
`184`	`185`	`}`
`185`	`186`	`private compression?: Middleware`
`186`	`187`	`private incrementalCache: IncrementalCache`
`@@ -241,6 +242,7 @@ export default class Server {`
`241`	`242`	`.disableOptimizedLoading,`
`242`	`243`	`domainLocales: this.nextConfig.i18n?.domains,`
`243`	`244`	`distDir: this.distDir,`
	`245`	`+ concurrentFeatures: this.nextConfig.experimental.concurrentFeatures,`
`244`	`246`	`}`
`245`	`247`
`246`	`248`	// Only the `publicRuntimeConfig` key is exposed to the client side