如何在Blazor Web应用中让指定页面初始服务端渲染且保留交互性？

针对你的场景，只需以下几步即可实现目标：

1. 为BlogDetail页面指定渲染模式 #

在客户端项目的BlogDetail.razor页面顶部添加@rendermode指令，覆盖全局的Auto模式：

@rendermode InteractiveServer

InteractiveServer模式会让页面初始在服务端完成渲染，同时通过SignalR建立连接保留交互能力，完全符合你既要SEO友好又不丢失交互性的需求。

2. 确保HttpClient在服务端渲染环境下正常工作 #

由于服务端渲染时，HttpClient运行在服务端进程中，需要保证它能正确访问你的服务端API：

• 在客户端项目的Program.cs中，按如下方式配置HttpClient：

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

这样不管是客户端还是服务端渲染场景，HttpClient都会使用当前站点的根地址作为API请求的基础路径，避免出现服务端渲染时无法访问API的问题。

3. 验证效果 #

• 查看页面源码：访问BlogDetail页面后，右键查看页面源代码，能看到完整的博客内容HTML，说明初始服务端渲染生效（SEO友好）。
• 测试交互功能：点击页面上的交互元素（比如评论提交、点赞按钮等），确认功能正常工作，说明交互性未被破坏。

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