Progressive Rendering

[brillout]

React 18 introduced Progressive Rendering.

Does Vue support this? If not, it could be nice to find/create/follow a Vue GitHub issue about this.

For example examples/vue-query/: when replacing import.meta.env.SSR ? 0 : 3000 with 3000 then the whole rendering of the page is blocked. There doesn't seem to be any progressive rendering going on, but maybe the trick is to add a <Suspense> boundary?

[pdanpdan]

Vue has Suspense, but on SSR it waits for awaited components to settle, so the only way to render fast is to set a time limit and resolve the component in a loading state.

Or at least I don't know another way.

So basically this means you can only use Suspense without its own fallback slot functionality.

I'll also explore async component to see if I can do something.

[brillout]

Vue has Suspense, but on SSR it waits for awaited components to settle, so the only way to render fast is to set a time limit and resolve the component in a loading state.

The bummer here is that the content isn't rendered to HTML. So a product page with content fetched from a database will be missing out on the SEO and performance perks of SSR.

So neither Vue nor Nuxt support Progressive Rendering? Is there an issue or feature request about this in their repository?

I wonder whether the Vue team is interested in this (I guess so?). Would be quite exciting to collaborate with the Vue team on this...

[pdanpdan]

In the default implementation (Vue Suspense on SSR) everything is rendered as expected. It's just that you need to wait for all the components.

[pdanpdan]

Sorry - ignore all this, I think I found the right way to do it

[brillout]

So the HTML is all rendered at once and there isn't a way to render some HTML right away (before fetching data) and some other HTML later (after fetching data), correct? With "Progressive Rendering" I mean what is shown by the screencast at https://vike.dev/streaming#progressive-rendering.

[brillout]

Sorry - ignore all this, I think I found the right way to do it

👀

[pdanpdan]

https://vike.dev/streaming#progressive-rendering

This can be done, but of course what you get in the HTML is Loadding... (so no SEO or SSG) - it is what the example in PR does (it renders the full page if it can get the data fast enough, else it just renders with Loading...)

There is another way I'm exploring now, using stream: true - it stream renders, so you get fast the content above the part that renders slow, but the page will not be interactive until all is loaded

[phonzammi]

Hello all,
Maybe this discussion could be useful vikejs/vike#1318 (reply in thread)

[brillout]

@pdanpdan Yea, I think having the later content rendered to HTML as well as the early content hydrated right away is a capability unique to React. I really wonder whether Vue supports that.

@phonzammi Ah, thanks for pointing to that discussion, I forgot about it (I didn't follow the discussion).

[pdanpdan]

I just checked the example in https://github.com/vikejs/vike-react/blob/main/examples/full/pages/streaming/%2BPage.tsx and from what I can see it's the same situation in the example in PR - it renders Loading... - maybe I'm missing something?

[brillout]

If you do this:

curl localhost:3000 -N -H "User-Agent: chrome"

Then you'll see that there isn't any HTML streaming going on in the Vue example.

Note

The User-Agent: chrome header is needed because otherwise react-streaming considers curl a bot: https://github.com/brillout/react-streaming#Bots.

Whereas in the React example, you'll see that the early content is streamed right away while the later content is streamed later once the data is resolved. Everything is server-side rendered to HTML, and the data is passed from the server to the client.

I've added 50371aa to your Vue example. In that example, the later content is never rendered to HTML.