AngularJS-服务器端渲染

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

那 有人设法用 jsdom 或 ZombieJS 渲染 AngularJS呢？从理论上讲，Node.js 上的 dom/浏览器模拟对于简单的服务器端角度模板应该足够了，但是我发现在谷歌上搜索的结果并不是非常确定。

61869 次浏览
小开

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

小开

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

更新: 通过引入 Object.Observer，很快就可以做到这一点;)

小开

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

详情请参阅维基百科

该回购的作者更新: 那是大约6年前(在本次编辑时)。在这一点上，人们可能应该使用 https://angular.io/guide/universal或者仅仅使用 < a href = “ https://prerender.io/”rel = “ nofollow norefrer”> https://prerender.io/

小开

这不是高性能的，但是我一直在开发一个简单的 Heorku 的 PhantomJS 服务器，它可以解析任何客户机 JS。我专门用它与 Angular 和 Rails 一起服务 HTML 到 bot 请求。

小开

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。

小开

AngularJS 在 jsdom 上下文中工作，没有任何技巧。只需在 jssrc 列表中添加 angular.js，在 jsdom 初始化的时候将 angle app 的主页添加到 jsdom。

因此，渲染非常简单: 只要在 jsdom 中使用 angle 就可以了。

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

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

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

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

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

你也可以考虑观察作用域模型并将其与浏览器端作用域同步，但这完全是两码事。

小开

我希望它仍然可以帮助某些人，但这里是我创建的一个 npm 包:

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

小开

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

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

小开

这个新的包 https://github.com/a-lucas/angular.js-server允许您预先呈现一个 Angular 应用程序并向客户机发送 HTML，然后执行 jS 代码。

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

PS: 我是这个软件包的主要贡献者。

小开

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

我设法在几乎没有任何修改的情况下预呈现 means. js 堆栈。


提交答案