AngularJS - 服务器端渲染答案

【问题标题】：AngularJS - server-side renderingAngularJS - 服务器端渲染
【发布时间】：2013-04-20 09:40:26
【问题描述】：

您可能知道，AirBnb 开源了 Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr)，它应该启用 Backbone 应用的服务器端渲染。这很酷，因为可以在服务器上运行模板渲染的第一次“迭代”，客户端得到完全渲染的 HTML 文档和整个 JS 应用程序。它大大缩短了显示时间，并且可以让我们摆脱其他服务器端模板系统。

那么，有人设法用 jsdom 或 ZombieJS 渲染 AngularJS？ Node.js 上的这些 dom/浏览器模拟理论上应该足以用于简单的服务器端 Angular 模板，但我发现谷歌搜索的结果并不是很确定。

【问题讨论】：

它可能会出现在 AngularJS 2.0 中。在this video 中，他们讨论了服务器端渲染以及为什么目前无法用 AngularJS 做这样的事情。
任何答案对你有用吗？

标签： node.js angularjs templates server-side-rendering zombie.js

【解决方案1】：

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

wiki了解详情

该 repo 的作者更新：那是大约 6 年前（在本次编辑时）。此时，人们可能应该使用https://angular.io/guide/universal 或只是https://prerender.io/

【讨论】：

angular.io 是针对 Angular 的，而不是针对 AngularJs 的。它们是两种完全不同的语言...
我可以在服务器端使用 PHP 而不是 Express 的 application 中使用 Prerender 吗？怎么样？

【解决方案2】：

这个新包https://github.com/a-lucas/angular.js-server 允许您预渲染一个Angular 应用程序并将HTML 发送到客户端，然后客户端将执行js 代码。

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

PS：我是这个包的主要贡献者。

【讨论】：

【解决方案3】：

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 的），无论如何都会发生在客户端。
通常您希望在初始加载时进行服务器端渲染。所以用户 x 第一次访问应用程序时将进入列表页面。也许他们关闭了浏览器并稍后重新打开。而不是加载应用程序，然后对数据发出另一个 http 请求，服务器可以在初始启动时为我们完成所有这些。这样做的另一个非常有用的原因是搜索引擎机器人。并非所有人都像谷歌机器人一样聪明，也没有自己的 javascript 编译器。
渲染时间对于使用加载时间作为landing page quality 的一个因素的 google Adwords 机器人来说确实很重要。我发现即使是像 PhantomJS 这样的无头浏览器也会产生大量的 CPU 负载。

【解决方案5】：

AngularJS 2.0 也可以在服务器上运行。 Vojta Jina 在“JavaScript Jabber”节目 #109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/（播放器中 32:30）上谈到了它。有一个指向新 AngularJS 依赖注入模块的链接 - https://github.com/angular/di.js。

【讨论】：

【解决方案6】：

@dai-shi 创建了连接预渲染器，请参阅 here。还有一些问题，但希望是一个好的开始

【讨论】：

如果我有一个在服务器端使用 PHP 而不是 Express 的 application 怎么办？我有什么选择？

【解决方案7】：

一种方法是将 HTML 请求路由到运行 phantomjs 的 nodejs 服务器。我使用了一种基于 phantomjs 的方法。看看是否解决了

http://himangshu.io/blog/optimizing-single-page-application-using-prerender/

【讨论】：

【解决方案8】：

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

我设法在几乎没有修改的情况下预渲染 mean.js 堆栈。

【讨论】：

【解决方案9】：

这并不高效，但我一直在研究一个简单的PhantomJS server for Heorku，它将解析任何客户端 JS。我专门将它与 Angular 和 Rails 一起使用，为机器人请求提供 HTML。

【讨论】：

【解决方案10】：

我希望它仍然可以帮助 somone，但这是我创建的一个 npm 包：

https://www.npmjs.com/package/ng-node-compile

【讨论】：

你能多解释一下它是如何知道 angularjs 的管道何时停止工作的吗？