为何Angular SSR/Universal客户端导航获取的数据会出现在页面源码中

核心原因 #

• 你看到的「页面源码」不是客户端导航后的内存DOM对应的源码，而是浏览器重新向服务端发起当前URL请求后返回的SSR渲染结果
  右键点击「查看网页源代码」的行为，本质是浏览器主动向服务端发起一次当前地址的GET请求，服务端收到请求后会执行对应路由组件的完整渲染逻辑，包括执行ngOnInit中的http.get('api/users')请求，拿到数据后拼接成完整HTML返回，所以源码中自然会包含接口返回的数据。这个过程和你之前通过routerLink执行的客户端导航完全是独立的两个流程。
• Angular SSR 默认的路由渲染策略
  你用npm run dev:ssr启动的是Angular Universal的SSR开发服务，默认所有路由都会开启服务端渲染，只要是页面级的GET请求（包括查看源码、地址栏输入回车、刷新页面触发的请求）都会走服务端渲染逻辑，拿到数据后返回完整HTML。
• 和Vue SSR表现不同的原因
  你之前做的Vue SSR项目看不到对应数据，大概率是项目配置了该路由仅走客户端渲染，没有配置服务端渲染逻辑，所以服务端返回的是没有数据的空HTML，自然源码中看不到数据。

验证方法 #

你可以按照以下步骤验证逻辑：

1. 打开站点首页，按下F12打开开发者工具，切换到「网络」面板，清空所有请求记录
2. 点击页面上的routerLink跳转到目标组件，此时网络面板只会出现api/users的XHR请求，不会出现新的HTML文档请求
3. 此时不要右键查看源码，直接在开发者工具的「元素」面板可以看到渲染后的用户数据，这是客户端渲染的结果
4. 此时再右键点击「查看网页源代码」，观察网络面板会出现一条新的HTML文档请求，这个请求走的就是SSR流程，返回的HTML里自然包含服务端请求到的用户数据

可选配置：路由跳过SSR #

如果你希望该路由即使刷新、查看源码也不会走服务端渲染，仅在客户端渲染数据，可以按如下配置：

1. 在路由配置中给对应路由添加标记

const routes: Routes = [
  {
    path: 'my-component',
    component: MyComponent,
    data: { skipSsr: true }
  }
]

2. 在server.ts中判断路由标记，匹配到的路由直接返回客户端入口HTML

server.get('*', (req, res) => {
  const matchedRoute = router.config.find(route => req.path.match(route.path));
  if (matchedRoute?.data?.skipSsr) {
    res.sendFile(join(distFolder, 'index.html'));
    return;
  }
  // 保留原有SSR渲染逻辑
})

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