Angular 16升级后,使用Hydration仍需TransferState和makeStateKey吗?
Angular 16 Hydration 和 TransferState 共存的疑问解析
- 本质原因是Angular 16的自动Hydration机制会直接复用服务端渲染好的DOM和组件状态,哪怕你删掉了某个请求的TransferState配置,客户端初始化组件时会直接用服务端已经渲染出来的数据,不会重新发请求。
- TransferState和Hydration完全可以共存,Hydration是更底层的自动状态复用逻辑,TransferState是手动显式传递状态的方式。两者同时用的时候,Hydration会优先复用DOM里的状态,TransferState可以作为兜底或者手动控制特定状态的补充手段。
- 你代码里的
this.USER_KEY = makeStateKey<User>('userAuthKey');是传统TransferState的状态键定义,就算把这段相关的TransferState读写代码删掉,Hydration也会自动保留服务端渲染好的用户数据,所以客户端不会重复发起请求。 - 要是之后你需要手动控制某些状态的传递,或者碰到Hydration覆盖不到的场景(比如动态加载组件的数据),TransferState还是能正常用,两者不会互相干扰。
内容的提问来源于stack exchange,提问作者wavrik
相关产品推荐
相关产品推荐

