.NET 8 Blazor Web App无法获取LocalStorage值？设交互模式仍报错

在新版.NET 8 Blazor Web App中使用Blazored.LocalStorage时，表现和Blazor Wasm不一致。已在服务端和客户端的Program.cs中配置：

builder.Services.AddBlazoredLocalStorage();

服务端的LocalStorageOnServer.razor页面代码如下：

@page "/localstorageonserver"
@using Blazored.LocalStorage
@inject ILocalStorageService _localstorage;
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
        _localstorage.SetItemAsync("currentCount", currentCount);
    }
    protected override async Task OnInitializedAsync()
    {
        var count = await _localstorage.GetItemAsStringAsync("currentCount");
    }
}

运行时出现错误：

JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

明明设置了@rendermode InteractiveServer，为何仍提示组件处于静态渲染状态？

• 核心原因：.NET 8 Blazor Web App默认启用预渲染（Prerendering），即使指定了InteractiveServer渲染模式，组件首次加载时仍会先执行静态预渲染，而预渲染阶段无法执行JS互操作（LocalStorage依赖客户端JS环境）。

• 解决方法1：禁用预渲染
  在页面的@rendermode中明确关闭预渲染：

  @rendermode InteractiveServer(prerender: false)
  

  组件会直接以交互式服务端模式加载，跳过预渲染，即可在OnInitializedAsync中正常调用LocalStorage。

• 解决方法2：适配预渲染逻辑
  若需保留预渲染，需将JS互操作逻辑移至OnAfterRenderAsync方法中——这个生命周期方法在客户端渲染完成后触发，此时JS环境已就绪：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender)
      {
          var count = await _localstorage.GetItemAsStringAsync("currentCount");
          if (int.TryParse(count, out var parsedCount))
          {
              currentCount = parsedCount;
              StateHasChanged(); // 更新UI
          }
      }
  }
  

  同时注意IncrementCount中的异步调用需用await，避免异步操作未完成的潜在问题：

  private async Task IncrementCount()
  {
      currentCount++;
      await _localstorage.SetItemAsync("currentCount", currentCount);
  }
  

• 额外注意：服务端项目无需注册AddBlazoredLocalStorage，LocalStorage是客户端特性，仅需在客户端项目的Program.cs中注册即可。

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