Simplify the logic for static flight response generation (#36984)

* code refactor * simplify static data * htmlEscapeJsonString in view-render
vercel · May 18, 2022 · b553818 · b553818
1 parent 60dca6f
commit b553818
Show file tree

Hide file tree

Showing 6 changed files with 259 additions and 297 deletions.
diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -10,6 +10,7 @@ import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 import {
   MIDDLEWARE_FLIGHT_MANIFEST,
   EDGE_RUNTIME_WEBPACK,
+  NEXT_CLIENT_SSR_ENTRY_SUFFIX,
 } from '../../../shared/lib/constants'
 import { clientComponentRegex } from '../loaders/utils'
 import { normalizePagePath } from '../../../shared/lib/page-path/normalize-page-path'
@@ -54,8 +55,6 @@ export class FlightManifestPlugin {
   }
 
   apply(compiler: any) {
-    const context = (this as any).context
-
     compiler.hooks.compilation.tap(
       PLUGIN_NAME,
       (compilation: any, { normalModuleFactory }: any) => {
@@ -74,151 +73,151 @@ export class FlightManifestPlugin {
     compiler.hooks.finishMake.tapAsync(
       PLUGIN_NAME,
       async (compilation: any, callback: any) => {
-        const promises: any = []
+        this.createClientEndpoints(compilation, callback)
+      }
+    )
 
-        // For each SC server compilation entry, we need to create its corresponding
-        // client component entry.
-        for (const [name, entry] of compilation.entries.entries()) {
-          if (name === 'pages/_app.server') continue
+    compiler.hooks.make.tap(PLUGIN_NAME, (compilation: any) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          // @ts-ignore TODO: Remove ignore when webpack 5 is stable
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        (assets: any) => this.createAsset(assets, compilation)
+      )
+    })
+  }
 
-          // Check if the page entry is a server component or not.
-          const entryDependency = entry.dependencies?.[0]
-          const request = entryDependency?.request
+  async createClientEndpoints(compilation: any, callback: () => void) {
+    const context = (this as any).context
+    const promises: any = []
 
-          if (request && entry.options?.layer === 'sc_server') {
-            const visited = new Set()
-            const clientComponentImports: string[] = []
+    // For each SC server compilation entry, we need to create its corresponding
+    // client component entry.
+    for (const [name, entry] of compilation.entries.entries()) {
+      if (name === 'pages/_app.server') continue
 
-            function filterClientComponents(dependency: any) {
-              const module =
-                compilation.moduleGraph.getResolvedModule(dependency)
-              if (!module) return
+      // Check if the page entry is a server component or not.
+      const entryDependency = entry.dependencies?.[0]
+      const request = entryDependency?.request
 
-              if (visited.has(module.userRequest)) return
-              visited.add(module.userRequest)
+      if (request && entry.options?.layer === 'sc_server') {
+        const visited = new Set()
+        const clientComponentImports: string[] = []
 
-              if (clientComponentRegex.test(module.userRequest)) {
-                clientComponentImports.push(module.userRequest)
-              }
+        function filterClientComponents(dependency: any) {
+          const module = compilation.moduleGraph.getResolvedModule(dependency)
+          if (!module) return
 
-              compilation.moduleGraph
-                .getOutgoingConnections(module)
-                .forEach((connection: any) => {
-                  filterClientComponents(connection.dependency)
-                })
-            }
+          if (visited.has(module.userRequest)) return
+          visited.add(module.userRequest)
 
-            // Traverse the module graph to find all client components.
-            filterClientComponents(entryDependency)
+          if (clientComponentRegex.test(module.userRequest)) {
+            clientComponentImports.push(module.userRequest)
+          }
 
-            const entryModule =
-              compilation.moduleGraph.getResolvedModule(entryDependency)
-            const routeInfo = entryModule.buildInfo.route || {
-              page: denormalizePagePath(name.replace(/^pages/, '')),
-              absolutePagePath: entryModule.resource,
-            }
+          compilation.moduleGraph
+            .getOutgoingConnections(module)
+            .forEach((connection: any) => {
+              filterClientComponents(connection.dependency)
+            })
+        }
 
-            // Parse gSSP and gSP exports from the page source.
-            const pageStaticInfo = this.isEdgeServer
-              ? {}
-              : await getPageStaticInfo(
-                  routeInfo.absolutePagePath,
-                  {},
-                  this.dev
-                )
-
-            const clientLoader = `next-flight-client-entry-loader?${stringify({
-              modules: clientComponentImports,
-              runtime: this.isEdgeServer ? 'edge' : 'nodejs',
-              ssr: pageStaticInfo.ssr,
-              // Adding name here to make the entry key unique.
-              name,
-            })}!`
-
-            const bundlePath = 'pages' + normalizePagePath(routeInfo.page)
-
-            // Inject the entry to the client compiler.
-            if (this.dev) {
-              const pageKey = 'client' + routeInfo.page
-              if (!entries[pageKey]) {
-                entries[pageKey] = {
-                  bundlePath,
-                  absolutePagePath: routeInfo.absolutePagePath,
-                  clientLoader,
-                  dispose: false,
-                  lastActiveTime: Date.now(),
-                } as any
-                const invalidator = getInvalidator()
-                if (invalidator) {
-                  invalidator.invalidate()
-                }
-              }
-            } else {
-              injectedClientEntries.set(
-                bundlePath,
-                `next-client-pages-loader?${stringify({
-                  isServerComponent: true,
-                  page: denormalizePagePath(bundlePath.replace(/^pages/, '')),
-                  absolutePagePath: clientLoader,
-                })}!` + clientLoader
-              )
-            }
+        // Traverse the module graph to find all client components.
+        filterClientComponents(entryDependency)
+
+        const entryModule =
+          compilation.moduleGraph.getResolvedModule(entryDependency)
+        const routeInfo = entryModule.buildInfo.route || {
+          page: denormalizePagePath(name.replace(/^pages/, '')),
+          absolutePagePath: entryModule.resource,
+        }
 
-            // Inject the entry to the server compiler.
-            const clientComponentEntryDep = (
-              webpack as any
-            ).EntryPlugin.createDependency(
+        // Parse gSSP and gSP exports from the page source.
+        const pageStaticInfo = this.isEdgeServer
+          ? {}
+          : await getPageStaticInfo(routeInfo.absolutePagePath, {}, this.dev)
+
+        const clientLoader = `next-flight-client-entry-loader?${stringify({
+          modules: clientComponentImports,
+          runtime: this.isEdgeServer ? 'edge' : 'nodejs',
+          ssr: pageStaticInfo.ssr,
+          // Adding name here to make the entry key unique.
+          name,
+        })}!`
+
+        const bundlePath = 'pages' + normalizePagePath(routeInfo.page)
+
+        // Inject the entry to the client compiler.
+        if (this.dev) {
+          const pageKey = 'client' + routeInfo.page
+          if (!entries[pageKey]) {
+            entries[pageKey] = {
+              bundlePath,
+              absolutePagePath: routeInfo.absolutePagePath,
               clientLoader,
-              name + '.__sc_client__'
-            )
-            promises.push(
-              new Promise<void>((res, rej) => {
-                compilation.addEntry(
-                  context,
-                  clientComponentEntryDep,
-                  this.isEdgeServer
-                    ? {
-                        name: name + '.__sc_client__',
-                        library: {
-                          name: ['self._CLIENT_ENTRY'],
-                          type: 'assign',
-                        },
-                        runtime: EDGE_RUNTIME_WEBPACK,
-                        asyncChunks: false,
-                      }
-                    : {
-                        name: name + '.__sc_client__',
-                        runtime: 'webpack-runtime',
-                      },
-                  (err: any) => {
-                    if (err) {
-                      rej(err)
-                    } else {
-                      res()
-                    }
-                  }
-                )
-              })
-            )
+              dispose: false,
+              lastActiveTime: Date.now(),
+            } as any
+            const invalidator = getInvalidator()
+            if (invalidator) {
+              invalidator.invalidate()
+            }
           }
+        } else {
+          injectedClientEntries.set(
+            bundlePath,
+            `next-client-pages-loader?${stringify({
+              isServerComponent: true,
+              page: denormalizePagePath(bundlePath.replace(/^pages/, '')),
+              absolutePagePath: clientLoader,
+            })}!` + clientLoader
+          )
         }
 
-        Promise.all(promises)
-          .then(() => callback())
-          .catch(callback)
+        // Inject the entry to the server compiler.
+        const clientComponentEntryDep = (
+          webpack as any
+        ).EntryPlugin.createDependency(
+          clientLoader,
+          name + NEXT_CLIENT_SSR_ENTRY_SUFFIX
+        )
+        promises.push(
+          new Promise<void>((res, rej) => {
+            compilation.addEntry(
+              context,
+              clientComponentEntryDep,
+              this.isEdgeServer
+                ? {
+                    name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
+                    library: {
+                      name: ['self._CLIENT_ENTRY'],
+                      type: 'assign',
+                    },
+                    runtime: EDGE_RUNTIME_WEBPACK,
+                    asyncChunks: false,
+                  }
+                : {
+                    name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
+                    runtime: 'webpack-runtime',
+                  },
+              (err: any) => {
+                if (err) {
+                  rej(err)
+                } else {
+                  res()
+                }
+              }
+            )
+          })
+        )
       }
-    )
+    }
 
-    compiler.hooks.make.tap(PLUGIN_NAME, (compilation: any) => {
-      compilation.hooks.processAssets.tap(
-        {
-          name: PLUGIN_NAME,
-          // @ts-ignore TODO: Remove ignore when webpack 5 is stable
-          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-        },
-        (assets: any) => this.createAsset(assets, compilation)
-      )
-    })
+    Promise.all(promises)
+      .then(() => callback())
+      .catch(callback)
   }
 
   createAsset(assets: any, compilation: any) {

diff --git a/packages/next/build/webpack/plugins/middleware-plugin.ts b/packages/next/build/webpack/plugins/middleware-plugin.ts
@@ -10,6 +10,7 @@ import {
   MIDDLEWARE_FLIGHT_MANIFEST,
   MIDDLEWARE_MANIFEST,
   MIDDLEWARE_REACT_LOADABLE_MANIFEST,
+  NEXT_CLIENT_SSR_ENTRY_SUFFIX,
 } from '../../../shared/lib/constants'
 
 export interface MiddlewareManifest {
@@ -395,7 +396,11 @@ function getEntryFiles(entryFiles: string[], meta: EntryMetadata) {
             (file) =>
               file.startsWith('pages/') && !file.endsWith('.hot-update.js')
           )
-          .map((file) => 'server/' + file.replace('.js', '.__sc_client__.js'))
+          .map(
+            (file) =>
+              'server/' +
+              file.replace('.js', NEXT_CLIENT_SSR_ENTRY_SUFFIX + '.js')
+          )
       )
     }
 

diff --git a/packages/next/server/load-components.ts b/packages/next/server/load-components.ts
@@ -13,6 +13,7 @@ import {
   BUILD_MANIFEST,
   REACT_LOADABLE_MANIFEST,
   MIDDLEWARE_FLIGHT_MANIFEST,
+  NEXT_CLIENT_SSR_ENTRY_SUFFIX,
 } from '../shared/lib/constants'
 import { join } from 'path'
 import { requirePage, getPagePath } from './require'
@@ -69,7 +70,7 @@ export async function loadComponents(
   distDir: string,
   pathname: string,
   serverless: boolean,
-  serverComponents?: boolean,
+  hasServerComponents?: boolean,
   rootEnabled?: boolean
 ): Promise<LoadComponentsReturnType> {
   if (serverless) {
@@ -115,7 +116,7 @@ export async function loadComponents(
     Promise.resolve().then(() =>
       requirePage(pathname, distDir, serverless, rootEnabled)
     ),
-    serverComponents
+    hasServerComponents
       ? Promise.resolve().then(() =>
           requirePage('/_app.server', distDir, serverless, rootEnabled)
         )
@@ -126,23 +127,23 @@ export async function loadComponents(
     await Promise.all([
       require(join(distDir, BUILD_MANIFEST)),
       require(join(distDir, REACT_LOADABLE_MANIFEST)),
-      serverComponents
+      hasServerComponents
         ? require(join(distDir, 'server', MIDDLEWARE_FLIGHT_MANIFEST + '.json'))
         : null,
     ])
 
-  if (serverComponents) {
+  if (hasServerComponents) {
     try {
       // Make sure to also load the client entry in cache.
       await requirePage(
-        normalizePagePath(pathname) + '.__sc_client__',
+        normalizePagePath(pathname) + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
         distDir,
         serverless,
         rootEnabled
       )
     } catch (_) {
-      // This page might not be a server component page, so there is no __sc_client__
-      // bundle to load.
+      // This page might not be a server component page, so there is no
+      // client entry to load.
     }
   }