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

时间:2014-05-25 14:07:30

标签: angularjs rendering velocity

所以,我希望有关angularjs的社区建议接管已经服务器端的呈现页面。

angularjs很棒!但是当它归结为第一页加载性能和SEO时有一个真正的缺点。很明显,angularjs与服务器端渲染不兼容。

总而言之,我希望服务器端渲染页面,尽可能快地将其恢复到用户/机器人的所有数据。然后,在后台,bootstrap angular应用页面行为。当有一个加载新数据的请求时,我只想加载数据并绑定到内容而不刷新所有内容并往返获取html。

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

解决方案的问题:

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

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

  3. 那么,你有什么看法? 在此先感谢!!!

1 个答案:

答案 0 :(得分:1)

对于SEO,我认为最好的方法是将预渲染的HTML快照提供给搜索引擎抓取工具。

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

查看Google对此的解释: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。您可以在线找到如何使用它们的示例。