Blazor WebAssembly 怎么进行预渲染 (Prerendering)

来源:这里教程网 时间:2026-02-21 17:35:40 作者:

Blazor WebAssembly 本身不支持服务端预渲染(Prerendering),因为它的核心逻辑完全在浏览器中运行,.NET 运行时和应用代码都下载到客户端后才启动。但你可以通过 Blazor Hybrid 方式 + ASP.NET Core Hosted 模式 实现“类预渲染”效果——即先用服务端 Blazor Server 渲染首屏 HTML,再无缝切换(hydrate)为 WebAssembly 客户端运行。

为什么原生 WebAssembly 不支持预渲染?

WebAssembly 应用启动依赖下载以下资源:

dotnet.wasm(.NET 运行时) 应用程序集(.dll 文件) 静态资源(_framework/ 目录下内容)

这些必须在浏览器中加载并初始化后,UI 才能渲染。服务端无法执行 WASM 字节码,所以无法提前生成 HTML。

可行方案:使用 Hosted 模式 + Server-side Prerendering

这是官方推荐的折中方案,适用于

blazorwasm
项目托管在 ASP.NET Core 后端(即
Client/Server/Shared
三层结构):

Server
项目中配置 Blazor Server 渲染入口(如
_Host.cshtml
启用服务端首次渲染:
<component type="typeof(App)" render-mode="WebAssemblyPrerendered"></component>
此时服务端会用 Blazor Server 引擎模拟渲染组件树,输出初始 HTML + 附带
__blazor_start_options
脚本
浏览器加载后,WASM 运行时启动,接管 DOM(hydrate),保持状态连贯性

⚠️ 注意:预渲染期间不能调用 WASM 专属 API(如

JSRuntime.InvokeAsync
),否则服务端会报错。需用
NavigationManager
或条件判断规避。

关键配置步骤

确保

Server
项目的
Program.cs
中已注册服务:

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents(); // 关键:启用 WebAssembly 预渲染支持

Pages/_Host.cshtml
中使用正确 render-mode:

<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

同时确认

wwwroot/index.html
<div id="app"></div>
存在,且脚本引用顺序正确(
blazor.webassembly.js
必须在组件之后)。

替代思路:静态首屏 + WASM 延迟加载

如果不想引入 Server 端渲染,也可手动实现轻量级首屏:

index.html
中写一个简单的 loading 页面或骨架屏(HTML/CSS)
保留
<div id="app">Loading...</div>
利用
WebAssemblyHostBuilder
OnInitializedAsync
或自定义加载状态管理真实 UI 显示时机

这种方式不是真正预渲染,但能显著改善首屏感知性能,适合内容静态、SEO 要求不高的场景。

基本上就这些。Blazor WebAssembly 的预渲染本质是借力服务端 Blazor Server 的能力,不是纯客户端能做到的事。选对模式、避开服务端不支持的 API,就能兼顾 SEO 和交互体验。

相关推荐