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 |
huozhi
added
the
Lazy Loading
## 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/dynamiccomponent: import a component withnext/dynamic, and inside that component, import another component withnext/dynamic.Run
next buildandnext 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.6has 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: