AngularJS - server-side rendering

Question

As you may know, AirBnb opensourced Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr) which should enable server-side rendering of Backbone a

Answer 1

One approach is to route the HTML requests to nodejs server running phantomjs. I used an approach based on phantomjs. Check it out if it solves

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

Answer 2

AngularJS works withing jsdom context without any tricks. Just add angular.js to js src list and main page of angular app to jsdom on its initializion.

So, rendering is very simple: just use angular in jsdom and it works. Putting it to browser is somewhat harder.

One way is batch syncing DOM changes.

To get dynamical server-to-client updates you may use MutationEvents (unfortunatly, jsdom does't support MutationObservers, but MutationEvents work pretty fast). Use them to stack up DOM changes in accumulator array and push it periodically to client browser (say, per 25 ms).

Also to enable user events, you should track them document-wise on browser and similarry accumulate and push them to server.

One implementation of such approach is jsdom-sync (https://www.npmjs.org/package/jsdom-sync)

A downside of server side rendering is absence of DOM box model size, because to get element width/height it should be actually rendered. Means this solution barely fits for svg and so on..

Also you may consider watching scope model and syncing it with browser-side scopes, but thats totally different story.

Answer 3

AngularJS 2.0 can work on a server, too. Vojta Jina talks about it on "JavaScript Jabber" show #109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (32:30 in player). There is a link to new AngularJS' dependency injection module - https://github.com/angular/di.js.

Answer 4

I know this is a bit a late answer, angular.js-server (https://github.com/a-lucas/angular.js-server) uses a modified version of angular that triggers an idle state necessary to detect when all ajax request and $compile events are processed.

I managed to pre-render the mean.js stack with almost no modification.

Answer 5

@dai-shi created connect-prerenderer, see here. Still a few issues but hopefully a good start

Answer 6

This is not performant, but I've been working on a simple PhantomJS server for Heorku that will parse any client JS. I use it specifically with Angular and Rails to serve HTML to bot requests.