服务器端渲染后，Angular 页面加载两次

Question

我使用Angular Universal实现了服务器端渲染，但我们的网站出现了问题，虽然一切都正常工作，但在加载页面时，它会重复加载。我们按照Angular Universal SSR指南进行了所有操作，有人能帮忙解决这个问题吗？

- David Mkheyan

Answer 1

这是Angular Universal的一个非常普遍的问题。

服务器呈现的应用程序显示了您的应用程序的视图，而真正的客户端应用程序正在加载。它只是一个带有样式的静态HTML页面，直到浏览器在后台下载客户端应用程序脚本，然后Angular将显示实时应用程序的动态呈现视图。当客户端应用程序呈现时，它开始重新运行代码，从而会再次发出HTTP请求。

要解决这个问题，您应该使用TransferHttpCacheModule，请按照如何在项目中实现它的文档进行操作。链接：https://github.com/angular/universal/blob/master/docs/transfer-http.md

- Mohammad Kermani

---

你的解决方法只是部分解决了问题：页面闪烁虽然消失了，但页面仍然会加载两次。我可以清楚地看到这一点，因为我有CSS动画，在页面加载时触发，而这会发生两次。即使闪烁消失了，这些动画也不应该启动两次。我仍在努力解决这个问题。 - Becario Senior

当然，我已经使用这个解决方案超过一年了。只需跟随我在答案中分享的链接，仔细阅读GitHub上的那些评论，就可以得到解决方案。 - Mohammad Kermani

@MohammadKermani 我使用了你的解决方案，但它并没有起作用。 - Priyanka Arora

这个解决方案可以防止闪烁，但也会导致某些控件停止工作。例如，所有的下拉菜单在此之后都无法显示。实际上，DOMContentLoaded 没有被接收到，这意味着 platformBrowserDynamic().bootstrapModule(AppModule) 没有被调用。 - Capt. Michael

@Capt.Michael 这个解决方案是有效的，而且是基于 Angular 文档的。建议查看答案中的链接。过去几年中，Angular 已经发生了很多变化，我预计这个解决方案可能会有一些细微的变化，但最好还是查看官方文档。 - Mohammad Kermani