Currently all scripts that are required for every page are loaded as part of the bootstrap scripts API in React. Unfortunately this loads them all as sync scripts and thus requires preloading which increases their priority higher than they might otherwise be causing things like images to load later than desired, blocking paint. We can improve this by only using one script for bootstrapping and having the rest pre-initialized. This only works because all of these scripts are webpack runtime or chunks and can be loaded in any order asynchronously.

With this change we should see improvements in LCP and other metrics as preloads for images are favored over loading scripts

Author: gnoff

packages/next/src/server/app-render/app-render.tsx

@@ -78,6 +78,7 @@ import { appendMutableCookies } from '../web/spec-extension/adapters/request-coo
 import { ComponentsType } from '../../build/webpack/loaders/next-app-loader'
 import { ModuleReference } from '../../build/webpack/loaders/metadata/types'
 import { createServerInsertedHTML } from './server-inserted-html'
+import { getRequiredScripts } from './required-scripts'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
@@ -1387,11 +1388,15 @@ export async function renderToHTMLOrFlight(
      * A new React Component that renders the provided React Component
      * using Flight which can then be rendered to HTML.
      */
-    const createServerComponentsRenderer = (loaderTreeToRender: LoaderTree) =>
+    const createServerComponentsRenderer = (
+      loaderTreeToRender: LoaderTree,
+      preinitScripts: () => void
+    ) =>
       createServerComponentRenderer<{
         asNotFound: boolean
       }>(
         async (props) => {
+          preinitScripts()
           // Create full component tree from root to leaf.
           const injectedCSS = new Set<string>()
           const injectedFontPreloadTags = new Set<string>()
@@ -1490,7 +1495,16 @@ export async function renderToHTMLOrFlight(
             integrity: subresourceIntegrityManifest?.[polyfill],
           }))
 
-        const ServerComponentsRenderer = createServerComponentsRenderer(tree)
+        const [preinitScripts, bootstrapScript] = getRequiredScripts(
+          buildManifest,
+          assetPrefix,
+          subresourceIntegrityManifest,
+          getAssetQueryString(true)
+        )
+        const ServerComponentsRenderer = createServerComponentsRenderer(
+          tree,
+          preinitScripts
+        )
         const content = (
           <HeadManagerContext.Provider
             value={{
@@ -1576,28 +1590,7 @@ export async function renderToHTMLOrFlight(
               onError: htmlRendererErrorHandler,
               nonce,
               // Include hydration scripts in the HTML
-              bootstrapScripts: [
-                ...(subresourceIntegrityManifest
-                  ? buildManifest.rootMainFiles.map((src) => ({
-                      src:
-                        `${assetPrefix}/_next/` +
-                        src +
-                        // Always include the timestamp query in development
-                        // as Safari caches them during the same session, no
-                        // matter what cache headers are set.
-                        getAssetQueryString(true),
-                      integrity: subresourceIntegrityManifest[src],
-                    }))
-                  : buildManifest.rootMainFiles.map(
-                      (src) =>
-                        `${assetPrefix}/_next/` +
-                        src +
-                        // Always include the timestamp query in development
-                        // as Safari caches them during the same session, no
-                        // matter what cache headers are set.
-                        getAssetQueryString(true)
-                    )),
-              ],
+              bootstrapScripts: [bootstrapScript],
             },
           })
 
@@ -1680,8 +1673,18 @@ export async function renderToHTMLOrFlight(
               )}
             </>
           )
