-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix css FOUC in dynamic component (#64294)
### 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
- Loading branch information
Showing
45 changed files
with
283 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 4 additions & 6 deletions
10
...crates/next-custom-transforms/tests/fixture/next-dynamic/duplicated-imports/output-dev.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,16 @@ | ||
import dynamic1 from 'next/dynamic'; | ||
import dynamic2 from 'next/dynamic'; | ||
const DynamicComponent1 = dynamic1(()=>import('../components/hello1') | ||
, { | ||
const DynamicComponent1 = dynamic1(()=>import('../components/hello1'), { | ||
loadableGenerated: { | ||
modules: [ | ||
"some-file.js -> " + "../components/hello1" | ||
"src/some-file.js -> " + "../components/hello1" | ||
] | ||
} | ||
}); | ||
const DynamicComponent2 = dynamic2(()=>import('../components/hello2') | ||
, { | ||
const DynamicComponent2 = dynamic2(()=>import('../components/hello2'), { | ||
loadableGenerated: { | ||
modules: [ | ||
"some-file.js -> " + "../components/hello2" | ||
"src/some-file.js -> " + "../components/hello2" | ||
] | ||
} | ||
}); |
10 changes: 4 additions & 6 deletions
10
...tes/next-custom-transforms/tests/fixture/next-dynamic/duplicated-imports/output-server.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,16 @@ | ||
import dynamic1 from 'next/dynamic'; | ||
import dynamic2 from 'next/dynamic'; | ||
const DynamicComponent1 = dynamic1(()=>import('../components/hello1') | ||
, { | ||
const DynamicComponent1 = dynamic1(()=>import('../components/hello1'), { | ||
loadableGenerated: { | ||
modules: [ | ||
"some-file.js -> " + "../components/hello1" | ||
"src/some-file.js -> " + "../components/hello1" | ||
] | ||
} | ||
}); | ||
const DynamicComponent2 = dynamic2(()=>import('../components/hello2') | ||
, { | ||
const DynamicComponent2 = dynamic2(()=>import('../components/hello2'), { | ||
loadableGenerated: { | ||
modules: [ | ||
"some-file.js -> " + "../components/hello2" | ||
"src/some-file.js -> " + "../components/hello2" | ||
] | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 2 additions & 3 deletions
5
...tes/next-custom-transforms/tests/fixture/next-dynamic/member-with-same-name/output-dev.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 2 additions & 3 deletions
5
.../next-custom-transforms/tests/fixture/next-dynamic/member-with-same-name/output-server.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 2 additions & 3 deletions
5
...ext-swc/crates/next-custom-transforms/tests/fixture/next-dynamic/no-options/output-dev.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,8 @@ | ||
import dynamic from 'next/dynamic'; | ||
const DynamicComponent = dynamic(()=>import('../components/hello') | ||
, { | ||
const DynamicComponent = dynamic(()=>import('../components/hello'), { | ||
loadableGenerated: { | ||
modules: [ | ||
"some-file.js -> " + "../components/hello" | ||
"src/some-file.js -> " + "../components/hello" | ||
] | ||
} | ||
}); |
5 changes: 2 additions & 3 deletions
5
...-swc/crates/next-custom-transforms/tests/fixture/next-dynamic/no-options/output-server.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,8 @@ | ||
import dynamic from 'next/dynamic'; | ||
const DynamicComponent = dynamic(()=>import('../components/hello') | ||
, { | ||
const DynamicComponent = dynamic(()=>import('../components/hello'), { | ||
loadableGenerated: { | ||
modules: [ | ||
"some-file.js -> " + "../components/hello" | ||
"src/some-file.js -> " + "../components/hello" | ||
] | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.