ASP.NET, Dependency Injection, Blazor and Async - SendAsync issue

Update: Seemed to be directly related to using my own HttpClient with SendAsync in ASP.NET I'm guessing. What special considerations do you have to take with your own web requests via HttpClient/Async while being in an ASP.NET "content". For now, I've switched the two calls I'm using to the non-async so I can finish my work for the day, but will revisit the correct DI tomorrow. Just curious why using your own HttpClient and making an Async call behaves differently?

First Question: I was trying to step through this code to detect the problem. But it always just skips to breaking on the PageTitle tag because @Person is null at the moment.
It goes into the first async call and never returns. Traced it a little further and it seems to make an HttpClient Async call get to get a token from backend service. And I can see in fiddler it gets a successful response. But doesn't come back from that async... just "jumps ahead".

Any good rules of thumb around using async in service-side Blazor?
Do you use ConfigureAwait(false) ? use it on any calls? New to Blazor's rendering model. But from the reading I did it seems like it will wait or its supposed to wait on things being non-null ?? Is registering services Scoped a good default rule of thumb? Is creating a fresh HttpClient instead of injecting it an issue? I've been trying to rule things out all morning. Uninstalled Mediatr and am just using the Handler as Service classe now.

Here is code sample of where things start going awry for me.

@page "/person/{personId:int}/{viewMode}"
@using Laz.Core.Blazor.Components
@using Laz.Project.Core.Domain.Models
@using Laz.Core.Domain.Handlers
@inject GetPersonHandler GetPersonHandler
@inject ILogger<PrintPerson> Logger

@code {
    [Parameter]
    public int PersonId { get; set; } = 0;

    [Parameter]
    public string ViewMode { get; set; }

    public ApiPerson Person { get; set; } = null;

    protected override async Task OnInitializedAsync()
    {
        Logger.LogInformation("OnInitializedAsync - Person Page");
        var req = new GetPersonRequest {PersonId = PersonId};
        Logger.LogInformation("1"); // after this it seems to get lost in async calls and jump to rendering which throws error. This is my first encounter with this issue.
        GetPersonResponse response = await GetPersonHandler.Handle(req, CancellationToken.None);
        Logger.LogInformation("2");
        Person = response.Person;
        Logger.LogInformation("3");
        await base.OnInitializedAsync();
    }
}
<PageTitle>{@Person.Name}</PageTitle>

If I've read your code correctly, you haven't yet fully grasped the Component lifecycle, and have a null handling problem. Review why there's a null check in the render code in FetchData.

In your code this line [which I believe from your update is a HttpClient request] yields control back to the caller of OnInitializedAsync in the component code. This then renders the component for the first time, at which point:

<PageTitle>{@Person.Name}</PageTitle>

Person is null.

You can reproduce your problem in a simple MRE.

@page "/"

<PageTitle>@_model.Title</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

@code {
    private Model? _model = null;
    protected override async Task OnInitializedAsync()
    {
        await Task.Yield();
        _model = new Model() { Title="Hello" };
    }

    public class Model
    {
        public string? Title { get; set; }
    }
}

If you want to initialize variables as null, the solution is to handle nulls gracefully:

<PageTitle>@(Person?.Name ?? "Not Set")</PageTitle>

PS Did you see a possible null reference warning on Person.Name?