Angular的TransferState类实现服务器端渲染(SSR)和预渲染(Prerendered-SSR)Angular应用使用从服务器获取的数据并有效渲染的讨论在浏览器中。如果您使用SSR或预渲染应用程序策略,则过程如下所示:在服务器浏览器上预渲染或渲染应用程序获取渲染的HTML和CSS并显示“静态”应用程序浏览器获取、解析、解释和执行JavaScriptAngular应用程序被引导,用一个新的“正在运行的”应用程序替换整个DOM树应用程序被初始化,通常从远程服务器或API获取数据用户与应用程序交互这种情况有两个问题:DOM水合将重复替换整个节点树并重新绘制应用程序由于SSR或预渲染站点策略,应用程序将重复获取理论上已经读取并显示给用户的数据第一个问题目前在Angular问题中没有解决,但是第二个问题已经有了解决方案,就是本文讨论的AngularTransferState机制。TransferState是一种策略:使用SSR或预渲染策略来获取渲染完整“静态”应用程序所需的数据序列化数据并使用初始文档(HTML)响应发送数据当应用程序运行时在运行时解析序列初始化数据,避免冗余数据获取技术上,数据通过JSON.stringify()序列化,通过JSON.parse()解析。但是,通常我们不需要担心这个,因为Angular中的TransferState服务已经为我们执行了这个操作。即使服务器工作在SSR模式下,在Chrome浏览器网络中仍然可以观察到CMSOCCAPI调用。products和cms的ssrTransfer已经开启:ConfigModule.withConfig({state:{ssrTransfer:{keys:{products:true,cms:true}}}});products:确实在客户端没有观察到OCCAPI调用来读取Getproductdata。cms:默认情况下,Spartacus会在每次路由变化时重新加载CMS页面数据,而不管它是否已经存在于ngrxstore中。客户可以通过修改配置项来改变这种行为:Spartacusconfigrouting.loadStrategy:RouteLoadStrategy.ONCE。上述逻辑在CmsPageGuard.shouldReload方法中实现。
