'How to make API calls in Blazor WebAssembly faster?

I started developing an app in Blazor WebAssembly some days ago (moving an app from Blazor Server) and realized the data load is a bit slow since takes some milliseconds to load after the page is ready (read below) so I was wondering if there is any way to improve API calls so they do not take as long to return the data. I think the code could use some improvements in deserialization. For example the following code is used to display the data inside the square in the home page which means I need an API call to get the data from the DB.

enter image description here

This is how it looks like before the data is loaded ("hola" is a temporary placeholder value):

enter image description here

Controller located in the server to get the data from the DB through Entity Framework Core:

[HttpGet("FitxatgesAvui/{idTreballador}")]
public IEnumerable<MovimentRed> GetFitxatgesAvui(Guid idTreballador)
{
            return AppDbContext.Fitxatges
                    .Where(f => f.IdTreballador == idTreballador && f.HoraEntradaAjustada.Value.Date == DateTime.Now.Date)
                    .AsNoTracking()
                    .Select(m => new MovimentRed()
                    {
                        IdFitxatge = m.IdFitxatge,
                        HoraEntradaAjustada = m.HoraEntradaAjustada,
                        HoraSortidaAjustada = m.HoraSortidaAjustada
                    })
                    .ToList();
}

API call located in the page backend (client):

DateTime dt1 = DateTime.Now;
FitxatgesAvui = await Http.GetFromJsonAsync<MovimentRed[]>("/Fitxatge/FitxatgesAvui/" + IdTreballador);
DateTime dt2 = DateTime.Now;
TimeSpan span = dt2 - dt1;
Console.WriteLine((int)span.TotalMilliseconds);

I thought about using another JSON deserialization library other than System.Text.Json such as Newtonsoft.Json but according to this page the native library is faster.

Extra information

  • The DB (MariaDB) is in the same network as the app (both client and server).

  • MovimentRed is a DTO class.

    public class MovimentRed { public Guid IdFitxatge { get; set; } public DateTime? HoraEntradaAjustada { get; set; } public DateTime? HoraSortidaAjustada { get; set; } }

Measurements

  • API call from the example: around 5 ms
  • "Bytes-only" call: around 5 ms
  • Database query: around 3 ms
  • API call through Postman: around 10 ms
  • Bytes: 418 B (280 B size)

enter image description here

If need more information do not hesitate to ask. Thanks a lot in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source