Virtualize + SSR support

[ilajosmanov]

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Using <Virtualize /> component I couldn't find how first page is rendering on SSR side. It makes page non seo friendly.

Describe the solution you'd like

Would be great, when blazor page loads, to show at least first N items.

Additional context

No response

[javiercn]

@ilajosmanov thanks for contacting us.

I suspect this is because Virtualize needs to know the item size in order to decide how many items to render (which it can't do on SSR), so I suspect we would need a feature here.

/cc: @MackinnonBuck @SteveSandersonMS

[ilajosmanov]

@javiercn thanks for your response! Yes, I could imagine that Virtualize mostly client-side. What we can do if we need to do SEO, though? I'm pretty new in C#/Blazor, that because I don't know most popular solutions

[SteveSandersonMS]

We could add an additional parameter to Virtualize, e.g. called InitialItemCapacity or something like that. It would determine how many items are loaded and rendered on the first render (which is what SSR outputs as HTML), before any client-side code is able to measure the size of the viewport.

TBH this could benefit interactive rendering scenarios too, so we might want to default it to a nonzero value such as 20. It might avoid a very slight amount of first-load flicker if the screen was populated with approximately the right number of items on the first render, even if the client-side code then has to load more on a second render once the viewport can be measured.

[SteveSandersonMS]

What we can do if we need to do SEO, though?

Right now you'll need to have an @if/@else structure in your .razor file so that it uses Virtualize only when doing interactive rendering.