ASP.NET Razor Component with async Serivce

I am quite new (or rather, re-new as is has been a couple of years) to ASP.NET. I now have created a Service to load data from Google Firestore. This is the method for loading data from the cloud

public async Task<IEnumerable<MyDocument>> GetTempDocs()
{
    var qs = await db.Collection("temp").GetSnapshotAsync();
    return qs.Documents.Select(x => new MyDocument() { Data = x.ToDictionary(), Id = x.Id });            
}

Pretty straightforward and working. But now, to visualise the data I created a Razor Component

@using Microsoft.AspNetCore.Components.Web;
@using MyProject.Models;
@using MyProject.Services;
@inject FireStoreService firestoreService;


<div class="card-columns">
@foreach (var document in firestoreService.GetTempDocs())
{
    <div class="card">
        <div class="card-body">
             <h5 class="card-title">@document.Data["title"]</h5>
        </div>
    </div>
    <div class="card-footer">
        <button @onclick="(_e => firestoreService.SomeOtherFunction(document))" class="btn btn-success">SomeText</button>
    </div>
}
</div>

Problem now is, GetTempDocs() is asynchronous. So how can I await the result and where should I await it? I've read on another page that awaiting is backend responsabilities, but calling it is done in the front end (i.e. client).

Unrelated question: what is the difference between the onclick() method in a html button in a Model Page (like the default Index.cshtml) and the @onclick in a Razor Component.