Angular SSR中如何同时使用app-shell与prerender预渲染

Angular 原生支持 App Shell 与预渲染（Prerender）能力共存，不需要额外引入第三方工具，适配「静态页预渲染+业务页动态SSR+SSO鉴权」的场景，按以下步骤配置即可：

基础环境准备 #

首先确保项目已经集成 Angular SSR 能力，在项目根目录执行命令：

ng add @angular/ssr

命令执行完成后会自动生成服务端渲染入口、构建配置等基础文件，不需要手动修改底层逻辑。

配置 App Shell #

执行CLI命令自动生成App Shell相关代码与配置：

ng generate app-shell

CLI会自动完成两项基础配置：

• 生成独立的app-shell组件，你可以直接修改这个组件的模板，加入和站点风格匹配的骨架屏、导航占位、加载提示，这部分内容会在首次请求时直接返回给浏览器，大幅优化首次绘制速度
• 自动在angular.json中写入App Shell的构建规则，默认生产构建下会自动把Shell嵌入所有路由返回的HTML中

注意：App Shell是构建阶段生成的静态内容，不要在Shell组件中写入任何依赖登录态、需要调用接口的逻辑，SSO鉴权逻辑要放在客户端引导完成后执行，避免构建阶段报错。

配置预渲染规则，和App Shell兼容 #

App Shell和预渲染的路由命中逻辑是分层的，不会出现冲突，只需要手动指定需要预渲染的静态路由即可：

1. 在项目根目录（和angular.json同级）新建routes.txt文件，逐行写入所有需要预渲染的静态公开路由，比如/about、/help、/login这类不需要动态数据、不需要登录就能访问的页面
2. 打开angular.json，找到architect > prerender配置节点，做两个修改：
   • 将routesFile字段值设为routes.txt
   • 将guessRoutes字段设为false，避免CLI自动扫描所有路由做预渲染，把需要SSO鉴权的动态业务页也生成静态文件

配置完成后，构建流程会自动给routes.txt中列出的路由生成预渲染静态HTML，所有静态HTML都会自动内嵌App Shell内容；未列在文件中的路由会自动走动态SSR逻辑，返回的服务端渲染HTML同样会带上App Shell骨架。

SSO场景适配注意点 #

针对SSO鉴权的场景，避开几个常见的配置坑：

• 不要给预渲染的公开路由挂载SSO路由守卫，否则构建阶段预渲染时拿不到登录态，会直接跳转到SSO地址，导致生成的静态页面内容错误；路由守卫只挂载在需要登录鉴权的动态SSR路由上即可
• SSO登录态校验逻辑放在客户端初始化阶段执行：等App Shell加载完成、Angular客户端启动后，再校验本地Token、处理SSO回调参数，未登录时再跳转SSO登录页，这部分逻辑在浏览器端执行，不会影响构建阶段的静态内容生成
• 生产构建直接执行标准命令即可：

  ng build --configuration=production
  

  CLI会自动按顺序完成三个构建动作：生成App Shell静态骨架、生成指定路由的预渲染静态页面、打包动态SSR所需的服务端资源，部署时直接把dist目录部署到Node服务上即可，不需要额外做静态页、SSR页的流量分流。

效果验证 #

构建完成后可以直接本地运行验证：

• 访问预渲染的静态路由，查看页面源代码可以看到完整的静态内容+App Shell骨架
• 访问需要鉴权的动态SSR路由，首次返回的HTML会先展示App Shell，等客户端资源加载/服务端内容返回后再替换成真实页面
• 所有路由都不会出现初始白屏，首次内容绘制（FCP）指标会明显优于纯SSR或纯预渲染方案。

内容的提问来源于stack exchange，提问作者sisindrymedagam