This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(172.8, 38%, 26%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EE%3C/text%3E%3C/svg%3E)
When my Blazor page starts up, you can see the page and type in the inputs. However, none of the event handlers get called. After about 2-3 seconds, all of the inputs get cleared and the event handlers start responding.
I think this is happening because the websocket connection wasn't ready when the page loaded.
Is there a way that I can set up the websocket connection earlier or prevent the page from displaying until the websocket connection is set up?
Create a new Blazor (Server?) project and review the sample code for FetchData.razor. Also see ASP.NET Core Razor component lifecycle and ASP.NET Core Razor component lifecycle which explain what happens when a Blazor app first loads.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
You appear to be using server pre-render, but not persisting the pre-render state:
Thank you for pinpointing my problem! Do you have any suggestions as to what I should change?
I looked at the link and it seems to be saying that I should be persisting the pre-render state - should I add the <persist-component-state/> tag to my _Host.cshtml? It isn't there currently.
At the top of the body of the _Host.cshtml it says <component type="typeof(App) render-mode="Server-Prerendered" /> if that helps.
You enable the support of the persistence with the tag, but you still need to add support to your components that use it.
The persistent state needs to be downloaded to the client, so you want it as small as possible.