Wrapping the whole app with suspense
Answered
Balinese posted this in #help-forum
BalineseOP
I'm using the latest version with app router
Is there any negative sides to wrapping the whole app in layout.tsx with Suspense?
thanks
Is there any negative sides to wrapping the whole app in layout.tsx with Suspense?
thanks
Answered by Lukas
Yesn't. Right now, no. But, when PPR and PFPR are introduced, it might(?). Best practice is to create a separate loading.js file and let nextjs add the suspense in there for you.
To do so, make a file called
To do so, make a file called
loading.js (or whatever file extension), then put whatever you wanted to put as a fallback in that file. From there, it just just work.13 Replies
Yesn't. Right now, no. But, when PPR and PFPR are introduced, it might(?). Best practice is to create a separate loading.js file and let nextjs add the suspense in there for you.
To do so, make a file called
To do so, make a file called
loading.js (or whatever file extension), then put whatever you wanted to put as a fallback in that file. From there, it just just work.Answer
BalineseOP
thank you!
If the whole app were wrapped would the entire app show the suspense fallback until every async operation it wraps is finished?
ideally you would have more suspense inside of it
Or does it only show the fallback until the async operations that create the React element immediately inside the Suspense element finish and the element renders?
it would suspend until all of the api calls that aren't wrapped in another suspense are completed
but the alternative is a blank white screen
so this is better
very much depends on your personal use case though
Ah okay so it's not all descendants of the top level <Suspense>. It's all descendants until we find another <Suspense> boundary.
yes
iirc it will waterfall suspense boundaries though
so a suspense boundary won't get hit until the outer suspense is finished rendering