Blazor InteractiveAuto模式页面直接访问问题及生命周期最佳实践

1. 逐页禁用静态预渲染 #

完全支持给单个页面/组件关掉预渲染，只要在页面顶部加@rendermode指令时指定prerender: false就行：

@page "/customer-details"
@rendermode InteractiveAuto(prerender: false)

<!-- 你的页面内容 -->

这样直接访问这个页面时，会跳过静态预渲染，直接进入交互式渲染阶段，JSinterop就能正常工作，你可以在OnInitializedAsync里放心读取Blazored Session Storage的数据。

2. 预渲染阶段跳过JS操作 #

如果不想放弃预渲染的优势，那就在OnInitializedAsync里先判断当前是不是在预渲染环境，避免执行JS相关代码：

protected override async Task OnInitializedAsync()
{
    // 预渲染阶段不在浏览器环境，直接跳过JS操作
    if (!OperatingSystem.IsBrowser())
    {
        // 这里可以返回默认占位数据，避免页面空白
        Data = new List<YourDataType>();
        return;
    }

    // 正常环境下读取Session Storage并调用API
    var selectedCustomer = await _sessionStorage.GetItemAsync<Customer>("SelectedCustomer");
    if (selectedCustomer != null)
    {
        Data = await _apiService.FetchData(selectedCustomer.Id);
    }
}

这种方式既保留了预渲染的页面内容（比如占位布局），又不会触发JSinterop错误。

3. 用Blazor原生持久化状态替代Session Storage #

如果不想依赖JS存储，试试Blazor自带的PersistentComponentState，它不需要JSinterop，还能跨电路保存数据，预渲染阶段也能访问：

[Inject]
private PersistentComponentState PersistentState { get; set; }

private PersistingComponentStateSubscription? _stateSubscription;
private Customer? _selectedCustomer;

protected override void OnInitialized()
{
    // 从持久化状态恢复选中的客户
    if (PersistentState.TryTakeFromJson<Customer>("SelectedCustomer", out var savedCustomer))
    {
        _selectedCustomer = savedCustomer;
    }

    // 订阅状态持久化事件，保存当前选中的客户
    _stateSubscription = PersistentState.RegisterOnPersisting(async () =>
    {
        if (_selectedCustomer != null)
        {
            PersistentState.PersistAsJson("SelectedCustomer", _selectedCustomer);
        }
    });
}

public void Dispose()
{
    _stateSubscription?.Dispose();
}

用这个方案的话，不管是跳转访问还是直接输入URL，都能正常获取选中的客户数据，还不用处理JSinterop的问题。

内容的提问来源于stack exchange，提问作者Josh