Can dynamic() imports fallback to a <Suspense/> boundary up the tree still? Or only using the new loading() parameter #44412
-
|
Previous next docs said that when a dynamic import suspends, it will fallback to the nearest suspense boundary up the tree. Now, there is a loading parameter in the dynamic() interface to define the fallback component as an argument – however, defining the fallback as a loading argument always wraps the imported module as a direct parent. II cannot find a way to make it fallback to boundaries higher up the tree. Does anyone know if dynamic() still allows falling back to boundaries higher up the tree? (instead of providing a loading() argument) |
Beta Was this translation helpful? Give feedback.
Replies: 1 suggested answer 1 reply
-
|
I am not sure what you mean. React.lazy's behaviour is to suspend, and it requires a Suspense wrapper. next/dynamic went ahead and tried to implement all of the above, library loading, lazy client bundle, with or without SSR, a custom loading placeholder, etc. The package itself has evolved quite a bit, but there's a few gotchas with React 18. In React 18 Server Components, the loading is awaited, so it might not be behaving at all as you expect it. If we follow the docs:
And now a couple of clarification questions, are you on app, or pages? Couldn't you just use React.lazy instead? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @icyJoseph! Using Reacy.lazy() directly achieved the behavior I was seeking, where suspense would fallback to a suspense boundary a few nodes up the tree (whereas next/dynamic seems to implement a suspense boundary in the component, preventing falling back further – which is great in many cases!). To answer your other questions (for future reader context), I was using the pages directory in next13. |
Beta Was this translation helpful? Give feedback.
I am not sure what you mean.
next/dynamicis a sort of enhanced version of React.lazy. And both are facades or wrappers, forimport(). It's not always the case that one would want to lazily/dynamically, load a component, but also a library.React.lazy's behaviour is to suspend, and it requires a Suspense wrapper. next/dynamic went ahead and tried to implement all of the above, library loading, lazy client bundle, with or without SSR, a custom loading placeholder, etc. The package itself has evolved quite a bit, but there's a few gotchas with React 18.
In React 18 Server Components, the loading is awaited, so it might not be behaving at all as you expect it.
If we follow the docs: