[turbopack] Fix css FOUC in dynamic component #64021
Merged
Conversation
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
ijjk
added
area: tests
Turbopack
Tests Passed |
Stats from current PRDefault BuildGeneral
Client Bundles (main, webpack)
Legacy Client Bundles (polyfills)
Client Pages
Client Build Manifests
Rendered Page Sizes
Edge SSR bundle Size
Middleware size
Next Runtimes
build cache
Diff detailsDiff for middleware.jsDiff too large to display |
huozhi
changed the title
gnoff
reviewed
Apr 3, 2024
packages/next/src/server/async-storage/request-async-storage-wrapper.ts
Outdated
Show resolved
Hide resolved
huozhi
changed the title
huozhi
added a commit
that referenced
this pull request
Apr 10, 2024
### 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
huozhi
changed the title
huozhi
requested review from
timneutkens,
ijjk,
shuding,
a team,
feedthejim and
ztanner
as code owners
|
All of changes are commited by @sokra and LGTM |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Follow up for #64294 to make turbopack side work as well