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

3

所以,我希望社区能就 AngularJS 接管已渲染的服务器端页面提供建议。

AngularJS 很棒!但是在处理首次页面加载性能和 SEO 时存在真正的缺陷。显然,AngularJS 不兼容服务器端渲染。

长话短说,我想要服务器端渲染页面,并尽快将所有数据返回给用户/机器人。然后,在后台引导 Angular 来应用页面行为。当有请求来加载新数据时,我只想要加载数据并将其绑定到内容中,而不必刷新所有内容并进行 HTML 回传。

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

解决方案存在的问题:

  1. 两种视图技术 - 我需要渲染页面两次(尽管第二次什么也没发生,但我写了两遍代码)

  2. Velocity 并不是编写视图最简单的方式。它是非常老旧的技术,我并不喜欢。

那么,您的意见是什么呢?谢谢!

1个回答

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都支持。您可以在网上找到如何使用它们的示例。


你是否熟悉与Angular配合使用的更多服务器端渲染技术?客户端和服务器端渲染的代码重用方面有什么了解吗? - alonn24

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接