Suspense fallback is rendered in initial HTML

[MarkLauer]

Hi, I'm trying to use useSuspenseQuery for SSR, the request is executed on the server and the data is rendered to the initial HTML into a hidden div. Initially a fallback is rendered and then after the scripts load the fallback gets switched with prerendered HTML. I don't really get the point why it doesn't show the rendered data right away (the HTML for it is already rendered but hidden). Is it supposed to be this way?

Here's a demo.

[phryneas]

I think that's how streaming SSR in general works - everything that is not part of the initial flush cannot be just appended to the end of the DOM, so it is streamed over as a template, and the React runtime will then move it into the correct position.

As for the loading fallbacks, this seems to be a timing thing: If a suspense boundary finishes loading very fast, the loading state is skipped, but if it takes a moment longer (I don't know the cutoff), the fallback is rendered and later replaced - I think at initial loading, the cutoff is lower as otherwise it couldn't render anything at all.

[MarkLauer]

@phryneas my concern was that SEO could be affected by this, but it seems that crawlers see the page with the data rendered, so maybe everything works as intended 😄 . Thanks for explanation!

[moog16]

It seems like there is a PreloadQuery component which I'm going to try to use to solve the SEO issue

[phryneas]

@moog16 with today's knowledge I can say that there is no "SEO issue" in the first place:

What you see in the browser is not what a crawler would see - Next.js detects search engine crawlers and doesn't render suspense fallbacks for them, but instead delays the page render until all data is available and then flushes the full page to them.