0Pricing
Angular Academy · 课时

为什么需要服务器端渲染

了解 SSR 对 SEO 和速度的好处

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

什么是 SSR

服务器端渲染（SSR）会在服务器上运行您的 Angular 应用，为每个请求生成完整渲染的 HTML。浏览器会立即收到有意义的标记，而不是空壳页面。

CSR 的问题

纯客户端渲染（CSR）应用会发送几乎为空的 index.html 和 JavaScript。在资源包下载、解析并运行之前，用户和爬虫看到的都是空白页面。SSR 可以弥补首次绘制之间的空白。

SEO 优势

许多爬虫和链接预览机器人会读取初始 HTML。使用 SSR 时，页面标题、元标签和内容都会包含在响应中，从而改善索引效果和社交平台的丰富链接预览。

<!-- SSR response already contains content -->
<title>Product — Blue Shoes</title>
<meta name="description" content="Comfortable blue running shoes">
<h1>Blue Shoes</h1>

更快的首次内容绘制

由于服务器会发送渲染后的 HTML，浏览器可以更早绘制内容。这会改善首次内容绘制（FCP）和用户感知的速度，在网络或设备较慢时尤其明显。

更好的核心网页指标

SSR 可以通过在初始 HTML 中提供主要内容，而不是等 JavaScript 执行后再提供，来改善最大内容绘制（LCP）。良好的指标有助于提升用户体验和搜索排名。

社交分享

有人分享链接时，平台会获取该网址，并从 HTML 中读取 Open Graph 和 Twitter 元标签。SSR 可以确保这些标签反映实际页面，从而生成准确的分享卡片。

<meta property="og:title" content="Blue Shoes">
<meta property="og:image" content="/img/shoes.png">

接下来是水合

发送 HTML 后，同一个应用会在客户端启动并接管交互功能。这个过程称为水合；现代 Angular 会复用服务器 HTML，而不是重新渲染。

权衡

SSR 会增加服务器成本和复杂性：需要 Node 运行时，需要处理仅限服务器或仅限浏览器的代码，还要在请求时进行渲染。请结合应用的 SEO 和性能收益进行权衡。

SSR 最适用的场景

内容丰富、面向公众且重视 SEO 的页面（营销页面、博客、电商列表）受益最大。需要登录才能访问的内部仪表板通常很少从 SSR 中获益。

预渲染替代方案

对于大多为静态的路由，预渲染（SSG）会在构建时生成 HTML，无需实时服务器即可获得类似 SSR 的好处。Angular 支持同时使用 SSR 和预渲染。

如今的 Angular SSR

现代 Angular 通过 @angular/ssr 和应用构建器提供官方 SSR 支持，并具备完整的 DOM 水合和按路由设置渲染模式的能力，因此 SSR 比旧版 Angular Universal 配置简单得多。

快速检查

检查您对 SSR 重要原因的理解。

回顾

您了解了 SSR 的重要原因：首次请求就返回真实 HTML，可以改善 SEO、社交预览、FCP 和 LCP。SSR 会增加服务器成本，适合面向公众且内容丰富的页面，可以与预渲染互补，而现代 Angular 通过 @angular/ssr 将其作为一等功能提供。

常见问题解答

「为什么需要服务器端渲染」课时是免费的吗？

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

「为什么需要服务器端渲染」这节课中我会学到什么？

了解 SSR 对 SEO 和速度的好处 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「为什么需要服务器端渲染」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 为什么需要服务器端渲染
  2. 配置 Angular SSR
  3. 服务器路由与渲染模式
  4. 将状态传输到客户端
← 返回 Angular Academy