Angular SSR (Universal) 提供什么？

Question

Accepted Answer

**Angular SSR**（历史上称为 Angular Universal）在**服务器上**为初始请求渲染应用的 HTML，而不是发送一个空白页面让浏览器用 JavaScript 填充。这改进了 SEO、感知性能和首次绘制。 ## SSR 解决的问题 ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` 通过 SSR，服务器生成完整的 HTML，使用户和搜索引擎立即获得真实内容；然后 Angular 附加事件侦听器（hydration）使其具有交互性。 ## 设置它 ```bash ng add @angular/ssr # adds server rendering to an existing app ``` 这会搭建一个 Node/Express 服务器，在服务器上渲染 Angular 并提供预渲染的 HTML。 ## SSR 提供的功能 ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Hydration — 避免重新渲染 ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` 现代 Angular 的**非破坏性 hydration** 重用服务器渲染的 DOM，而不是丢弃并重新渲染——避免闪烁并改进性能。 ## 相关：SSG（预渲染） ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular 还支持在构建时**预渲染** (SSG) 路由，以实现静态内容的最快交付。 ## 注意事项 ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## 为什么这很重要对于内容丰富的网站、电子商务或任何**SEO 和快速首次绘制很重要**的应用，仅客户端 Angular SPA 不足——搜索引擎和用户在 JS 执行之前看到的是空白页面。 SSR（配合 hydration）通过预先交付真实 HTML 来解决这个问题，而 SSG 对静态内容更进一步。了解何时 SSR 值得其额外的复杂性——以及浏览器 API 的注意事项——是关键的架构判断。