SSR page content when using vike-react-query and suspense queries

[jasonhilldm]

I am using withFallback from vike-react-query and useSuspenseQuery @tanstack/react-query to fetch data for my test page via telefunc. I also have SSR enabled.

Everything is working fine and the page content is loading correctly. But, I have noticed that on the first page load, the HTML in view source is showing the content of the loading component specified in the withFallback wrapper rather than the final page content (after the suspense query has completed).

The same thing happens when using a manual Suspense boundary instead of the withFallback wrapper. Is there a way to SSR the full page content (after suspense queries have executed) so that the initial page HTML is complete?

[brillout]

brillout/react-streaming@8bc4d32
vikejs/vike-react@3ea20c1

[brillout]

the HTML in view source is showing the content of the loading component specified in the withFallback wrapper rather than the final page content (after the suspense query has completed

You should be seeing both. If you don't see both then it's a bug and minimal reproduction welcome.

[jasonhilldm]

My bad. I failed to scroll to the far right of the source (after the inline script) to see the later rendered content, so I was only seeing the loading placeholders initially in the expected page locations.

This raised a concern for me though...the position of content on the page can be important from an SEO perspective, so having the content appended to the bottom of the page and outside of any layout containers, could have an impact on the ranking of the content on the page.

Then I noticed that your readme for react-streaming mention that streaming is disabled for bots by default. So, I tested locally by simulating a Googlebot user agent string and the final content was placed into the page in the correct locations, replacing the loading placeholders.

So awesome! You have thought of everything!