[Solved] Why is my blazor component loading twice

This happens because of Pre-rendering of blazor components

This is default behavior in

• Blazor Web App (Interactive Server, Interactive WebAssembly, and InteractiveAuto) - .Net 8

Blazor pre-renders the component on the server, i.e. calls OnInitialized (OnInitializedAsync) method on the server,

generates the HTML for the component,

returns the generated HTML to the browser

After this

On the client side (in browser), Blazor Initialize the component again for the interactivity, thus calls the OnInitialized (OnInitializedAsync) method again

Solution(s):  

1. Disable the pre-rendering for the component

2. Handle the data fetching in OnInitialized using PersistentComponentState, which allows you to fetch the data in pre-rendering, and then passing the data to the client in serialized form, and then use this data on the client (without re-fetching from the server/database)

You can follow this youtube video for in-depth explanation and solution 
How to Fix the Issue with Blazor Prerendering - OnInitialized Gets Called Twice

https://youtu.be/qQ91rdMgIMM