SuperAPI AI 工具集

angular-ssr

前端与建站

查看项目

更新于 10-19 16:18

技能介绍

Angular SSR 是一份面向 Angular v20 及以上版本的使用说明,主题是借助 @angular/ssr 实现服务端渲染(SSR)、水合(Hydration)与预渲染(Prerendering)。文档按配置、渲染模式、水合、浏览器专属代码、预渲染、HTTP 缓存和构建部署几个部分组织。

用途与安装:在已有项目中执行 ng add @angular/ssr,会自动添加 @angular/ssr 包、server.ts(Express 服务器)、src/main.server.ts(服务端引导)、src/app/app.config.server.ts(服务端 provider),并更新 angular.json 的 SSR 配置。文档给出项目目录结构,区分浏览器入口与服务器入口。

配置:app.config.server.ts 使用 provideServerRendering() 与 provideServerRoutesConfig(serverRoutes),再通过 mergeApplicationConfig 合并浏览器配置。服务端路由文件 app.routes.server.ts 用 RenderMode 为每个路径指定渲染方式:Prerender 在构建时生成静态 HTML,适合营销页和博客;Server 按请求动态 SSR,适合用户相关内容;Client 为纯客户端 SPA,适合需登录的后台面板。

水合:默认通过 provideClientHydration() 启用。增量水合可在模板中用 @defer (hydrate ...) 延迟具体组件,触发条件包括 viewport、interaction、idle、immediate、timer(ms)、when 条件表达式和 never。withEventReplay() 可捕获水合完成前的用户事件并重放。

浏览器专属代码:文档示范用 PLATFORM_ID 配合 isPlatformBrowser / isPlatformServer 判断运行平台,使用 afterNextRender 与 afterRender 在浏览器渲染后执行 DOM 相关逻辑,并通过 InjectionToken 安全注入 window、localStorage 等浏览器 API。

预渲染:静态路由直接标记 Prerender;动态路由可用 getPrerenderParams 异步获取参数列表,并用 fallback 指定未预渲染路径的处理方式(Server 走 SSR、Client 走客户端渲染、None 返回 404)。

HTTP 缓存:通过 withHttpTransferCacheOptions 配置服务端响应向客户端的传输缓存,可设置是否包含 POST 请求、是否包含带认证头的请求以及过滤函数;也可用 TransferState 与 makeStateKey 手动传递数据。

构建与部署:ng build 输出 dist 下的 browser 与 server 目录;开发时用 npm run serve:ssr:my-app,生产用 node dist/my-app/server/server.mjs 启动;文档附有基于 Express 与 CommonEngine 的 Node.js 托管示例。更多进阶模式可参阅 references/ssr-patterns.md。