Hi all; Normally when a page is being created & rendered in Blazor version 8, RenderMode.InteractiveServer, OnInitializedAsync() is called once. But when I do a Reload on Chrome, it is called twice. And all child components in the page are called twice too. Why is it being called twice? And what can I do to avoid reading from the database to populate the page twice? And very importantly, in a way that will call from the database at least once for any situation? thanks - dave

Hi @David Thielen , It is called twice, as you are using pre-rendering. Go to App.razor and globally set the render mode like below: <Routes @rendermode="new InteractiveServerRenderMode(prerender:false)" /> Using a cache to temporarily store database query results can be a useful strategy to prevent having to query the database multiple times in quick succession. It reduces the load on the database but initial visit might still be a little slower. For your second option, very fast initial render because no heavy operations are performed in OnInitializedAsync() but the user might see a flash of loading content or incomplete content, which can be perceived as jarring. A third approach is that you can perform fast operations in OnInitializedAsync() to ensure a rapid render (such as loading cached data or defaults), and then perform the slower database query in the background. Once the data is available, the component state can be updated, which will automatically trigger a rerender. For example, you could initiate a background task to fetch the data and then call StateHasChanged() on its completion to update the UI accordingly. To avoid this background task in the pre-rendering phase, you can check the IComponentContext.IsConnected property in Blazor Server applications to determine if the component is being interactively used by a client. No matter which approach to use will depend on your specific application requirements. Reference: Stateful reconnection after prerendering Persist prerendered state If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. Best regards, Rena

Why is OnInitializedAsync() called twice on a page reload

Accepted answer

Ping Ni-MSFT 3,615 Reputation points Microsoft Vendor

2024-03-18T02:22:05.1466667+00:00
Hi @David Thielen ,
It is called twice, as you are using pre-rendering. Go to App.razor and globally set the render mode like below:

<Routes @rendermode="new InteractiveServerRenderMode(prerender:false)" />

Using a cache to temporarily store database query results can be a useful strategy to prevent having to query the database multiple times in quick succession. It reduces the load on the database but initial visit might still be a little slower.
For your second option, very fast initial render because no heavy operations are performed in OnInitializedAsync() but the user might see a flash of loading content or incomplete content, which can be perceived as jarring.
A third approach is that you can perform fast operations in OnInitializedAsync() to ensure a rapid render (such as loading cached data or defaults), and then perform the slower database query in the background. Once the data is available, the component state can be updated, which will automatically trigger a rerender.
For example, you could initiate a background task to fetch the data and then call StateHasChanged() on its completion to update the UI accordingly. To avoid this background task in the pre-rendering phase, you can check the IComponentContext.IsConnected property in Blazor Server applications to determine if the component is being interactively used by a client. No matter which approach to use will depend on your specific application requirements.

Reference:

Stateful reconnection after prerendering
Persist prerendered state

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena
Please sign in to rate this answer.
David Thielen 2,796 Reputation points

2024-03-18T02:52:03.6166667+00:00

@Ping Ni-MSFT Is there a way to know if when it is called, if it's the pre-render or the post-render? And my question is about OnInitializedAsync(), not OnAfterRenderAsync(). So why is pre-render affecting initialization?

thanks - dave

Ping Ni-MSFT 3,615 Reputation points Microsoft Vendor

2024-03-18T03:34:21.9366667+00:00

Hi @David Thielen ,By default the interactive server mode is pre-rendering. For your second question, pls check the official document Stateful reconnection after prerendering, this is by design.

David Thielen 2,796 Reputation points

2024-03-18T03:43:19.9733333+00:00

@Ping Ni-MSFT I understand using the cache to load or use the cache based on the DateTime. But correct me if I'm wrong, there are two problems here:

I want to return fast for pre-render so it creates the skeleton/scaffold quickly with no delay hitting the DB. There's no way to do that.

Generally the data I populate has to do with the user logged in, the organizations they are following, etc. So they key for the cache is complex and will rarely be duplicated. So significant overhead with this approach.

Is there any way to know if it's a pre-render call? Or is caching the only solution?

thanks - dave

Ping Ni-MSFT 3,615 Reputation points Microsoft Vendor

2024-03-18T03:46:08.68+00:00

Hi @David Thielen , Does change the rendermode prerender false not working here?

David Thielen 2,796 Reputation points

2024-03-18T04:12:01.82+00:00

