5360440413
Currently, `next/dynamic` will opt-in to `React.lazy` if `{ suspense: true }` is used. And React 18 will always resolve the `Suspense` boundary on the server-side, effectively ignoring the `ssr` option.
The PR fixes #39609 by showing a warning message when `{ suspense: true, ssr: false }` is detected. The error documentation and the corresponding test case has also been updated.
In the future, Next.js could implement a custom version of `React.lazy` that could suspense without executing the lazy-loaded component on the server-side.
cc @huozhi
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
1.4 KiB
1.4 KiB
Invalid Usage of suspense Option of next/dynamic
Why This Error Occurred
- You are using
{ suspense: true }with React version older than 18. - You are using
{ suspense: true, ssr: false }. - You are using
{ suspense: true, loading }.
Possible Ways to Fix It
If you are using { suspense: true } with React version older than 18
- You can try upgrading to React 18 or newer
- If upgrading React is not an option, remove
{ suspense: true }fromnext/dynamicusages.
If you are using { suspense: true, ssr: false }
Next.js will use React.lazy when suspense is set to true. React 18 or newer will always try to resolve the Suspense boundary on the server. This behavior can not be disabled, thus the ssr: false is ignored with suspense: true.
- You should write code that works in both client-side and server-side.
- If rewriting the code is not an option, remove
{ suspense: true }fromnext/dynamicusages.
If you are using { suspense: true, loading }
Next.js will use React.lazy when suspense is set to true, when your dynamic-imported component is loading, React will use the closest suspense boundary's fallback.
You should remove loading from next/dynamic usages, and use <Suspense />'s fallback prop.