+
+          const [errorPreinitScripts, errorBootstrapScript] =
+            getRequiredScripts(
+              buildManifest,
+              assetPrefix,
+              subresourceIntegrityManifest,
+              getAssetQueryString(false)
+            )
+
           const ErrorPage = createServerComponentRenderer(
             async () => {
+              errorPreinitScripts()
               const [MetadataTree, MetadataOutlet] = createMetadataComponents({
                 tree, // still use original tree with not-found boundaries to extract metadata
                 pathname,
@@ -1762,20 +1765,7 @@ export async function renderToHTMLOrFlight(
               streamOptions: {
                 nonce,
                 // Include hydration scripts in the HTML
-                bootstrapScripts: subresourceIntegrityManifest
-                  ? buildManifest.rootMainFiles.map((src) => ({
-                      src:
-                        `${assetPrefix}/_next/` +
-                        src +
-                        getAssetQueryString(false),
-                      integrity: subresourceIntegrityManifest[src],
-                    }))
-                  : buildManifest.rootMainFiles.map(
-                      (src) =>
-                        `${assetPrefix}/_next/` +
-                        src +
-                        getAssetQueryString(false)
-                    ),
+                bootstrapScripts: [errorBootstrapScript],
               },
             })
 

packages/next/src/server/app-render/required-scripts.tsx

@@ -0,0 +1,56 @@
+import type { BuildManifest } from '../get-page-files'
+
+import ReactDOM from 'react-dom'
+
+export function getRequiredScripts(
+  buildManifest: BuildManifest,
+  assetPrefix: string,
+  SRIManifest: undefined | Record<string, string>,
+  qs: string
+): [() => void, string | { src: string; integrity: string }] {
+  let preinitScripts: () => void
+  let preinitScriptCommands: string[] = []
+  let bootstrapScript: string | { src: string; integrity: string } = ''
+  const files = buildManifest.rootMainFiles
+  if (files.length === 0) {
+    throw new Error(
+      'Invariant: missing bootstrap script. This is a bug in Next.js'
+    )
+  }
+  if (SRIManifest) {
+    bootstrapScript = {
+      src: `${assetPrefix}/_next/` + files[0] + qs,
+      integrity: SRIManifest[files[0]],
+    }
+    for (let i = 1; i < files.length; i++) {
+      const src = `${assetPrefix}/_next/` + files[i] + qs
+      const integrity = SRIManifest[files[i]]
+      preinitScriptCommands.push(src, integrity)
+    }
+    preinitScripts = () => {
+      // preinitScriptCommands is a double indexed array of src/integrity pairs
+      for (let i = 0; i < preinitScriptCommands.length; i += 2) {
+        ReactDOM.preinit(preinitScriptCommands[i], {
+          as: 'script',
+          integrity: preinitScriptCommands[i + 1],
+        })
+      }
+    }
+  } else {
+    bootstrapScript = `${assetPrefix}/_next/` + files[0] + qs
+    for (let i = 1; i < files.length; i++) {
+      const src = `${assetPrefix}/_next/` + files[i] + qs
+      preinitScriptCommands.push(src)
+    }
+    preinitScripts = () => {
+      // preinitScriptCommands is a singled indexed array of src values
+      for (let i = 0; i < preinitScriptCommands.length; i++) {
+        ReactDOM.preinit(preinitScriptCommands[i], {
+          as: 'script',
+        })
+      }
+    }
+  }
+
+  return [preinitScripts, bootstrapScript]
+}

test/e2e/app-dir/app/app/bootstrap/page.js

@@ -0,0 +1,5 @@
+export default async function Page() {
+  return (
+    <div id="anchor">hello, bootstrap scripts should appear after this div</div>
+  )
+}

test/e2e/app-dir/app/index.test.ts

@@ -1859,5 +1859,16 @@ createNextDescribe(
         expect(await browser.elementByCss('p').text()).toBe('item count 128000')
       })
     })
+
+    describe('bootstrap scripts', () => {
+      it('should only bootstrap with one script, prinitializing the rest', async () => {
+        const html = await next.render('/bootstrap')
+        const $ = cheerio.load(html)
+
+        // We assume a minimum of 2 scripts, webpack runtime + main-app
+        expect($('script[async]').length).toBeGreaterThan(1)
+        expect($('body').find('script[async]').length).toBe(1)
+      })
+    })
   }
 )