Blazor InteractiveAuto 和生命周期最佳实践

Question

我们有一个使用较新的 InteractiveAuto 渲染模式的 Blazor 应用程序。 我们已经开始了一条道路，但发现我们的页面有一个问题：没有一个可以直接访问。

首先，对我们正在研究的内容进行一个简单的解释。我们有连接到外部 API 的Services。 这就是我们获取数据的方式。 相当标准。

我们正在使用 Blazored 会话存储来存储选定的客户。

我们这样做是为了避免需要将客户 ID 放入路线中，然后一遍又一遍地从服务器重新加载该数据，根据我们的经验，将其存储在内存中太不稳定，因为如果电路重置，我们就会丢失数据- 这种情况发生得太频繁了

我们当前在页面/组件上的方法看起来像这样：

protected override async Task OnInitializedAsync()
{
    //get selected customer from local storage

    //get data from API service using info from selected customer
}

如果我们通过

NavLink

或

NavigationManager

来到该页面，这一切都非常好。

但是，当我们尝试通过输入 URL 直接访问页面时，我们会收到 JSinterop 错误，因为 Blazored 正在使用 JSinterop 访问本地存储，而本地存储在静态预渲染期间不可用。

有没有办法逐页禁用静态预渲染，或者我是否必须仔细检查并重新设计依赖于所选客户信息的所有页面和组件，以在

OnAfterRenderAsync

中进行数据检索 - 这不太理想，因为页面加载空白，然后内容根据服务器延迟和数据返回所需的时间闪烁而存在。

Answer 1

您可以通过检查

HttpContext

级联参数是否存在来检测预渲染。

这是一个演示页面：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="alert alert-info">@_isPreRender</div>

@code {
    [CascadingParameter] private HttpContext? httpContext { get; set; }
    private bool _isPreRender => httpContext is not null;

    protected override Task OnInitializedAsync()
    {
        // Only do stuff when we're not pre-rendering
        if (!_isPreRender)
        {
            //get selected customer from local storage

            //get data from API service using info from selected customer
        }

        return Task.CompletedTask;
    }
}