SuperAPI AI 工具集

support-prerendering

前端与建站

查看项目

更新于 10-16 00:05

技能介绍

用途:让交互式 Blazor 组件在预渲染(prerender)下正确工作,修复预渲染到交互切换过程中的重复数据加载、UI 闪烁等问题。

主要能力:说明预渲染默认对所有交互式渲染模式开启,服务器先输出静态 HTML,再由交互运行时(Server/WebAssembly)重新渲染;因此 OnInitializedAsync 会执行两次,OnAfterRenderAsync 在预渲染阶段不调用,交互式页面间的内部导航会跳过预渲染。

使用方式:先查看项目 AGENTS.md 中的交互模式与范围,模式为 None(静态 SSR)时该技能不适用。跨预渲染持久化状态推荐用 [PersistentState] 特性,配合 ??= 仅在未恢复时取数;同一组件多实例用 @key 区分状态;复杂场景可用 PersistentComponentState 服务,通过 RegisterOnPersisting、TryTakeFromJson、PersistAsJson 手动注册与恢复。需要禁用预渲染时,可在组件定义、组件实例或 App.razor 的 HeadOutlet/Routes 上使用 prerender: false 的渲染模式;父级设置会覆盖子级。需要 HttpContext 的页面可用 [ExcludeFromInteractiveRouting],并在 App.razor 中按 HttpContext.AcceptsInteractiveRouting() 条件应用渲染模式。运行时可用 RendererInfo.IsInteractive 与 Name 判断是否处于交互阶段。

限制与注意:不要在 OnInitializedAsync 中调用 JS 互操作,应放到 OnAfterRenderAsync(firstRender);不要假设 OnInitializedAsync 只执行一次;不要在交互式组件中使用 HttpContext;不要一上来就禁用预渲染,因其影响感知加载时间与 SEO,应优先用 [PersistentState] 保留状态。仅注册在客户端 Program.cs 的服务在预渲染时不可用,可通过服务端注册、可选注入、服务抽象或禁用该组件预渲染解决。