繁体 English 中英

AngularJS - 服务器端渲染

[英]AngularJS - server-side rendering

原文 2013-04-26 09:07:26 6 10 node.js/ angularjs/ templates/ server-side-rendering/ zombie.js

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

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

10 个解决方案

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

维基了解详情

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

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

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

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

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 等等..

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

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

更新：随着 Object.observe 的引入，这很快就可以实现；)

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 。