Multiple API calls slow down the page upload

Question

I am working on a Blazor Webassembly Application. In my solution I have two projects. One is for front end and that is Blazor Webassembly project. 2nd project is .net core WebAPI project. This API project has many [HTTPGet] end points. In one of my razor page I have to call 5 APIs to work on them. These API calls bring data from different database tables. Each table contains more than 60,000 records. Please see the code below:

protected override async Task OnInitializedAsync()
{
    try
    {
        // Lists
        MasterLocalMemberList = await Http.GetFromJsonAsync<List<MemberLocal>>("api/member/getlocalmembers");
        MasterInternationalMembeList = await Http.GetFromJsonAsync<List<MemberInternational>>("api/member/getinternationalmembers");
        MasterVisitorList = await Http.GetFromJsonAsync<List<Visitor>>("api/member/getvisitors");
        MasterTablighGuestList = await Http.GetFromJsonAsync<List<TablighGuest>>("api/member/gettablighguests");
        AttendanceList = await Http.GetFromJsonAsync<List<Attendance>>("api/member/getattendance");
        CountryList = await Http.GetFromJsonAsync<List<MemberCountry>>("api/member/getcountries");
        GateList = await Http.GetFromJsonAsync<List<Gate>>("api/member/getgatelist");

        gateNumber = await SessionStorage.GetItemAsync<int>("GateNumber");
        gateNumber = (gateNumber == null ? 1 : gateNumber);
        GateType = GateList.Where(x => x.GateID == gateNumber).First().GateType;
        //await mudSelectItemCountry.SelectOption(SelectedCountry);
        UpdateMembersListByCountry();

    }
    catch (Exception emx)
    {
        //throw;
    }
}

This method takes much time to execute. I am using EntityFrameworkCore. Once the page is loaded then rest executions are very fast i.e. saving , updating and deleting records into database. Please suggest appropriate solution. Thanks

Answer 1

You will need to provide more info on what each of these calls does on the server. If you are loading entire tables into entities and serializing those into JSON then sending those back, you are likely loading and sending far more columns than are needed, and potentially hitting lazy loading with the serialization. Hooking a profiler up to the database will reveal lazy loading queries. (many more than 5 expected SQL statements being run)

Things to improve performance:

1. Don't send Entities, send view models / DTOs. For example, if you need to provide a lookup list of items, create a view model with the ID and a DisplayName, and use Select to populate that from the entity in the query. This sends 2 fields instead of an entire table's columns and avoids possible lazy-loading.
2. Employ server-side pagination for larger sets of data coming back. If loading views with lots of results, a user isn't going to scroll through 60,000 records on a screen. Many data tables and such support pagination (i.e. 10-100 rows per page) and either client-side pagination or server-side. Client-side pagination requires sending all data to the client, server side configures the client control to be able to request a specific page, resulting in just 10-100 items coming back at a time. In general, structure your application to avoid situations where large volumes of data are sent at once. Larger bulk operations should be done server-side, ideally isolated with a queue and a background worker.