SuperAPI AI 工具集

angular-ssr

前端与建站

查看项目

更新于 10-15 23:46

技能介绍

用途:在 Angular v20+ 中实现服务端渲染(SSR)、水合(hydration)与静态预渲染。

安装:ng add @angular/ssr,会加入 @angular/ssr 包、server.ts(Express 服务器)、src/main.server.ts、src/app/app.config.server.ts,并更新 angular.json。

主要能力:提供三种渲染模式——RenderMode.Prerender(构建时静态 HTML,适合营销页与博客)、RenderMode.Server(每次请求动态 SSR)、RenderMode.Client(仅客户端 SPA,适合需登录的仪表盘);支持在 app.routes.server.ts 中按路由配置服务端路由。水合默认通过 provideClientHydration() 启用,并支持增量水合,使用 @defer (hydrate on viewport / interaction / idle / immediate / timer(ms) / when condition / never) 控制组件的水合时机。可用 withEventReplay() 捕获水合完成前的用户事件。

服务端安全:通过 PLATFORM_ID 与 isPlatformBrowser / isPlatformServer 判断平台,或用 afterNextRender / afterRender 仅在浏览器执行 DOM 相关逻辑;也可用 InjectionToken 安全注入 window、localStorage 等浏览器 API。

预渲染与数据:动态路由可用 getPrerenderParams 生成预渲染参数,fallback 可选 PrerenderFallback.Server、Client 或 None。HTTP 数据可通过 withHttpTransferCacheOptions 自动传输,或手动使用 TransferState 与 makeStateKey 避免客户端重复请求。

构建与部署:ng build 产出 browser 与 server 目录;开发用 npm run serve:ssr:my-app,生产用 node dist/my-app/server/server.mjs;server.ts 基于 Express 与 CommonEngine,示例监听 4000 端口。

限制:资料未提供具体版本兼容范围、性能数据、平台部署细节及收费信息。