如何在 Blazor Web 应用程序中的服务器端渲染特定页面？

Question

我通过选择 自动交互渲染模式 和 全局交互位置 创建了 blazor Web 应用程序。因此该解决方案具有客户项目中的路线和布局。现在我想在服务器端渲染一个 blogDetail 页面以获得更好的 SEO。我已经有了客户端项目的页面，该页面正在使用 httpClient 从服务器项目的 api 获取数据。

如何在不破坏页面交互性的情况下使页面最初在服务器端渲染？

Answer 1

我认为你可以动态设置全局渲染模式。尝试在“App.razor”中进行如下修改：

...
<HeadOutlet @rendermode="RenderModeForPage" />
...
    <Routes @rendermode="RenderModeForPage" />
...
@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;
    
//when the route is "blogDetail ", set to InteractiveServer(disable prerender SSR)
    private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/blogDetail")
        ? new InteractiveServerRenderMode(false)
        : InteractiveAuto;
}