Declarative model to serialize state on prerendering with Blazor and restore it on the client

[Eirenarch]

Consider the following scenario which is quite common:
A page with a grid with a pager. The grid loads data with an AJAX call and while the data is being loaded displays a loader. It is desirable that the data is displayed prerendered when using Blazor prerendering. Currently the most straight-forward implementation of this scenario works like this

• component lifecycle starts on the server
• a call is made to the service to get the page of data
• the data is prerendered and the component html is sent to the browser
• the browser renders the html. The user sees the data
• the component lifecycle starts on the client. The component makes a call to the service for a page of data. The data on the screen is replaced with a loader because according to the component on the client the data is null and a loader should be displayed while the call finishes.
• the call finishes and the data appears again

To sum it up the user sees data - loader - data. In addition two calls are made to get the data. The first issue can be mitigated by additional flags checking if we're in a first load situation on the client but it complicates the code significantly and it won't solve the second issue.

For me the additional complexity introduced by this issue was enough to turn off prerendering in my Blazor app. Maybe there is an easy workaround that I am not aware of but when I bring this issue up nobody has suggested a solution yet. The docs also seem to advise that we use caching but I don't consider this good enough as it will not remove the issue with the additional calls in Blazor wasm scenarios and still results in additional complexity.

Possible Solution

One solution I can think of is to mark certain component state with attributes and have that state be serialized while prerendering maybe as JSON and dump it into a hidden element on the page. Then when Blazor starts on the client it can read that state and initialize the component with it. This will avoid the second call for data and will simplify the code in the component.

Note that this issue is present with Blazor Server as well but with Blazor Server different approaches can be used like storing the whole component in memory and passing it upon the instantiation of the SignalR connection

[jotosmurf]

I was also put off by having to cache and write hacky code to avoid the FOOC effect when using prerendering. Indeed, even when the user does not see a flash, Blazor wasm still does unnecessary work as the actual data is being rendered twice.

Referencing @jonhilt here because he demonstrated the "double rendering" in this scenario in a blog post two days ago: scroll down to OnInitializedAsync is called twice.

[mkArtakMSFT]

Thanks for contacting us.
This is potentially related to #26802
@javiercn is there another issue which we can dupe against?

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[Eirenarch]

@mkArtakMSFT I don't know how React works and the issue doesn't explain the details but looking at the docs for React's hydrate() it seems like it is used to attach events not to restore state from the DOM

[jotosmurf]

The concept needed here is called SSR client side hydradation. Examples in js SSR land explained in the first paragraph of the links below:

• Vue’s hydradation
• React’s ReactDOM.hydrate()
• Svelte’s prerendering with hydradation

Issue #26802 should probably be deleted.

[Eirenarch]

@jotosmurf the links you provided talk about attaching events to existing HTML which is fine and great but how is the state of the component restored? If I have a List<Customer> property in my component how will this list be transferred from the server to the client?

[mifopen]

@mkArtakMSFT @javiercn This issue duplicates #26802 in terms of what effect both authors want to achieve.
Let's remove #26802 from the backlog in favor of this issue?
Also, any chance to see a solution in net6? It would be awesome to have SPA framework with SSR done right ;) (as far as I know no JS framework offer this feature for now, or, at least, without some hacks)

[Eirenarch]

It is great that we already have a solution for this in the latest preview but the solution seems too imperative and "manual". While having this as an option is fine I hope there will be a declarative and more transparent solution. I imagine something like marking a component with an attribute like [PreservesState] and then all the state preserving is done automatically and if the user does not want some field to be preserved they mark it with [NotPreserved] (might be good to exclude members marked with [Parameter]). Maybe even consider totally skipping the initialize event if the state has been restored declaratively.