如何禁用Blazor Server端预渲染？ASP.NET Core Preview版本适配指南

从ASP.NET Core Preview 4开始，Blazor Server的组件渲染机制做了调整，单纯注释掉@(await Html.RenderComponentAsync<MyApp>())确实会导致页面无法正常渲染——因为此时<app>标签是空的，Blazor不知道要挂载哪个根组件。这里有两种可靠的解决办法：

方法一：修改渲染模式（推荐） #

这是最简单直接的方式，不需要改动太多代码：

1. 打开你的宿主页面（通常是Pages/_Host.cshtml）；
2. 找到原来的组件渲染代码，把RenderMode.ServerPrerendered替换成RenderMode.Server。

修改前的代码：

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

修改后的代码：

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>

RenderMode.Server模式下，服务器不会预先渲染组件的HTML内容，而是直接建立SignalR连接，由客户端浏览器完成组件的初始渲染，完美实现禁用预渲染的需求。

方法二：手动配置Blazor启动（适合完全自定义场景） #

如果你希望彻底移除服务器端的组件渲染代码，也可以通过手动配置Blazor启动脚本的方式实现：

1. 注释掉宿主页面中@(await Html.RenderComponentAsync<MyApp>())这行代码；
2. 给<app>标签添加一个id，比如<app id="blazor-root"></app>；
3. 在页面底部的<script src="_framework/blazor.server.js"></script>之后，添加自定义启动脚本，指定要渲染的根组件：

<app id="blazor-root"></app>

<script src="_framework/blazor.server.js"></script>
<script>
    Blazor.start({
        rootComponents: [
            { 
                componentType: typeof(App), 
                selector: '#blazor-root' 
            }
        ]
    });
</script>

这种方式完全跳过服务器端的预渲染逻辑，由客户端主动触发组件的渲染流程。

为什么Preview3注释代码就行？ #

在ASP.NET Core Preview 3中，Blazor Server会自动查找并挂载根组件，即使你注释掉预渲染代码，客户端启动时仍能识别并渲染指定的根组件。但Preview4之后，框架调整了初始化逻辑，必须显式指定要渲染的组件（要么通过RenderComponentAsync，要么通过Blazor.start的配置），否则<app>标签会一直为空。

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