Issue Page loaded two time on blazor server side?

ahmed salah

I work on blazor server side . I face Issue page reload after open and reload automatically

so page loaded two times Why flicker happen on loaded page

and How to solve this issue

this not happen on one page this is happen on all application pages

sample code for page Dashboard happen this issue on it

protected override async Task OnInitializedAsync()
{
    await getcountServers();
    await getcountDatabases();
    await RefreshDropDownListFilter();
    
    await RefreshDropDownListOwnerFilter();
    await RefreshDropDownListDatabaseFilter();
    await SearchFilter();
    await GetFirstCharachter();      
}


protected override async Task OnAfterRenderAsync(bool firstRender)
{
    
    if (firstRender)
    {
        
    }

}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

ahmed salah3y ago
very good answer can you help me please

from your answer you have good experience

i check css first and javascript and this requests when call dashboard page

are there are any repeated request please

are
Rajkiran Swain3y ago
This issue of page reloading twice is common in Blazor Server applications and it can be caused by various reasons like network latency, performance of the server, the complexity of the page, etc.

To avoid this issue, you can try the following suggestions:
1. Use the Lazy Loading technique to load the page content only when it's needed. In this way, you can reduce the page size and improve the loading time.
2. Optimize the server-side code to improve the performance. Use caching, avoid complex queries, optimize database operations, etc.
3. Use the Client-Side Blazor technique to improve the user experience. In this technique, the Blazor app runs on the client-side, which eliminates the network latency issue and provides a fast and smooth user experience.
4. Ensure that the page is not being rendered multiple times unnecessarily. Check if there are any components that are causing the issue and try to optimize them.
5. Update to the latest version of .NET and Blazor Server as they may have bug fixes that could resolve this issue.
6. Use the Blazor profiler to identify any performance bottlenecks and optimize them.
Additionally, you can try the following workaround to avoid the page flickering issue:
1. Set the CSS property "display: none;" on the root element of the page.
2. Add an event listener to the window "load" event to remove the "display: none;" CSS property from the root element.
This will hide the page while it's loading and prevent the flickering issue.