angularjs 接管已经在服务器端渲染的页面

Question

所以，我想要社区关于 angularjs 接管已经在服务器端呈现的页面的建议。

angularjs 很棒！但是当涉及到首页加载性能和 SEO 时，确实存在一个缺点。显然angularjs不兼容服务端渲染。

长话短说，我想在服务器端渲染一个页面，并尽可能快地将所有数据返回给用户/机器人。然后，在后台，引导角度应用页面行为。当有加载新数据的请求时，我只想加载数据并绑定到内容而不刷新所有内容并往返获取html。

目前，我使用Velocity作为服务器端模板引擎来创建渲染页面，然后使用 angular.bootstrap async 来应用角度。

解决方案的问题：

1. 双视图技术 - 我两次渲染页面（虽然第二次没有发生任何事情但我写了两次代码）

2. Velocity 并不是编写视图的最简单方法。这是相当古老的技术，我不太喜欢它。

那么，你的意见是什么？ 提前谢谢！！！

Answer 1

对于 SEO，我认为最好的方法是向搜索引擎爬虫提供预渲染的 HTML 快照。

基本上，搜索引擎爬虫会使用一些特殊的查询字符串参数访问您的页面，以将自己标识为爬虫而不是真实用户。当您检测到 URL 模式时，您可以提供页面的预渲染无 JavaScript 快照。

查看谷歌对此的解释：https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

至于首页加载，如果您的双花括号在引导之前出现，请使用 ng-bind 指令 (https://docs.angularjs.org/api/ng/directive/ngBind)。如果您不喜欢在检索数据之前显示页面的方式，请在控制器上使用 resolve 或显示适当的加载指示符（微调器、“正在加载...”或您喜欢的任何内容）以通知用户正在加载进行中。

默认 Angular 路由器和 ui-router 都支持 Resolve。您可以在网上找到如何使用它们的示例。