perf: improve Pages Router server rendering performance (#64461)

### What This PR's goal is to improve the throughput performance of the Next.js server when handling Pages Router routes. Note that the results from this are very synthetic and do not represent the real-life performance of an application. If we only wanted to handle hello worlds, we could probably make this even faster but on production, a slow fetch call to your DB is probably what's slowing you down. I'll look into App Router next. ### Why? I guess I got nerd-sniped into it 😃 ### How? A few optimizations: - I looked deeply at the pipeline for rendering a Pages Router page. I noticed a lot of intermediary streams being created here and there to eventually be concatenated to a simple string. I think this is probably left over code from when we wanted to support streaming there and so there's some code that was shared with the App Router, which we absolutely don't need I think. I refactored it to be slightly simpler with just a few string concats here and there. - misc: I removed some redundant Promises being created here and there and added a small inline optimisation to eliminate `if (renderOpts.dev)` code in production. ### Nummies Test setup: hello world pages router app, next start + autocannon - requests handled in 10s: 18k -> 33K, **~80% improvement** - avg latency: 4.89ms -> 2.8ms, **~42% improvement** - avg req/res: 1846.5 -> 2983.5, **~61% improvement** Before <img width="742" alt="image" src="https://github.com/vercel/next.js/assets/11064311/658e7ade-eba7-4604-a7c9-619bd51a5ec8"> vs after <img width="880" alt="image" src="https://github.com/vercel/next.js/assets/11064311/2f46cf69-b788-4db2-bf90-6f65dc7abd82">  Closes NEXT-3103
2024-04-16 14:25:45 +02:00 · 2024-04-16 14:25:45 +02:00 · d52d32f423
commit d52d32f423
parent abf3ca2d7d
5 changed files with 38 additions and 77 deletions
--- a/packages/next/src/server/load-components.ts
+++ b/packages/next/src/server/load-components.ts
@ -134,8 +134,8 @@ async function loadComponentsImpl<N = any>({
  let AppMod = {}
  if (!isAppPath) {
    ;[DocumentMod, AppMod] = await Promise.all([
-      Promise.resolve().then(() => requirePage('/_document', distDir, false)),
-      Promise.resolve().then(() => requirePage('/_app', distDir, false)),
+      requirePage('/_document', distDir, false),
+      requirePage('/_app', distDir, false),
    ])
  }

@ -186,9 +186,7 @@ async function loadComponentsImpl<N = any>({
    })
  }

-  const ComponentMod = await Promise.resolve().then(() =>
-    requirePage(page, distDir, isAppPath)
-  )
+  const ComponentMod = await requirePage(page, distDir, isAppPath)

  const Component = interopDefault(ComponentMod)
  const Document = interopDefault(DocumentMod)
--- a/packages/next/src/server/render.tsx
+++ b/packages/next/src/server/render.tsx
@ -81,11 +81,8 @@ import { allowedStatusCodes, getRedirectStatus } from '../lib/redirect-status'
 import RenderResult, { type PagesRenderResultMetadata } from './render-result'
 import isError from '../lib/is-error'
 import {
-  streamFromString,
  streamToString,
-  chainStreams,
  renderToInitialFizzStream,
-  continueFizzStream,
 } from './stream-utils/node-web-streams-helper'
 import { ImageConfigContext } from '../shared/lib/image-config-context.shared-runtime'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
@ -471,11 +468,6 @@ export async function renderToHTMLImpl(
    renderOpts.Component
  const OriginComponent = Component

-  let serverComponentsInlinedTransformStream: TransformStream<
-    Uint8Array,
-    Uint8Array
-  > | null = null
-
  const isFallback = !!query.__nextFallback
  const notFoundSrcPage = query.__nextNotFoundSrcPage

@ -1246,7 +1238,7 @@ export async function renderToHTMLImpl(
    }

    async function loadDocumentInitialProps(
-      renderShell?: (
+      renderShell: (
        _App: AppType,
        _Component: NextComponentType
      ) => Promise<ReactReadableStream>
@ -1277,26 +1269,10 @@ export async function renderToHTMLImpl(
        const { App: EnhancedApp, Component: EnhancedComponent } =
          enhanceComponents(options, App, Component)

-        if (renderShell) {
-          return renderShell(EnhancedApp, EnhancedComponent).then(
-            async (stream) => {
-              await stream.allReady
-              const html = await streamToString(stream)
-              return { html, head }
-            }
-          )
-        }
+        const stream = await renderShell(EnhancedApp, EnhancedComponent)
+        await stream.allReady
+        const html = await streamToString(stream)

-        const html = await renderToString(
-          <Body>
-            <AppContainerWithIsomorphicFiberStructure>
-              {renderPageTree(EnhancedApp, EnhancedComponent, {
-                ...props,
-                router,
-              })}
-            </AppContainerWithIsomorphicFiberStructure>
-          </Body>
-        )
        return { html, head }
      }
      const documentCtx = { ...ctx, renderPage }
@ -1349,48 +1325,39 @@ export async function renderToHTMLImpl(
      })
    }

-    const createBodyResult = getTracer().wrap(
-      RenderSpan.createBodyResult,
-      (initialStream: ReactReadableStream, suffix?: string) => {
-        return continueFizzStream(initialStream, {
-          suffix,
-          inlinedDataStream: serverComponentsInlinedTransformStream?.readable,
-          isStaticGeneration: true,
-          // this must be called inside bodyResult so appWrappers is
-          // up to date when `wrapApp` is called
-          getServerInsertedHTML: () => {
-            return renderToString(styledJsxInsertedHTML())
-          },
-          serverInsertedHTMLToHead: false,
-          validateRootLayout: undefined,
-        })
-      }
-    )
-
-    const hasDocumentGetInitialProps = !(
-      process.env.NEXT_RUNTIME === 'edge' || !Document.getInitialProps
-    )
-
-    let bodyResult: (s: string) => Promise<ReadableStream<Uint8Array>>
+    const hasDocumentGetInitialProps =
+      process.env.NEXT_RUNTIME !== 'edge' && !!Document.getInitialProps

    // If it has getInitialProps, we will render the shell in `renderPage`.
    // Otherwise we do it right now.
    let documentInitialPropsRes:
      | {}
      | Awaited<ReturnType<typeof loadDocumentInitialProps>>
-    if (hasDocumentGetInitialProps) {
-      documentInitialPropsRes = await loadDocumentInitialProps(renderShell)
-      if (documentInitialPropsRes === null) return null
-      const { docProps } = documentInitialPropsRes as any
-      // includes suffix in initial html stream
-      bodyResult = (suffix: string) =>
-        createBodyResult(streamFromString(docProps.html + suffix))
-    } else {
-      const stream = await renderShell(App, Component)
-      bodyResult = (suffix: string) => createBodyResult(stream, suffix)
-      documentInitialPropsRes = {}
+
+    const [rawStyledJsxInsertedHTML, content] = await Promise.all([
+      renderToString(styledJsxInsertedHTML()),
+      (async () => {
+        if (hasDocumentGetInitialProps) {
+          documentInitialPropsRes = await loadDocumentInitialProps(renderShell)
+          if (documentInitialPropsRes === null) return null
+          const { docProps } = documentInitialPropsRes as any
+          return docProps.html
+        } else {
+          documentInitialPropsRes = {}
+          const stream = await renderShell(App, Component)
+          await stream.allReady
+          return streamToString(stream)
+        }
+      })(),
+    ])
+
+    if (content === null) {
+      return null
    }

+    const contentHTML = rawStyledJsxInsertedHTML + content
+
+    // @ts-ignore: documentInitialPropsRes is set
    const { docProps } = (documentInitialPropsRes as any) || {}
    const documentElement = (htmlProps: any) => {
      if (process.env.NEXT_RUNTIME === 'edge') {
@ -1410,7 +1377,7 @@ export async function renderToHTMLImpl(
    }

    return {
-      bodyResult,
+      contentHTML,
      documentElement,
      head,
      headTags: [],
@ -1577,12 +1544,7 @@ export async function renderToHTMLImpl(
    prefix += '<!-- __NEXT_DATA__ -->'
  }

-  const content = await streamToString(
-    chainStreams(
-      streamFromString(prefix),
-      await documentResult.bodyResult(renderTargetSuffix)
-    )
-  )
+  const content = prefix + documentResult.contentHTML + renderTargetSuffix

  const optimizedHtml = await postProcessHTML(pathname, content, renderOpts, {
    inAmpMode,
--- a/packages/next/src/server/require.ts
+++ b/packages/next/src/server/require.ts
@ -105,11 +105,11 @@ export function getPagePath(
  return pagePath
 }

-export function requirePage(
+export async function requirePage(
  page: string,
  distDir: string,
  isAppPath: boolean
-): any {
+): Promise<any> {
  const pagePath = getPagePath(page, distDir, undefined, isAppPath)
  if (pagePath.endsWith('.html')) {
    return promises.readFile(pagePath, 'utf8').catch((err) => {
--- a/packages/next/webpack.config.js
+++ b/packages/next/webpack.config.js
@ -177,6 +177,7 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
        'this.serverOptions.experimentalTestProxy': JSON.stringify(false),
        'this.minimalMode': JSON.stringify(true),
        'this.renderOpts.dev': JSON.stringify(dev),
+        'renderOpts.dev': JSON.stringify(dev),
        'process.env.NODE_ENV': JSON.stringify(
          dev ? 'development' : 'production'
        ),
--- a/test/unit/isolated/require-page.test.ts
+++ b/test/unit/isolated/require-page.test.ts
@ -70,7 +70,7 @@ describe('getPagePath', () => {

 describe('requirePage', () => {
  it('Should not find page /index when using /', async () => {
-    await expect(() => requirePage('/', distDir, false)).toThrow(
+    await expect(requirePage('/', distDir, false)).rejects.toThrow(
      'Cannot find module for page: /'
    )
  })