Angular Universal独立组件生命周期：缓存与客户端读取时机

1. 服务端获取的网络值何时可安全在客户端读取，对应的生命周期流程是怎样的？ #

• 安全读取时机：
  • 要么等客户端完成**hydration（水合）**后；要么通过TransferState传递到客户端的值，在客户端初始化阶段（比如ngOnInit、APP_INITIALIZER）就能直接安全读取。
• 生命周期流程：
  • 服务端：触发组件从constructor到ngAfterViewInit的生命周期钩子，若使用HttpClient配合Universal，框架会追踪所有待处理请求，等待全部完成后生成HTML，并将状态通过TransferState注入到页面的script标签中。
  • 客户端：启动时优先读取TransferState中的预存数据，完成水合后组件生命周期钩子再次触发，此时可直接使用服务端已获取的数据，无需重复请求。

2. 两种缓存方式的理解是否正确？ #

• 第一种理解不完全准确：Angular Universal不会自动缓存HttpClient的响应，它只会等待服务端渲染期间发起的所有HttpClient请求完成再生成HTML。客户端初始化时，若未手动用TransferState传递数据，会重新发起请求；只有配合TransferHttpCacheModule时，才会自动将服务端HttpClient响应缓存到TransferState，让客户端直接读取避免重复请求。
• 第二种理解正确：TransferState是手动管理服务端到客户端状态传递的API，服务端将数据存入其中，客户端初始化时优先读取这里的数据，无数据时再发起请求。

3. 在ngOnInit中await fetch请求，Angular是否会等待请求完成再转发到客户端？能否绕过HttpClient直接使用fetch？ #

• Universal默认不会追踪原生fetch请求，所以即使在ngOnInit中await fetch，服务端也不会等待请求完成，会直接生成HTML返回，导致服务端渲染的页面不包含请求返回的数据。
• 可以绕过HttpClient使用fetch，但需要手动让Universal等待请求完成：比如用zone.run()包裹请求，或者在APP_INITIALIZER中执行fetch并等待完成（但会延长服务端渲染时间）。另外，若要把数据传递到客户端，需手动将数据存入TransferState。

4. 使用HttpClient在ngOnInit中发起请求，是否一定会在转发到客户端前完成？是否有更合适的生命周期钩子？ #

• 默认配置下，Universal会追踪服务端渲染期间HttpClient发起的所有请求，等待全部完成后再生成HTML返回，但如果请求是在ngAfterViewInit或更晚的钩子中发起，Universal可能不会等待，因为此时DOM已基本生成。
• 更合适的钩子：
  • 组件级数据请求推荐用ngOnInit，能保证Universal追踪并等待请求完成；
  • 全局数据获取推荐用APP_INITIALIZER，它会在应用初始化阶段执行，等待请求完成后再启动应用。

5. Firebase托管+纯独立组件中，fetch设置的标题和元标签未生效，手动设置正常的原因？ #

• 核心原因是服务端渲染时机：原生fetch请求不会被Universal追踪，服务端会直接生成HTML返回，此时异步请求还未完成，标题和元标签没被设置，Firebase托管抓取页面时读取的是初始返回的HTML，自然看不到异步设置的内容。
• 手动设置是同步执行的，在服务端渲染期间就完成了标题和元标签的设置，所以能被Firebase正确抓取。
• 若要异步设置元数据，需用HttpClient发起请求（让Universal等待完成），或者手动让Universal等待fetch请求完成，确保服务端生成的HTML中包含这些元数据。

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