Rename Webpack Layers (#52605)

Renames the webpack layers to be more semantical:

```
server compiler:
server layer → RSC layer
client layer → SSR layer
shared layer → shared layer

client compiler:
appClient layer → app browser layer
```

packages/next/src/build/entries.ts

@@ -314,7 +314,7 @@ export function getEdgeServerEntry(opts: {
 
     return {
       import: `next-edge-app-route-loader?${stringify(loaderParams)}!`,
-      layer: WEBPACK_LAYERS.server,
+      layer: WEBPACK_LAYERS.reactServerComponents,
     }
   }
   if (isMiddlewareFile(opts.page)) {
@@ -386,14 +386,14 @@ export function getEdgeServerEntry(opts: {
     // The Edge bundle includes the server in its entrypoint, so it has to
     // be in the SSR layer — we later convert the page request to the RSC layer
     // via a webpack rule.
-    layer: opts.appDirLoader ? WEBPACK_LAYERS.client : undefined,
+    layer: opts.appDirLoader ? WEBPACK_LAYERS.serverSideRendering : undefined,
   }
 }
 
 export function getAppEntry(opts: Readonly<AppLoaderOptions>) {
   return {
     import: `next-app-loader?${stringify(opts)}!`,
-    layer: WEBPACK_LAYERS.server,
+    layer: WEBPACK_LAYERS.reactServerComponents,
   }
 }
 
@@ -716,7 +716,7 @@ export function finalizeEntrypoint({
         layer: isApi
           ? WEBPACK_LAYERS.api
           : isServerComponent
-          ? WEBPACK_LAYERS.server
+          ? WEBPACK_LAYERS.reactServerComponents
           : undefined,
         ...entry,
       }
@@ -751,7 +751,7 @@ export function finalizeEntrypoint({
         if (isAppLayer) {
           return {
             dependOn: CLIENT_STATIC_FILES_RUNTIME_MAIN_APP,
-            layer: WEBPACK_LAYERS.appClient,
+            layer: WEBPACK_LAYERS.appPagesBrowser,
             ...entry,
           }
         }
@@ -767,7 +767,7 @@ export function finalizeEntrypoint({
 
       if (isAppLayer) {
         return {
-          layer: WEBPACK_LAYERS.appClient,
+          layer: WEBPACK_LAYERS.appPagesBrowser,
           ...entry,
         }
       }

packages/next/src/build/webpack-build/impl.ts

@@ -211,13 +211,13 @@ export async function webpackBuildImpl(
               ...clientEntry[CLIENT_STATIC_FILES_RUNTIME_MAIN_APP].import,
               value,
             ],
-            layer: WEBPACK_LAYERS.appClient,
+            layer: WEBPACK_LAYERS.appPagesBrowser,
           }
         } else {
           clientEntry[key] = {
             dependOn: [CLIENT_STATIC_FILES_RUNTIME_MAIN_APP],
             import: value,
-            layer: WEBPACK_LAYERS.appClient,
+            layer: WEBPACK_LAYERS.appPagesBrowser,
           }
         }
       }

packages/next/src/build/webpack-config.ts

@@ -1320,10 +1320,10 @@ export default async function getBaseWebpackConfig(
     }
 
     const isAppLayer = [
-      WEBPACK_LAYERS.server,
-      WEBPACK_LAYERS.client,
-      WEBPACK_LAYERS.appClient,
-      WEBPACK_LAYERS.action,
+      WEBPACK_LAYERS.reactServerComponents,
+      WEBPACK_LAYERS.serverSideRendering,
+      WEBPACK_LAYERS.appPagesBrowser,
+      WEBPACK_LAYERS.actionBrowser,
     ].includes(layer!)
 
     if (
@@ -1340,7 +1340,7 @@ export default async function getBaseWebpackConfig(
     }
 
     // Special internal modules that must be bundled for Server Components.
-    if (layer === WEBPACK_LAYERS.server) {
+    if (layer === WEBPACK_LAYERS.reactServerComponents) {
       // React needs to be bundled for Server Components so the special
       // `react-server` export condition can be used.
       if (reactPackagesRegex.test(request)) {
@@ -1361,9 +1361,9 @@ export default async function getBaseWebpackConfig(
         // override react-dom to server-rendering-stub for server
         if (
           request === 'react-dom' &&
-          (layer === WEBPACK_LAYERS.client ||
-            layer === WEBPACK_LAYERS.server ||
-            layer === WEBPACK_LAYERS.action)
+          (layer === WEBPACK_LAYERS.serverSideRendering ||
+            layer === WEBPACK_LAYERS.reactServerComponents ||
+            layer === WEBPACK_LAYERS.actionBrowser)
         ) {
           request = `next/dist/compiled/react-dom${bundledReactChannel}/server-rendering-stub`
         } else if (isAppLayer) {
@@ -1468,7 +1468,7 @@ export default async function getBaseWebpackConfig(
     // Early return if the request needs to be bundled, such as in the client layer.
     // Treat react packages and next internals as external for SSR layer,
     // also map react to builtin ones with require-hook.
-    if (layer === WEBPACK_LAYERS.client) {
+    if (layer === WEBPACK_LAYERS.serverSideRendering) {
       if (reactPackagesRegex.test(request)) {
         return `commonjs next/dist/compiled/${request.replace(
           /^(react-server-dom-webpack|react-dom|react)/,
@@ -1952,22 +1952,22 @@ export default async function getBaseWebpackConfig(
                 resourceQuery: new RegExp(
                   WEBPACK_RESOURCE_QUERIES.metadataRoute
                 ),
-                layer: WEBPACK_LAYERS.metadataRoute,
+                layer: WEBPACK_LAYERS.appMetadataRoute,
               },
               {
                 // Ensure that the app page module is in the client layers, this
                 // enables React to work correctly for RSC.
-                layer: WEBPACK_LAYERS.client,
+                layer: WEBPACK_LAYERS.serverSideRendering,
                 test: /next[\\/]dist[\\/](esm[\\/])?server[\\/]future[\\/]route-modules[\\/]app-page[\\/]module/,
               },
               {
                 // All app dir layers need to use this configured resolution logic
                 issuerLayer: {
                   or: [
-                    WEBPACK_LAYERS.server,
-                    WEBPACK_LAYERS.client,
-                    WEBPACK_LAYERS.appClient,
-                    WEBPACK_LAYERS.action,
+                    WEBPACK_LAYERS.reactServerComponents,
+                    WEBPACK_LAYERS.serverSideRendering,
+                    WEBPACK_LAYERS.appPagesBrowser,
+                    WEBPACK_LAYERS.actionBrowser,
                     WEBPACK_LAYERS.shared,
                   ],
                 },
@@ -2047,7 +2047,7 @@ export default async function getBaseWebpackConfig(
                 resourceQuery: new RegExp(
                   WEBPACK_RESOURCE_QUERIES.edgeSSREntry
                 ),
-                layer: WEBPACK_LAYERS.server,
+                layer: WEBPACK_LAYERS.reactServerComponents,
               },
             ]
           : []),
@@ -2085,7 +2085,7 @@ export default async function getBaseWebpackConfig(
                   },
                   {
                     test: codeCondition.test,
-                    issuerLayer: WEBPACK_LAYERS.client,
+                    issuerLayer: WEBPACK_LAYERS.serverSideRendering,
                     resolve: {
                       alias: createRSCAliases(bundledReactChannel, {
                         reactSharedSubset: false,
@@ -2099,7 +2099,7 @@ export default async function getBaseWebpackConfig(
               },
               {
                 test: codeCondition.test,
-                issuerLayer: WEBPACK_LAYERS.appClient,
+                issuerLayer: WEBPACK_LAYERS.appPagesBrowser,
                 resolve: {
                   alias: createRSCAliases(bundledReactChannel, {
                     // Only alias server rendering stub in client SSR layer.
@@ -2148,7 +2148,10 @@ export default async function getBaseWebpackConfig(
                   {
                     ...codeCondition,
                     issuerLayer: {
-                      or: [WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
+                      or: [
+                        WEBPACK_LAYERS.serverSideRendering,
+                        WEBPACK_LAYERS.appPagesBrowser,
+                      ],
                     },
                     exclude: [asyncStoragesRegex, codeCondition.exclude],
                     use: [
@@ -2323,7 +2326,7 @@ export default async function getBaseWebpackConfig(
         {
           test: /(node_modules|next[/\\]dist[/\\]compiled)[/\\]server-only[/\\]index.js/,
           loader: 'next-invalid-import-error-loader',
-          issuerLayer: WEBPACK_LAYERS.client,
+          issuerLayer: WEBPACK_LAYERS.serverSideRendering,
           options: {
             message:
               "'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.",

packages/next/src/build/webpack/config/blocks/css/index.ts

@@ -26,11 +26,19 @@ const regexSassGlobal = /(?<!\.module)\.(scss|sass)$/
 const regexSassModules = /\.module\.(scss|sass)$/
 
 const APP_LAYER_RULE = {
-  or: [WEBPACK_LAYERS.server, WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
+  or: [
+    WEBPACK_LAYERS.reactServerComponents,
+    WEBPACK_LAYERS.serverSideRendering,
+    WEBPACK_LAYERS.appPagesBrowser,
+  ],
 }
 
 const PAGES_LAYER_RULE = {
-  not: [WEBPACK_LAYERS.server, WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
+  not: [
+    WEBPACK_LAYERS.reactServerComponents,
+    WEBPACK_LAYERS.serverSideRendering,
+    WEBPACK_LAYERS.appPagesBrowser,
+  ],
 }
 
 /**

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -48,7 +48,7 @@ export type ActionManifest = {
       workers: {
         [name: string]: string | number
       }
-      // Record which layer the action is in (sc_server or sc_action), in the specific entry.
+      // Record which layer the action is in (rsc or sc_action), in the specific entry.
       layer: {
         [name: string]: string
       }
@@ -188,7 +188,7 @@ export class FlightClientEntryPlugin {
       const recordModule = (modId: string, mod: any) => {
         const modResource = mod.resourceResolveData?.path || mod.resource
 
-        if (mod.layer !== WEBPACK_LAYERS.client) {
+        if (mod.layer !== WEBPACK_LAYERS.serverSideRendering) {
           return
         }
 
@@ -720,7 +720,7 @@ export class FlightClientEntryPlugin {
       pluginState.injectedClientEntries[bundlePath] = clientLoader
     }
 
-    // Inject the entry to the server compiler (__sc_client__).
+    // Inject the entry to the server compiler (__ssr__).
     const clientComponentEntryDep = webpack.EntryPlugin.createDependency(
       clientSSRLoader,
       {
@@ -743,7 +743,7 @@ export class FlightClientEntryPlugin {
           name: entryName,
           // Layer should be client for the SSR modules
           // This ensures the client components are bundled on client layer
-          layer: WEBPACK_LAYERS.client,
+          layer: WEBPACK_LAYERS.serverSideRendering,
         }
       ),
       clientComponentEntryDep,
@@ -785,8 +785,8 @@ export class FlightClientEntryPlugin {
         }
         currentCompilerServerActions[id].workers[bundlePath] = ''
         currentCompilerServerActions[id].layer[bundlePath] = fromClient
-          ? WEBPACK_LAYERS.action
-          : WEBPACK_LAYERS.server
+          ? WEBPACK_LAYERS.actionBrowser
+          : WEBPACK_LAYERS.reactServerComponents
       }
     }
 
@@ -802,7 +802,9 @@ export class FlightClientEntryPlugin {
       actionEntryDep,
       {
         name: entryName,
-        layer: fromClient ? WEBPACK_LAYERS.action : WEBPACK_LAYERS.server,
+        layer: fromClient
+          ? WEBPACK_LAYERS.actionBrowser
+          : WEBPACK_LAYERS.reactServerComponents,
       }
     )
   }
@@ -869,7 +871,9 @@ export class FlightClientEntryPlugin {
         for (let name in action.workers) {
           const modId =
             pluginState.actionModServerId[name][
-              action.layer[name] === WEBPACK_LAYERS.action ? 'client' : 'server'
+              action.layer[name] === WEBPACK_LAYERS.actionBrowser
+                ? 'client'
+                : 'server'
             ]
           action.workers[name] = modId!
         }
@@ -881,7 +885,9 @@ export class FlightClientEntryPlugin {
         for (let name in action.workers) {
           const modId =
             pluginState.actionModEdgeServerId[name][
-              action.layer[name] === WEBPACK_LAYERS.action ? 'client' : 'server'
+              action.layer[name] === WEBPACK_LAYERS.actionBrowser
+                ? 'client'
+                : 'server'
             ]
           action.workers[name] = modId!
         }

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -185,7 +185,7 @@ export class ClientReferenceManifestPlugin {
       const requiredChunks = getAppPathRequiredChunks(chunkGroup)
       const recordModule = (id: ModuleId, mod: webpack.NormalModule) => {
         // Skip all modules from the pages folder.
-        if (mod.layer !== WEBPACK_LAYERS.appClient) {
+        if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) {
           return
         }
 
@@ -289,7 +289,7 @@ export class ClientReferenceManifestPlugin {
         const entryMods =
           compilation.chunkGraph.getChunkEntryModulesIterable(chunk)
         for (const mod of entryMods) {
-          if (mod.layer !== WEBPACK_LAYERS.appClient) continue
+          if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) continue
 
           const request = (mod as webpack.NormalModule).request
 

packages/next/src/build/webpack/plugins/next-types-plugin/index.ts

@@ -576,7 +576,7 @@ export class NextTypesPlugin {
         return
       }
 
-      if (mod.layer !== WEBPACK_LAYERS.server) return
+      if (mod.layer !== WEBPACK_LAYERS.reactServerComponents) return
 
       const IS_LAYOUT = /[/\\]layout\.[^./\\]+$/.test(mod.resource)
       const IS_PAGE = !IS_LAYOUT && /[/\\]page\.[^.]+$/.test(mod.resource)

packages/next/src/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts

@@ -24,7 +24,7 @@ export function deleteAppClientCache() {
   if ((global as any)._nextDeleteAppClientCache) {
     ;(global as any)._nextDeleteAppClientCache()
   }
-  // ensure we reset the cache for sc_server components
+  // ensure we reset the cache for rsc components
   // loaded via react-server-dom-webpack
   const reactServerDomModId = require.resolve(
     'react-server-dom-webpack/client.edge'

packages/next/src/lib/constants.ts

@@ -86,25 +86,56 @@ export const SERVER_RUNTIME: Record<string, ServerRuntime> = {
   nodejs: 'nodejs',
 }
 
+/**
+ * The names of the webpack layers. These layers are the primitives for the
+ * webpack chunks.
+ */
 const WEBPACK_LAYERS_NAMES = {
-  shared: 'sc_shared',
-  server: 'sc_server',
-  client: 'sc_client',
-  action: 'sc_action',
+  /**
+   * The layer for the shared code between the client and server bundles.
+   */
+  shared: 'shared',
+  /**
+   * React Server Components layer (rsc).
+   */
+  reactServerComponents: 'rsc',
+  /**
+   * Server Side Rendering layer (ssr).
+   */
+  serverSideRendering: 'ssr',
+  /**
+   * The browser client bundle layer for actions.
+   */
+  actionBrowser: 'actionBrowser',
+  /**
+   * The layer for the API routes.
+   */
   api: 'api',
+  /**
+   * The layer for the middleware code.
+   */
   middleware: 'middleware',
+  /**
+   * The layer for assets on the edge.
+   */
   edgeAsset: 'edge-asset',
-  appClient: 'app-client',
-  metadataRoute: 'app-metadata-route',
+  /**
+   * The browser client bundle layer for App directory.
+   */
+  appPagesBrowser: 'app-pages-browser',
+  /**
+   * The server bundle layer for metadata routes.
+   */
+  appMetadataRoute: 'app-metadata-route',
 }
 
 export const WEBPACK_LAYERS = {
   ...WEBPACK_LAYERS_NAMES,
   GROUP: {
     server: [
-      WEBPACK_LAYERS_NAMES.server,
-      WEBPACK_LAYERS_NAMES.action,
-      WEBPACK_LAYERS_NAMES.metadataRoute,
+      WEBPACK_LAYERS_NAMES.reactServerComponents,
+      WEBPACK_LAYERS_NAMES.actionBrowser,
+      WEBPACK_LAYERS_NAMES.appMetadataRoute,
     ],
   },
 }