Blazor Double Render

All over the web there have been discussions about how Blazor server hits the OnInitialized method twice, once in prerendering and again after the connection has been established in the browser.
All the above address, data and how to preserve the state after prerendering.

Here is another quirk I’ve come across when using Blazor. When showing a pure static HTML razor component that has an animation done in CSS, the animation occurs twice.
In development this occurs so fast that it is almost inconceivable to the user. The same when live but using a strong internet connection. When accessing it via a slow internet connection the animation occurs twice.

To note, this only occurs on the first load. When navigating from one page to the next within the app the component is only rendered once.

I have created a reproducible solution which shows the effect https://github.com/aryehsilver/BlazorDoubleRenderTest.

I also have published it live where you can see it in action (using a slow connection) https://projects.aryehsilver.co.uk/double-render.

Here is a clip of the animation in action.

Blazor Double Render.mp4 (Click to expand)

As javiercn describes here in this GitHub issue:

I believe this is the result of the fact that when we render in interactive mode we don’t reuse the existing DOM nodes and instead we replace the old DOM nodes with new DOM nodes. I believe a similar thing happens with images and other elements.

It’s not really an artefact of the “double” render (static prerender followed by an interactive prerender) but an artefact of how we reconcile the existing prerendered nodes with the new rendered nodes.

javiercn 25 Jan 2022

Unfortunately there doesn’t seem to be any way around this, since this is the intrinsic way how Blazor works. It has been added to the backlog and hopefully the aspnetcore team will work out a way to stop this occurring in the future.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.