Update: Ok, every time I think I finally understand the rendering mode, I realize I have it wrong again. So InteractiveServer may call OnInitializedAsync() twice if pre-rendering is on. And I want that lightening fast initial render. And there is no way to know if a call is the pre-render or post-render call. Or possibly the only-render call.

To handle this I have seen two main approaches suggested:

Save the DB query to populate the page in a cache. Have the cache timeout in 15 seconds so it's basically only good for the pre (read from the DB) and post (read from the cache). That works. But, that means the pre-render call to OnInitializedAsync() may not return for several seconds. Is that ok?

Only do fast operations in OnInitializedAsync(), pre & post. Then read the DB and populate the page in OnAfterRenderAsync(true). But this means initializing as part of the rendering process. And then forcing a re-render of the page. Possibly multiple re-renders as I populate multiple components in a page. Is this ok?

Or is there another approach?

Ping Ni-MSFT 3,615 Reputation points Microsoft Vendor

2024-03-18T04:43:13.44+00:00

Hi @David Thielen, Using a cache to temporarily store database query results can be a useful strategy to prevent having to query the database multiple times in quick succession. It reduces the load on the database but initial visit might still be a little slower. For your second option, very fast initial render because no heavy operations are performed in OnInitializedAsync() but the user might see a flash of loading content or incomplete content, which can be perceived as jarring. A third approach is that you can perform fast operations in OnInitializedAsync() to ensure a rapid render (such as loading cached data or defaults), and then perform the slower database query in the background. Once the data is available, the component state can be updated, which will automatically trigger a rerender.

For example, you could initiate a background task to fetch the data and then call StateHasChanged() on its completion to update the UI accordingly. To avoid this background task in the pre-rendering phase, you can check the IComponentContext.IsConnected property in Blazor Server applications to determine if the component is being interactively used by a client.
No matter which approach to use will depend on your specific application requirements.

David Thielen 2,796 Reputation points

2024-03-18T13:40:48.5933333+00:00

@Ping Ni-MSFT Is there any official guidance from the Blazor team as to what approach should be used here?

David Thielen 2,796 Reputation points

2024-03-19T02:28:04.98+00:00

@Ping Ni-MSFT And there's a 3rd way:

Use [CascadingParameter] HttpContext? == null to determine if it's the pre-render.

The critical question is - what approach does the Blazor team suggest.

Query the DB, save to a cache. This means on a pre-render OnInitializedAsync will not return for 1 - 5 seconds. Is this going to screw up pre-render being fast?

Populating the data in OnAfterRenderAsync(true). This means I'm now initializing the page as part of the rendering process. Will this screw things up as rendering is purposely distinct from initialization?

The parameter HttpContext being null - is this something we can depend on? And will we be able to depend on it in the future? Because a very bad outcome is a Blazor update then breaks all the apps depending on this.

Can you please ask the Blazor team for guidance on this? Because I don't want a solution that "works" today. I want a solution that works in the best way with Blazor, and will continue to be the best approach in the future.

thanks - dave

ps - I was a senior developer on the Win95 team (decades ago). We had so many constraints on what we couldn't do, and what we must do, for all the apps that implemented solutions that "worked" but were not following the supported API. I don't want to be that problem.

Ping Ni-MSFT 3,615 Reputation points Microsoft Vendor

2024-03-19T08:58:04.48+00:00

Hi @David Thielen,check this official document, I think it would give you the idea.

David Thielen 2,796 Reputation points

2024-03-19T13:56:20.99+00:00

@Ping Ni-MSFT Thank you - yes. This means Blazor is fine with it taking 1 - 5 seconds in the pre-render call to OnInitializedAsync. And the PersistentComponentState objects, they're global to the app, not specific to the SignalR circuit - correct? If so, nameof() is not sufficient as multiple users could hit the same page and therefore have the same variable name.

??? - thanks - dave

David Thielen 2,796 Reputation points

2024-03-19T22:14:50.6133333+00:00

@Ping Ni-MSFT If you write up what we just discussed as an answer, happy to accept it. thanks

Ping Ni-MSFT 3,615 Reputation points Microsoft Vendor

2024-03-20T01:35:04.0866667+00:00

Hi @David Thielen, From my point of view, when you use Blazor Server with SignalR, each client establishes a SignalR connection to the server, but the state managed by PersistentComponentState is maintained on the client-side within the Blazor application's runtime environment.

This means that PersistentComponentState objects are not shared across clients but are specific to each individual client's Blazor application instance.
Sign in to comment

Share via

Why is OnInitializedAsync() called twice on a page reload

0 additional answers