What is the best way in Blazor to initialize a page that hits the DB to initialize itself

What I learned in this question is I want to set render-mode="Server" in _Host.cshtml. This way the page is rendered once.

But... this is also the slowest way to render the page. If the code in my OnInitializedAsync() is hitting the DB, then nothing will be rendered until I've read everything from the DB.

For this case, is it better to read in that data in OnAfterRenderAsync(true)? In this case the page will be rendered with no data, and then the data will fill.

And, for my case at least, and variables that impact layout in terms of what's visible, what's enabled, etc. I can set in OnInitializedAsync() without hitting the DB. So tables/grids will grow once I populate the data, but other than that, it would just be fields being populated with their initial data.

So what is normally done in this case?

The double render only occurs on the landing page, so you can either:

1. Keep the page light on activity.
2. Detect the double render and don't do any DB work in the first render.

There's an answer here that shows how to detect the first render using the IHttpContextAccessor service and use it to modify the component behaviour.

https://stackoverflow.com/a/75778169/13065781

Here's a demo page showing how to handle what you've described within the normal component lifecycle.

Note that, as I've pointed out before, good design = no need to resort to the OnAfterRenderAsync kludge. Personal: My components don't implement IHandleAfterRender, if I need it for JSInterop I implement it on a component by component basis.

@page "/"
@using System.Diagnostics
@inject IHttpContextAccessor HttpContextAccessor

<PageTitle>Index</PageTitle>

@if (_isServerRender)
{
    <div class="alert alert-danger">Pre-Loading</div>
}
else if(_loading)
{
    <div class="alert alert-info">Loading</div>
}
else
{
    <div>
        <h1>Hello, world!</h1>

        Welcome to your new app.

        < SurveyPrompt Title = "How is Blazor working for you?" />
    </div>
}


@code {
    public Guid Uid { get; init; } = Guid.NewGuid();
    private bool _loading;
    private bool _isServerRender;

    protected override void OnInitialized()
        => _isServerRender = !(HttpContextAccessor.HttpContext is not null && HttpContextAccessor.HttpContext.Response.HasStarted);

    protected async override Task OnInitializedAsync()
    {
        _loading = true;
        if (_isServerRender)
            return;

        // emulate a lot of DB async activity
        await Task.Delay(5000);
        _loading = false;
    }
}

.NET 8 will bring a new feature to Blazor server called Streaming Rendering. This will allow a page to render while the data is loading.

For more information take a look on this blog post from Microsoft.

All you'll need to do basically is to provide an attribute @attribute [StreamRendering(true)]

@page "/fetchdata"
@using BlazorSSR.Data
@inject WeatherForecastService ForecastService
@attribute [StreamRendering(true)]

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

@if (forecasts is null)
{
    <p><em>Loading...</em></p>
}
else
{
    // Render weather forecasts
}

@code {
    private string message;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
    }
}