-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nested next/dynamic
is not preloaded during SSR
#45213
Comments
Can confirm this is still a bug. We're still experiencing issues where static builds dont contain the compiled CSS rather a inline JS script that targets elements.. which then get blocked by CSP rules. |
I think this is a fairly major issue still, since @huozhi's #45160 only partially fixed #45151. It essentially keeps us from upgrading past 13.0.6, at least without doing changes to our code splitting strategy. I think this bug might also have SEO implications, and even worse, it might break sites that have CSP that doesn't allow |
This does break our site since we have very strict CSP rules. We already had to work around the fact that NextJS injects a inline style to image tags.. <img style="color: transparent" ... /> all thought that one isn't as bad. As a result of this bug we opted not to go past v13.0.0 |
## Issue To address the problem that we introduced in 13.0.7 (#42589) where we thought we could use same implementation `next/dynamic` for both `pages/` and `app/` directory. But it turns out it leads to many problems, such as: * SSR preloading could miss the content, especially with nested dynamic calls * Closes #45213 * Introducing suspense boundary into `next/dynamic` with extra wrapped `<Suspense>` outside will lead to content is not resolevd during SSR * Related #45151 * Closes #45099 * Unexpected hydration errors for suspense boundaries. Though react removed this error but the 18.3 is not out yet. * Closes #44083 * Closes #45246 ## Solution Separate the dynamic implementation for `app/` dir and `pages/`. For `app/` dir we can encourage users to: * Directly use `React.lazy` + `Suspense` for SSR'd content, and `next/dynamic` * For non SSR components since it requires some internal integeration with next.js. For `pages/` dir we still keep the original implementation If you want to use `<Suspense>` with dynamic `fallback` value, use `React.lazy` + `Suspense` directly instead of picking up `next/dynamic` * Closes #45116 This will solve various issue before react 18.3 is out and let users still progressively upgrade to new versions of next.js. ## Bug Fix - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/fikrikarim/nested-next-dynamic-bug
To Reproduce
Create a nested
next/dynamic
component: import a component withnext/dynamic
, and inside that component, import another component withnext/dynamic
.Run
next build
andnext start
. Check the generated HTML.https://nested-next-dynamic-bug.vercel.app/
Describe the Bug
The recent PR #45160 fix React.lazy preloading during SSR. It's working, but it doesn't preload a nested
next/dynamic
.Expected Behavior
The generated HTML should contain the correct content by preloading all
next/dynamic
, even the nested ones.Next.js v13.0.6
has the expected behavior:https://nested-next-dynamic-dbn5z8i2d-fikrikarim.vercel.app/
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: