angularjs 接管已经在服务器端呈现的页面

Question

因此，我希望获得社区关于 angularjs 接管已经在服务器端呈现的页面的建议。

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

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

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

解决方案的问题:

1. 双 View 技术 - 我渲染了两次页面(尽管第二次什么也没发生，但我写了两次代码)

2. Velocity 并不是编写 View 的最简单方法。这是很老的技术，我真的不喜欢它。

那么，你有什么看法呢？提前致谢!!!

Answer 1

对于 SEO，我认为最好的方法是为搜索引擎抓取工具提供预呈现的 HTML 快照。

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

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

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

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