AngularJS - 服务器端呈现

Question

正如你可能知道,制作的Airbnb opensourced Rendr(http://nerds.airbnb.com/weve-open-sourced-rendr)应使服务器端渲染的主干应用程序.这很酷,因为可以在服务器上运行模板渲染的第一次"迭代",并且客户端获得完全呈现的HTML文档以及整个JS应用程序.它大大缩短了显示时间,可以让我们摆脱其他服务器端的模板系统.

那么,有人设法用jsdom或ZombieJS渲染AngularJS吗？在理论上,Node.js上的这些dom /浏览器仿真应该足以用于简单的服务器端角度模板,但我发现谷歌搜索的结果并不是非常确定的.

Answer 1

这是另一个解决方案:https://github.com/ithkuil/angular-on-server

维基详情

Answer 2

这种新的封装https://github.com/a-lucas/angular.js-server让您预渲染的角度应用和发送HTML到客户端,然后将执行JS代码.

它支持每个URL的缓存,您可以定义规则来激活URL预渲染.

PS:我是这个包的主要贡献者.

Answer 3

AngularJS在没有任何技巧的情况下使用jsdom上下文.只需将angular.js添加到js src列表和角度应用的主页面到jsdom的初始化.

因此,渲染非常简单:只需在jsdom中使用angular即可.把它放到浏览器上有点困难.

一种方法是批量同步DOM更改.

要获得动态的服务器到客户端更新,您可以使用MutationEvents(不幸的是,jsdom不支持MutationObservers,但MutationEvents工作得非常快).使用它们在累加器数组中堆叠DOM更改并定期将其推送到客户端浏览器(例如,每25毫秒).

此外,为了启用用户事件,您应该在浏览器上以文档方式跟踪它们,并且类似的累积并将它们推送到服务器.

这种方法的一种实现是jsdom-sync(https://www.npmjs.org/package/jsdom-sync)

服务器端渲染的缺点是缺少DOM盒模型大小,因为要获得元素宽度/高度,它应该实际渲染.意味着这个解决方案几乎不适合svg等等..

您也可以考虑观看范围模型并将其与浏览器端范围同步,但那是完全不同的故事.

Answer 4

@dai-shi 创建了 connect-prerenderer，请参见此处。还有一些问题，但希望有一个好的开始