Angular 17 SSR构建后页面无实际内容问题咨询

原因 #

你用的是**客户端渲染(CSR)**的单页应用架构（比如Angular这类框架）。服务器返回的只是基础HTML壳子，包含固定的header、footer和路由出口router-outlet，页面实际内容是浏览器加载JS后动态渲染到router-outlet中的。查看页面源代码时，浏览器展示的是服务器最初返回的原始HTML，不是JS渲染后的最终DOM结构，所以看不到实际页面内容。

解决方法 #

要让源代码包含完整页面内容，可通过以下两种方式实现：

• 服务端渲染(SSR)：
  以Angular为例，使用Angular Universal方案。在服务器端提前将对应路由的页面内容渲染成完整HTML后再返回给浏览器，这样查看源代码就能看到完整的页面内容。操作步骤大致为：安装@nguniversal/express-engine等相关依赖，配置服务器端入口文件，修改项目构建命令，最后启动SSR服务。
• 预渲染(Prerendering)：
  适合静态页面或路由固定的场景。在项目构建阶段提前将指定路由的页面渲染成静态HTML文件，部署后服务器直接返回这些静态HTML，源代码里就能看到完整内容。以Angular为例，可借助@nguniversal/builders的预渲染功能，配置好需要预渲染的路由列表，构建时会自动生成对应的静态HTML文件。

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