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).1 Reply
African 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?