loading.tsx acts as an "pre-rendering barrier" preventing it even w/o static content behind it
Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
I've noticed that if I have a page with entirely static content (or more specifically, static content but then a <Suspense> wrapping the dynamic content - as I'm using cacheComponents/PPR), if I have a
I would have expected, given that there is no dynamic content blocking pre-rendering, that in this case the whole page can be pre-rendered/ISR'd.
This is pretty problematic for my use case, as this is a hosted app builder where the page may, or may not, directly opt-in to dynamic rendering (depending on the generated content). I was hoping that for pages that do, the loading.tsx would catch them and handle dynamic rendering - but for pages that don't we could statically render them.
As it stands, I could add a <Suspense> manually if I know the page will be dynamically rendered, but then this breaks using
loading.tsx in front of it, the only thing that gets pre-rendered is the loading.tsx. Removing the loading.tsx correctly pre-renders the full page.I would have expected, given that there is no dynamic content blocking pre-rendering, that in this case the whole page can be pre-rendered/ISR'd.
This is pretty problematic for my use case, as this is a hosted app builder where the page may, or may not, directly opt-in to dynamic rendering (depending on the generated content). I was hoping that for pages that do, the loading.tsx would catch them and handle dynamic rendering - but for pages that don't we could statically render them.
As it stands, I could add a <Suspense> manually if I know the page will be dynamically rendered, but then this breaks using
useTransition + router.push to show a transition indicator when navigating between pages, as the transition completes immediately (unlike when loading.tsx is there).4 Replies
Western paper wasp
hi.
If you need prerendering, remove
loading.tsx always enables streaming/dynamics and thus blocks static prerendering (ISR/SSG) for the segment, even if the content inside is static.If you need prerendering, remove
loading.tsx and use Suspense only where there is actual dynamicsAfrican Slender-snouted CrocodileOP
Right, my follow up question I hinted at was that if I use Suspense like that, then using
startTransition(() => router.push('..')) will immediately transition to that page (which will then show its suspense) instead of displaying my page-loading indicator (I'm using this to show a pulsing bar at the top of the screen while content is fetching). Is there any way around that?Western paper wasp
As far as I understand, it is impossible to completely bypass the case
but maybe someone knows another way