How to prevent same api calls

Question

HI,
I build the WebApp using Blazor Wasm and ASP.net Core WebApi.

I am calling the same on every page in blazor wasm. Due to this api taking time to load and took time display called data into razor page.
I also optimized the api and database and also memoryCache in API . it improve the performance no doubt.

But for that I m still making the API call for MemoryCache Data. What is the best practices to call the data and reduces the unnecessary API Calls ?

Answer 1

Blazor has state management APIs. The official documentation covers the details.

ASP.NET Core Blazor state management

I assume you want to cache data in the browser.

Browser storage

Answer 2

You can also create a component, call this api insinde this component, and then call this component inside your other parts of site, for example:

<MyComponentWhichCallApi>

<RestOfTheSite />

</MyComponentWhichCallApi>

Answer 3

You can also use a service worker to do this. This is one of the main use cases of service workers, caching api responses.

Most likely your project already has a service-worker.js file, but if not see

https://learn.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-6.0&tabs=visual-studio