.NET 8 Blazor应用：如何仅在客户端注入服务并排除预渲染？

问题根源 #

客户端项目的_Imports.razor是全局导入文件，服务器预渲染Account页面时会加载该文件中的@inject声明，但这些服务（如ILocalStorageService、客户端HttpClient等）并未在服务器端的依赖注入容器中注册，导致预渲染阶段抛出服务未注册的错误。

解决方案 #

方案1：将客户端专属服务的注入移出全局_Imports.razor

直接删除_Imports.razor中客户端专属的@inject语句，仅在需要使用这些服务的客户端组件/页面中单独添加对应@inject声明。

• 优点：彻底避免预渲染流程接触客户端服务，逻辑清晰，无额外代码开销。
• 示例：在客户端的某个页面中添加：

@inject NavigationManager NavigationManager
@inject ILocalStorageService LocalStorage
@inject HttpClient HttpClient
@inject IStringLocalizer<AppLanguage> Localizer

方案2：在服务器端注册客户端服务的空实现

如果不想修改全局注入的结构，可以在服务器端的Program.cs中为客户端服务注册空实现类，让预渲染流程能正常解析服务依赖：

1. 定义空实现类（以ILocalStorageService为例）：

public class NullLocalStorageService : ILocalStorageService
{
    public Task<T> GetItemAsync<T>(string key, CancellationToken cancellationToken = default)
        => Task.FromResult(default(T)!);

    public Task SetItemAsync<T>(string key, T value, CancellationToken cancellationToken = default)
        => Task.CompletedTask;

    public Task RemoveItemAsync(string key, CancellationToken cancellationToken = default)
        => Task.CompletedTask;

    // 实现ILocalStorageService接口的所有其他方法，均做空操作或返回默认值
}

2. 在服务器端Program.cs中注册：

builder.Services.AddSingleton<ILocalStorageService, NullLocalStorageService>();
// 对其他客户端服务（如客户端专属HttpClient）同理，注册兼容服务器环境的实现

方案3：通过条件判断延迟服务初始化

在组件中通过代码判断当前运行环境，仅在客户端环境下初始化服务：

@inject IServiceProvider ServiceProvider

@code {
    private NavigationManager? _navigationManager;
    private ILocalStorageService? _localStorage;

    protected override void OnInitialized()
    {
        // 仅在浏览器环境（客户端交互模式）下获取服务
        if (OperatingSystem.IsBrowser())
        {
            _navigationManager = ServiceProvider.GetRequiredService<NavigationManager>();
            _localStorage = ServiceProvider.GetRequiredService<ILocalStorageService>();
            // 初始化其他客户端服务
        }
    }
}

• 注意：此方法需要移除_Imports.razor中的全局@inject，改为在组件内通过服务提供者获取。

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