Angular Universal跳转新页面时页面源码变化原因及机制咨询

你观察到的现象是Angular Universal的标准表现，和你原本的认知差异核心是混淆了「客户端SPA路由导航行为」和「浏览器查看源码的请求逻辑」，具体解释如下：

核心逻辑拆分 #

• 客户端路由导航无刷新：Angular 客户端路由默认使用pushState API 接管跳转行为，修改浏览器地址栏URL的同时更新局部DOM，不会触发整页的HTTP请求重载，所以你看不到加载状态，这个逻辑和普通Angular SPA完全一致。
• 查看源码时内容变更：你右键查看的「页面源码」，并不是当前浏览器里运行的SPA页面的实时DOM内容，而是浏览器针对当前地址栏的URL 重新发起GET请求后，拿到的服务端原始响应内容。Angular Universal默认会对全站所有路由做SSR处理，不是仅首屏：只要有请求打到某个合法路由URL，服务端都会返回该路由渲染完成的SSR HTML，而非和普通SPA一样所有路由都返回同一个空壳index.html。所以你跳转到新路由后，地址栏URL已经更新，查看源码时浏览器会请求这个新URL的SSR结果，自然和首屏源码不一样。

关于是否为缓存预存的解答 #

两种可能性都存在，取决于站点的部署配置：

• 若站点开启了SSR缓存策略，高频访问路由的SSR渲染结果会被预存在CDN或服务端缓存中，请求时直接返回缓存内容，响应速度更快
• 若没有配置缓存，服务端会在收到请求时实时渲染对应路由的HTML后返回
  两种情况最终返回的源码都是对应URL的完整SSR渲染结果，和你客户端侧的跳转过程没有关联。

认知补充 #

普通SPA没有SSR配置时，服务端对所有路由请求都返回同一个初始index.html，所以无论你跳转到哪个路由，查看源码拿到的内容都完全一致；而Angular Universal类的SSR站点，每个合法路由的HTTP请求都会返回对应路由的渲染后HTML，不同URL的源码本身就存在差异，和你是通过客户端跳转还是直接输入地址访问到该URL没有关系。

内容的提问来源于stack exchange，提问作者Jérémie RPK