Blazor 8：如何结合SSR静态页与交互式布局实现路由？

完全可行，你可以通过创建两套独立布局+服务端路由管控的方式实现需求，具体步骤如下：

1. 保留服务端路由控制权 #

将Routes.razor留在Server项目中，不要迁移到Client项目。这样所有路由逻辑始终由服务端处理，既能渲染纯SSR页面，也能触发客户端交互式组件的加载。

2. 创建两套布局组件 #

服务端SSR布局（ServerLayout.razor） #

放在Server项目中，纯服务端渲染，不含任何前端交互逻辑：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <!-- 纯静态/服务端渲染的导航内容 -->
        <NavMenu />
    </div>

    <main>
        @Body
    </main>
</div>

客户端交互式布局（ClientInteractiveLayout.razor） #

放在Client项目中，设置渲染模式为InteractiveAuto，支持前端C#交互：

@inherits LayoutComponentBase
@rendermode InteractiveAuto

<div class="page">
    <div class="sidebar">
        <!-- 带交互逻辑的导航组件，比如可折叠菜单 -->
        <InteractiveNavMenu />
    </div>

    <main>
        @Body
    </main>
</div>

3. 为不同页面指定对应布局 #

• 纯SSR静态页面（如Login.razor）：指定服务端布局并设置SSR渲染模式

@page "/login"
@layout ServerLayout
@rendermode RenderMode.ServerStatic

<h1>登录页</h1>
<!-- 纯静态表单，无前端交互 -->
<form method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">登录</button>
</form>

• 交互式页面（如Dashboard.razor）：指定客户端交互式布局，自动继承布局的渲染模式

@page "/dashboard"
@layout ClientInteractiveLayout

<h1>控制台</h1>
<!-- 带交互的Blazor组件 -->
<Counter />
<WeatherForecast />

4. 配置Routes.razor确保兼容 #

在Server项目的Routes.razor中，将默认布局设为服务端布局，未指定布局的页面默认用SSR渲染，交互式页面手动指定客户端布局即可：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(ServerLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(ServerLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

关键注意事项 #

• 确保Server项目已正确引用Client项目，这样才能识别客户端布局组件
• 客户端布局中的交互组件需放在Client项目中，避免服务端无法识别
• 纯SSR页面不要使用任何需要前端交互的Blazor组件，保持静态渲染特性

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