Blazor账户页面启用交互式渲染模式的问题及解决方案

问题描述 #

我在开发Blazor项目时，所有账户页面默认使用RenderMode.Server渲染模式。尝试将部分账户页面改为交互式渲染模式时，遇到了以下问题：

• 无限循环：移除账户页面的过滤器以全局启用交互式渲染模式，触发无限循环。
• 空引用异常：单独给某个账户页面启用交互式模式时，出现空引用异常。
• 响应已启动错误：添加空值检查绕过空引用异常后，出现如下错误：

System.InvalidOperationException: OnStarting cannot be set because the response has already started.
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ThrowResponseAlreadyStartedException(String value)

尝试过的方案 #

我试过两种常规方案，但都不符合需求：

1. 全局启用交互式渲染模式：直接导致无限循环问题。
2. 单页面单独启用：触发空引用异常，即使添加空值检查也会出现"响应已启动"的错误。
   网上多数方案建议直接禁用账户页面的交互式模式，但这并不是我想要的结果，我希望账户页面能和其他页面一样正常启用交互式模式。

最终解决方法 #

通过拆分SSR逻辑与交互逻辑的方式，成功解决了所有问题，具体步骤如下：

1. 保留SSR核心逻辑：将依赖HttpContext的操作（比如await SignInManager.GetExternalLoginInfoAsync()这类方法）留在SSR父页面中执行，确保这些需要服务器上下文的逻辑在静态渲染阶段完成。
2. 拆分交互组件：把表单等需要交互的部分拆分为独立的ExternalLoginForm组件，并给这个组件启用InteractiveServer渲染模式。
3. 替换跳转方式：在交互式组件中，使用NavigationManager替代RedirectManager进行页面跳转，避免因响应已启动导致的错误。

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