JamStacks templates - OnAfterRender(firstRender = true) fires twice on a reload

#1

I’ve found that the jamstacks (blazor wasm with tailwind) template causes the page lifecycle hooks to all fire twice on a reload.
This can be recreated by adding an OnAfterRender override to the index page…

@inject ILogger<Index> Logger

...

<GettingStarted />

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Logger.LogWarning("index: first render");
        }
        base.OnAfterRender(firstRender);
    }

}

This lifecycle hook is only supposed to fire once where firstRender = true, but it in the jamstacks templates it fires twice:
image

This can result in unnecessary api calls being made to the server.

Once loaded, on navigation the hook only fires once, its just on the initial load.

The default dotnet blazor wasm application does not exhibit the same behaviour.

Has anyone else found the same or come up with a solution?

#2

This is just rendering when state page change there shouldn’t be any API calls here, they should on ParametersSet, where are your APIs run that are being fired on each render?

#3

All the lifecycles fire twice on a reload
OnAfterInitialized() fires twice for example.

I just used OnAfterRender as an example because it has the firstRender parameter.

<GettingStarted />

@code {
    protected override void OnInitialized()
    {
        Logger.LogWarning("index: on initialised");
        base.OnInitialized();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Logger.LogWarning("index: first render");
        }
        base.OnAfterRender(firstRender);
    }

}

image

#4

It’s likely the Authentication showing the page during Authorization to minimize UI yank, you can try commenting out the <RouteView/> in App.razor:

<Authorizing>
    <p class="text-gray-400 absolute -mt-4 mr-4 right-0">Authenticating...</p>
    @*<RouteView RouteData="@routeData" />*@
</Authorizing>
1 Like
#5

Yep, tested it - that has fixed it, thanks.

1 Like