AngularJS-服务器端渲染


75

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

那么,有人设法用jsdom或ZombieJS渲染AngularJS吗?理论上,Node.js上的这些dom /浏览器仿真对于简单的服务器端Angular模板应该足够了,但是我发现使用谷歌搜索它的结果不是很确定。


7
它可能会在AngularJS 2.0中引入。在此视频中,他们讨论了服务器端渲染以及为什么当前无法使用AngularJS进行此类操作。
JayQ 2013年

有什么答案对您有用吗?
Xsmael

Answers:


16

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

Wiki以获得详细信息

该仓库的作者提供的最新信息:大约是6年前(在本次编辑时)。此时,人们可能应该使用https://angular.io/guide/universal或仅使用https://prerender.io/


3
angular.io是针对Angular的,而不是AngularJs。他们是两种完全不同的语言……
bokkie

我可以在服务器端使用PHP而不是Express的应用程序中使用Prerender吗?怎么样?
拉兹万·赞菲尔


5

AngularJS使用jsdom上下文无需任何技巧。只需将angular.js添加到js src列表中,并将angular应用程序的主页添加到jsdom的初始位置即可。

因此,渲染非常简单:只需在jsdom中使用angular即可。将其放到浏览器中比较困难。

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

要获取服务器到客户端的动态更新,您可以使用MutationEvents(不幸的是,jsdom不支持MutationObservers,但是MutationEvents的运行速度非常快)。使用它们将DOM更改堆积在累加器阵列中,并定期将其推送到客户端浏览器(例如,每25毫秒)。

另外,要启用用户事件,您应该在浏览器上以文档方式对其进行跟踪,并累积类似事件并将其推送到服务器。

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

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

您也可以考虑观察范围模型并将其与浏览器端范围进行同步,但这完全是另一回事。


4

我也在寻找解决方案。但这不是使用浏览器在服务器上呈现html并将其发送到前端的选择。Airbnb首先尝试,但由于速度慢且资源匮乏而被拒绝。这不是生产解决方案。

更新:很快就可以通过引入Object.observe;)


在大多数情况下,服务器端渲染将用于机器人以及某些特殊情况,因此对服务器性能的影响可忽略不计。服务器端的“渲染”也只是html处理的模板,而没有实际的渲染(这是最占用CPU的时间),而无论如何都在客户端进行。
setec

通常,您希望在初始加载时进行服务器端渲染。因此,用户x首次访问该应用将进入列表页面。也许他们关闭了浏览器,然后稍后将其重新打开。服务器可以在初始启动时为我们完成所有这些操作,而不是加载应用程序,然后再对数据进行http请求。另一个非常有用的原因是对于搜索引擎机器人。并非所有人都像Google机器人一样聪明,也没有自己的JavaScript编译器。
jemiloii'3

渲染时间对使用加载时间作为目标网页质量因素的Google Adwords机器人很重要。我发现,甚至像PhantomJS这样的无头浏览器也会产生大量的CPU负载。
爱德华·纽维尔




2

我知道这是一个较晚的答案,angular.js-server(https://github.com/a-lucas/angular.js-server)使用了经过修改的angular版本,该版本触发了必要的空闲状态,以检测何时所有处理ajax请求和$ compile事件。

我设法几乎不做任何修改就预渲染了mean.js堆栈。



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.