Angular Academy · 课时

服务器路由与渲染模式

为每个路由配置预渲染、SSR 和 CSR

服务器路由与渲染模式 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

并非所有路由都适用同一种方式

并非每个路由都应采用相同的渲染方式。Angular SSR 允许您为每个路由分配渲染模式：服务器渲染、客户端渲染或在构建时预渲染。

三种模式

RenderMode.Server 会在每次请求时渲染，RenderMode.Client 只在浏览器中渲染（CSR），RenderMode.Prerender 则在构建时生成静态 HTML（SSG）。

服务器路由配置

定义一个将路径映射到渲染模式的 ServerRoute[]，然后在服务器配置中通过 provideServerRouting 提供它。

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

完成接入

在服务器应用配置中注册这些路由，让 SSR 引擎知道如何处理每个路径。

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

何时进行预渲染

对于稳定且公开的页面（首页、关于页面、文档），请选择 Prerender。这些页面会一次性构建为 HTML，从 CDN 即时提供，且不会产生按请求计费的服务器成本。

何时使用服务器渲染

对于内容会随请求或用户变化，但仍需要 SEO 或快速首次绘制的页面，请选择 Server，例如显示实时库存的商品页面。

何时使用客户端渲染

对于交互性很强且私密、对 SEO 和首次绘制要求不高的页面，请选择 Client，例如需要身份验证的仪表板。服务器发送一个页面外壳，由浏览器完成渲染。

预渲染动态参数

对于带参数的路由，您必须通过 getPrerenderParams 返回列表，告诉预渲染器需要生成哪些参数。

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

预渲染的回退方案

未进行预渲染的参数可以在运行时回退到服务器渲染或客户端渲染，因此您可以预渲染热门条目，并按需渲染长尾条目。

按路由设置响应标头和状态

服务器路由可以设置响应标头和状态码，这对于缓存策略很有用，也可用于让未找到路由处理程序返回 404。

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

有策略地混合模式

实际应用通常会混合使用各种模式：预渲染营销页面，服务器渲染对 SEO 至关重要的动态页面，并对登录后的应用使用客户端渲染。这样可以同时优化成本和性能。

快速检查

检查您对渲染模式的掌握情况。

回顾

您使用 ServerRoute[] 和 provideServerRouting 配置了按路由渲染：稳定的公开页面使用 Prerender，动态 SEO 页面使用 Server，私密交互页面使用 Client，并为动态路由配置了预渲染参数。

常见问题解答

「服务器路由与渲染模式」课时是免费的吗？

是的 — 「服务器路由与渲染模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「服务器路由与渲染模式」这节课中我会学到什么？

为每个路由配置预渲染、SSR 和 CSR 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「服务器路由与渲染模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy