Fix css FOUC in dynamic component

[huozhi]

What

CSS imports in components that loaded by next/dynamic in client components will cause the css are missing initial in
SSR, and loaded later on client side which will lead to FOUC. This PR fixes the issue and get CSS preloaded in the SSR for dynamic components.

Why

The CSS from client components that created through next/dynamic are not collected in the SSR, unlike RSC rendering we already collect the CSS resources for each entry so we included them in the server rendering so the styles are availble at that time. But for client components, we didn't traverse all the client components and collect the CSS resources.

In pages router we kinda collect all the dynamic imports and preload them during SSR, but this approach is not able to be applied to app router due to different architecture. Since we already have all the dynamic imports info and their related chunks in react-loadable-manifest, so we can do the similar "preloading" thing in app router. We use the current dynamic module key (app/page.js -> ../components/foo.js) which created by SWC transform and match it in the react loadable manifest that accessed from AsyncLocalStorage, to get the css files created by webpack then render them as preload styleshee links. In this way we can SSR all the related CSS resources for dynamic client components.

The reason we pass down the react loadable manifest through AsyncLocalStorage is that it's sort of exclude the manifest from RSC payload as it's not required for hydration, but only required for SSR.

Note: this issue only occurred in dynamic rendering case for client components.

Other Changes Overview

• Change the react loadable manifest key from pages dir based relative path to a source dir based relative path, to support cases with both directory or only one of them

Closes NEXT-2578
Fixes #61212
Fixes #61111
Fixes #62940

Replacement for #64021 but only with production test

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
buildDuration	14s	14.1s	⚠️ +173ms
buildDurationCached	7.6s	6.2s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +28.1 kB
nextStartRea..uration (ms)	397ms	415ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
2453-HASH.js gzip	31.4 kB	31.4 kB	N/A
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	✓
8299-HASH.js gzip	5.05 kB	5.05 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.68 kB	1.68 kB	N/A
Overall change	99 kB	99 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.22 kB	4.22 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	2.36 kB	2.36 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
_buildManifest.js gzip	483 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
index.html gzip	530 B	528 B	N/A
link.html gzip	542 B	542 B	✓
withRouter.html gzip	525 B	523 B	N/A
Overall change	542 B	542 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
edge-ssr.js gzip	95.5 kB	95.6 kB	N/A
page.js gzip	3.06 kB	3.06 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
middleware-b..fest.js gzip	624 B	624 B	✓
middleware-r..fest.js gzip	151 B	156 B	N/A
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	1.46 kB	1.46 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
app-page-exp...dev.js gzip	170 kB	170 kB	N/A
app-page-exp..prod.js gzip	97.3 kB	97.4 kB	N/A
app-page-tur..prod.js gzip	99.1 kB	99.1 kB	N/A
app-page-tur..prod.js gzip	93.3 kB	93.4 kB	N/A
app-page.run...dev.js gzip	144 kB	144 kB	N/A
app-page.run..prod.js gzip	91.8 kB	91.9 kB	N/A
app-route-ex...dev.js gzip	21.4 kB	21.5 kB	N/A
app-route-ex..prod.js gzip	15.1 kB	15.2 kB	N/A
app-route-tu..prod.js gzip	15.1 kB	15.2 kB	N/A
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route.ru...dev.js gzip	21.1 kB	21.1 kB	N/A
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	N/A
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	22.5 kB	22.5 kB	✓
pages.runtim...dev.js gzip	23.1 kB	23.1 kB	✓
pages.runtim..prod.js gzip	22.5 kB	22.5 kB	✓
server.runti..prod.js gzip	51.3 kB	51.3 kB	✓
Overall change	148 kB	148 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js dynamic-css-prod	Change
0.pack gzip	1.58 MB	1.59 MB	⚠️ +2.25 kB
index.pack gzip	106 kB	106 kB	⚠️ +291 B
Overall change	1.69 MB	1.69 MB	⚠️ +2.54 kB

Diff details

Diff for middleware-r..-manifest.js

@@ -1,2 +1,2 @@
 self.__REACT_LOADABLE_MANIFEST =
-  '{"dynamic.js -> ../components/hello":{"id":3304,"files":["static/chunks/3304.4547d625a3435816.js"]}}';
+  '{"pages/dynamic.js -> ../components/hello":{"id":1682,"files":["static/chunks/1682.82f59716e81715f7.js"]}}';

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Commit: b0f6125