Skip to content

Commit 87763d7

Browse files
wyattjohwyattjoh
authored
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 ```
1 parent fc86c41 commit 87763d7

File tree

11 files changed

+110
-59
lines changed

11 files changed

+110
-59
lines changed

‎packages/next/src/build/entries.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ export function getEdgeServerEntry(opts: {
314314

315315
return {
316316
import: `next-edge-app-route-loader?${stringify(loaderParams)}!`,
317-
layer: WEBPACK_LAYERS.server,
317+
layer: WEBPACK_LAYERS.reactServerComponents,
318318
}
319319
}
320320
if (isMiddlewareFile(opts.page)) {
@@ -386,14 +386,14 @@ export function getEdgeServerEntry(opts: {
386386
// The Edge bundle includes the server in its entrypoint, so it has to
387387
// be in the SSR layer — we later convert the page request to the RSC layer
388388
// via a webpack rule.
389-
layer: opts.appDirLoader ? WEBPACK_LAYERS.client : undefined,
389+
layer: opts.appDirLoader ? WEBPACK_LAYERS.serverSideRendering : undefined,
390390
}
391391
}
392392

393393
export function getAppEntry(opts: Readonly<AppLoaderOptions>) {
394394
return {
395395
import: `next-app-loader?${stringify(opts)}!`,
396-
layer: WEBPACK_LAYERS.server,
396+
layer: WEBPACK_LAYERS.reactServerComponents,
397397
}
398398
}
399399

@@ -716,7 +716,7 @@ export function finalizeEntrypoint({
716716
layer: isApi
717717
? WEBPACK_LAYERS.api
718718
: isServerComponent
719-
? WEBPACK_LAYERS.server
719+
? WEBPACK_LAYERS.reactServerComponents
720720
: undefined,
721721
...entry,
722722
}
@@ -751,7 +751,7 @@ export function finalizeEntrypoint({
751751
if (isAppLayer) {
752752
return {
753753
dependOn: CLIENT_STATIC_FILES_RUNTIME_MAIN_APP,
754-
layer: WEBPACK_LAYERS.appClient,
754+
layer: WEBPACK_LAYERS.appPagesBrowser,
755755
...entry,
756756
}
757757
}
@@ -767,7 +767,7 @@ export function finalizeEntrypoint({
767767

768768
if (isAppLayer) {
769769
return {
770-
layer: WEBPACK_LAYERS.appClient,
770+
layer: WEBPACK_LAYERS.appPagesBrowser,
771771
...entry,
772772
}
773773
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,13 @@ export async function webpackBuildImpl(
211211
...clientEntry[CLIENT_STATIC_FILES_RUNTIME_MAIN_APP].import,
212212
value,
213213
],
214-
layer: WEBPACK_LAYERS.appClient,
214+
layer: WEBPACK_LAYERS.appPagesBrowser,
215215
}
216216
} else {
217217
clientEntry[key] = {
218218
dependOn: [CLIENT_STATIC_FILES_RUNTIME_MAIN_APP],
219219
import: value,
220-
layer: WEBPACK_LAYERS.appClient,
220+
layer: WEBPACK_LAYERS.appPagesBrowser,
221221
}
222222
}
223223
}

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

+23-20
Original file line numberDiff line numberDiff line change
@@ -1320,10 +1320,10 @@ export default async function getBaseWebpackConfig(
13201320
}
13211321

13221322
const isAppLayer = [
1323-
WEBPACK_LAYERS.server,
1324-
WEBPACK_LAYERS.client,
1325-
WEBPACK_LAYERS.appClient,
1326-
WEBPACK_LAYERS.action,
1323+
WEBPACK_LAYERS.reactServerComponents,
1324+
WEBPACK_LAYERS.serverSideRendering,
1325+
WEBPACK_LAYERS.appPagesBrowser,
1326+
WEBPACK_LAYERS.actionBrowser,
13271327
].includes(layer!)
13281328

13291329
if (
@@ -1340,7 +1340,7 @@ export default async function getBaseWebpackConfig(
13401340
}
13411341

13421342
// Special internal modules that must be bundled for Server Components.
1343-
if (layer === WEBPACK_LAYERS.server) {
1343+
if (layer === WEBPACK_LAYERS.reactServerComponents) {
13441344
// React needs to be bundled for Server Components so the special
13451345
// `react-server` export condition can be used.
13461346
if (reactPackagesRegex.test(request)) {
@@ -1361,9 +1361,9 @@ export default async function getBaseWebpackConfig(
13611361
// override react-dom to server-rendering-stub for server
13621362
if (
13631363
request === 'react-dom' &&
1364-
(layer === WEBPACK_LAYERS.client ||
1365-
layer === WEBPACK_LAYERS.server ||
1366-
layer === WEBPACK_LAYERS.action)
1364+
(layer === WEBPACK_LAYERS.serverSideRendering ||
1365+
layer === WEBPACK_LAYERS.reactServerComponents ||
1366+
layer === WEBPACK_LAYERS.actionBrowser)
13671367
) {
13681368
request = `next/dist/compiled/react-dom${bundledReactChannel}/server-rendering-stub`
13691369
} else if (isAppLayer) {
@@ -1468,7 +1468,7 @@ export default async function getBaseWebpackConfig(
14681468
// Early return if the request needs to be bundled, such as in the client layer.
14691469
// Treat react packages and next internals as external for SSR layer,
14701470
// also map react to builtin ones with require-hook.
1471-
if (layer === WEBPACK_LAYERS.client) {
1471+
if (layer === WEBPACK_LAYERS.serverSideRendering) {
14721472
if (reactPackagesRegex.test(request)) {
14731473
return `commonjs next/dist/compiled/${request.replace(
14741474
/^(react-server-dom-webpack|react-dom|react)/,
@@ -1952,22 +1952,22 @@ export default async function getBaseWebpackConfig(
19521952
resourceQuery: new RegExp(
19531953
WEBPACK_RESOURCE_QUERIES.metadataRoute
19541954
),
1955-
layer: WEBPACK_LAYERS.metadataRoute,
1955+
layer: WEBPACK_LAYERS.appMetadataRoute,
19561956
},
19571957
{
19581958
// Ensure that the app page module is in the client layers, this
19591959
// enables React to work correctly for RSC.
1960-
layer: WEBPACK_LAYERS.client,
1960+
layer: WEBPACK_LAYERS.serverSideRendering,
19611961
test: /next[\\/]dist[\\/](esm[\\/])?server[\\/]future[\\/]route-modules[\\/]app-page[\\/]module/,
19621962
},
19631963
{
19641964
// All app dir layers need to use this configured resolution logic
19651965
issuerLayer: {
19661966
or: [
1967-
WEBPACK_LAYERS.server,
1968-
WEBPACK_LAYERS.client,
1969-
WEBPACK_LAYERS.appClient,
1970-
WEBPACK_LAYERS.action,
1967+
WEBPACK_LAYERS.reactServerComponents,
1968+
WEBPACK_LAYERS.serverSideRendering,
1969+
WEBPACK_LAYERS.appPagesBrowser,
1970+
WEBPACK_LAYERS.actionBrowser,
19711971
WEBPACK_LAYERS.shared,
19721972
],
19731973
},
@@ -2047,7 +2047,7 @@ export default async function getBaseWebpackConfig(
20472047
resourceQuery: new RegExp(
20482048
WEBPACK_RESOURCE_QUERIES.edgeSSREntry
20492049
),
2050-
layer: WEBPACK_LAYERS.server,
2050+
layer: WEBPACK_LAYERS.reactServerComponents,
20512051
},
20522052
]
20532053
: []),
@@ -2085,7 +2085,7 @@ export default async function getBaseWebpackConfig(
20852085
},
20862086
{
20872087
test: codeCondition.test,
2088-
issuerLayer: WEBPACK_LAYERS.client,
2088+
issuerLayer: WEBPACK_LAYERS.serverSideRendering,
20892089
resolve: {
20902090
alias: createRSCAliases(bundledReactChannel, {
20912091
reactSharedSubset: false,
@@ -2099,7 +2099,7 @@ export default async function getBaseWebpackConfig(
20992099
},
21002100
{
21012101
test: codeCondition.test,
2102-
issuerLayer: WEBPACK_LAYERS.appClient,
2102+
issuerLayer: WEBPACK_LAYERS.appPagesBrowser,
21032103
resolve: {
21042104
alias: createRSCAliases(bundledReactChannel, {
21052105
// Only alias server rendering stub in client SSR layer.
@@ -2148,7 +2148,10 @@ export default async function getBaseWebpackConfig(
21482148
{
21492149
...codeCondition,
21502150
issuerLayer: {
2151-
or: [WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
2151+
or: [
2152+
WEBPACK_LAYERS.serverSideRendering,
2153+
WEBPACK_LAYERS.appPagesBrowser,
2154+
],
21522155
},
21532156
exclude: [asyncStoragesRegex, codeCondition.exclude],
21542157
use: [
@@ -2323,7 +2326,7 @@ export default async function getBaseWebpackConfig(
23232326
{
23242327
test: /(node_modules|next[/\\]dist[/\\]compiled)[/\\]server-only[/\\]index.js/,
23252328
loader: 'next-invalid-import-error-loader',
2326-
issuerLayer: WEBPACK_LAYERS.client,
2329+
issuerLayer: WEBPACK_LAYERS.serverSideRendering,
23272330
options: {
23282331
message:
23292332
"'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

+10-2
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,19 @@ const regexSassGlobal = /(?<!\.module)\.(scss|sass)$/
2626
const regexSassModules = /\.module\.(scss|sass)$/
2727

2828
const APP_LAYER_RULE = {
29-
or: [WEBPACK_LAYERS.server, WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
29+
or: [
30+
WEBPACK_LAYERS.reactServerComponents,
31+
WEBPACK_LAYERS.serverSideRendering,
32+
WEBPACK_LAYERS.appPagesBrowser,
33+
],
3034
}
3135

3236
const PAGES_LAYER_RULE = {
33-
not: [WEBPACK_LAYERS.server, WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
37+
not: [
38+
WEBPACK_LAYERS.reactServerComponents,
39+
WEBPACK_LAYERS.serverSideRendering,
40+
WEBPACK_LAYERS.appPagesBrowser,
41+
],
3442
}
3543

3644
/**

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

+15-9
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export type ActionManifest = {
4848
workers: {
4949
[name: string]: string | number
5050
}
51-
// Record which layer the action is in (sc_server or sc_action), in the specific entry.
51+
// Record which layer the action is in (rsc or sc_action), in the specific entry.
5252
layer: {
5353
[name: string]: string
5454
}
@@ -188,7 +188,7 @@ export class FlightClientEntryPlugin {
188188
const recordModule = (modId: string, mod: any) => {
189189
const modResource = mod.resourceResolveData?.path || mod.resource
190190

191-
if (mod.layer !== WEBPACK_LAYERS.client) {
191+
if (mod.layer !== WEBPACK_LAYERS.serverSideRendering) {
192192
return
193193
}
194194

@@ -720,7 +720,7 @@ export class FlightClientEntryPlugin {
720720
pluginState.injectedClientEntries[bundlePath] = clientLoader
721721
}
722722

723-
// Inject the entry to the server compiler (__sc_client__).
723+
// Inject the entry to the server compiler (__ssr__).
724724
const clientComponentEntryDep = webpack.EntryPlugin.createDependency(
725725
clientSSRLoader,
726726
{
@@ -743,7 +743,7 @@ export class FlightClientEntryPlugin {
743743
name: entryName,
744744
// Layer should be client for the SSR modules
745745
// This ensures the client components are bundled on client layer
746-
layer: WEBPACK_LAYERS.client,
746+
layer: WEBPACK_LAYERS.serverSideRendering,
747747
}
748748
),
749749
clientComponentEntryDep,
@@ -785,8 +785,8 @@ export class FlightClientEntryPlugin {
785785
}
786786
currentCompilerServerActions[id].workers[bundlePath] = ''
787787
currentCompilerServerActions[id].layer[bundlePath] = fromClient
788-
? WEBPACK_LAYERS.action
789-
: WEBPACK_LAYERS.server
788+
? WEBPACK_LAYERS.actionBrowser
789+
: WEBPACK_LAYERS.reactServerComponents
790790
}
791791
}
792792

@@ -802,7 +802,9 @@ export class FlightClientEntryPlugin {
802802
actionEntryDep,
803803
{
804804
name: entryName,
805-
layer: fromClient ? WEBPACK_LAYERS.action : WEBPACK_LAYERS.server,
805+
layer: fromClient
806+
? WEBPACK_LAYERS.actionBrowser
807+
: WEBPACK_LAYERS.reactServerComponents,
806808
}
807809
)
808810
}
@@ -869,7 +871,9 @@ export class FlightClientEntryPlugin {
869871
for (let name in action.workers) {
870872
const modId =
871873
pluginState.actionModServerId[name][
872-
action.layer[name] === WEBPACK_LAYERS.action ? 'client' : 'server'
874+
action.layer[name] === WEBPACK_LAYERS.actionBrowser
875+
? 'client'
876+
: 'server'
873877
]
874878
action.workers[name] = modId!
875879
}
@@ -881,7 +885,9 @@ export class FlightClientEntryPlugin {
881885
for (let name in action.workers) {
882886
const modId =
883887
pluginState.actionModEdgeServerId[name][
884-
action.layer[name] === WEBPACK_LAYERS.action ? 'client' : 'server'
888+
action.layer[name] === WEBPACK_LAYERS.actionBrowser
889+
? 'client'
890+
: 'server'
885891
]
886892
action.workers[name] = modId!
887893
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ export class ClientReferenceManifestPlugin {
185185
const requiredChunks = getAppPathRequiredChunks(chunkGroup)
186186
const recordModule = (id: ModuleId, mod: webpack.NormalModule) => {
187187
// Skip all modules from the pages folder.
188-
if (mod.layer !== WEBPACK_LAYERS.appClient) {
188+
if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) {
189189
return
190190
}
191191

@@ -289,7 +289,7 @@ export class ClientReferenceManifestPlugin {
289289
const entryMods =
290290
compilation.chunkGraph.getChunkEntryModulesIterable(chunk)
291291
for (const mod of entryMods) {
292-
if (mod.layer !== WEBPACK_LAYERS.appClient) continue
292+
if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) continue
293293

294294
const request = (mod as webpack.NormalModule).request
295295

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ export class NextTypesPlugin {
576576
return
577577
}
578578

579-
if (mod.layer !== WEBPACK_LAYERS.server) return
579+
if (mod.layer !== WEBPACK_LAYERS.reactServerComponents) return
580580

581581
const IS_LAYOUT = /[/\\]layout\.[^./\\]+$/.test(mod.resource)
582582
const IS_PAGE = !IS_LAYOUT && /[/\\]page\.[^.]+$/.test(mod.resource)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function deleteAppClientCache() {
2424
if ((global as any)._nextDeleteAppClientCache) {
2525
;(global as any)._nextDeleteAppClientCache()
2626
}
27-
// ensure we reset the cache for sc_server components
27+
// ensure we reset the cache for rsc components
2828
// loaded via react-server-dom-webpack
2929
const reactServerDomModId = require.resolve(
3030
'react-server-dom-webpack/client.edge'

‎packages/next/src/lib/constants.ts

+40-9
Original file line numberDiff line numberDiff line change
@@ -86,25 +86,56 @@ export const SERVER_RUNTIME: Record<string, ServerRuntime> = {
8686
nodejs: 'nodejs',
8787
}
8888

89+
/**
90+
* The names of the webpack layers. These layers are the primitives for the
91+
* webpack chunks.
92+
*/
8993
const WEBPACK_LAYERS_NAMES = {
90-
shared: 'sc_shared',
91-
server: 'sc_server',
92-
client: 'sc_client',
93-
action: 'sc_action',
94+
/**
95+
* The layer for the shared code between the client and server bundles.
96+
*/
97+
shared: 'shared',
98+
/**
99+
* React Server Components layer (rsc).
100+
*/
101+
reactServerComponents: 'rsc',
102+
/**
103+
* Server Side Rendering layer (ssr).
104+
*/
105+
serverSideRendering: 'ssr',
106+
/**
107+
* The browser client bundle layer for actions.
108+
*/
109+
actionBrowser: 'actionBrowser',
110+
/**
111+
* The layer for the API routes.
112+
*/
94113
api: 'api',
114+
/**
115+
* The layer for the middleware code.
116+
*/
95117
middleware: 'middleware',
118+
/**
119+
* The layer for assets on the edge.
120+
*/
96121
edgeAsset: 'edge-asset',
97-
appClient: 'app-client',
98-
metadataRoute: 'app-metadata-route',
122+
/**
123+
* The browser client bundle layer for App directory.
124+
*/
125+
appPagesBrowser: 'app-pages-browser',
126+
/**
127+
* The server bundle layer for metadata routes.
128+
*/
129+
appMetadataRoute: 'app-metadata-route',
99130
}
100131

101132
export const WEBPACK_LAYERS = {
102133
...WEBPACK_LAYERS_NAMES,
103134
GROUP: {
104135
server: [
105-
WEBPACK_LAYERS_NAMES.server,
106-
WEBPACK_LAYERS_NAMES.action,
107-
WEBPACK_LAYERS_NAMES.metadataRoute,
136+
WEBPACK_LAYERS_NAMES.reactServerComponents,
137+
WEBPACK_LAYERS_NAMES.actionBrowser,
138+
WEBPACK_LAYERS_NAMES.appMetadataRoute,
108139
],
109140
},
110141
}

0 commit comments

Comments
 (0)