PrerenderStateService

[rh1376]

what does PrerenderStateService do and why we need it?

[msynk]

Thanks for contacting us and asking this good question.

The PrerenderStateService is the bit platform implementation of the service that handles the transition between the prerendered app state and the client/WASM app state.

It basically tries to reuse the state data that the app generates in the server-side rendering, on the client side when the Blazor WASM takes control of the app.

Note: We plan to add a new section to document this feature in the improvements of our docs in the near future.

[ysmoradi]

Consider a common scenario where a page uses an HTTP client to get data from the server in its OnInitialized method. While the data is being received, a loading indicator is displayed.

If this page is pre-rendered, it will be displayed to the user on the client side with all of the data. Then, Blazor will start working and the OnInitialized method will be called again to get the data from the server. This takes some time, so a loading indicator is displayed again.

The user sees the following:

1- A page with complete information
2- A loading indicator
3- A page with complete information

This happens very quickly, but it can be jarring for the user because the page appears to blink.

This is where the PrerenderStateService comes in. This service saves the pre-rendered data in the form of base64 JSON, stores that as a comment at the end of the pre-rendered body, and then reuses the same data on the client side instead of sending another HTTP request to the server through the HTTP client in the OnInitialized method.

Because the data is already ready and the work is completed quickly, the loading indicator does not have time to become visible and the blink does not occur. This improves the pre-rendering experience and also reduces the server load by reducing redundant HTTP calls.

This approach is supported in Blazor, but the suggested code from Microsoft is difficult to maintain. That's why we introduced the PrerenderStateService.