AngularJS - server-side rendering

As you may know, AirBnb opensourced Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr) which should enable server-side rendering of Backbone apps. This is cool, because one can run the first "iteration" of template rendering on the server and the client gets fully rendered HTML document plus the whole JS app. It greatly reduces time-to-display and can get us rid of other server-side templating systems.

So, have someone managed to render AngularJS with jsdom or ZombieJS? These dom/browser emulations on Node.js should in theory be enough for simple server-side Angular templating, but results I found googling it were not very conclusive.

Solution 1:

Here is another solution: https://github.com/ithkuil/angular-on-server

wiki for details

Update from author of that repo: that was about 6 years ago (at the time of this edit). At this point, people should probably be using https://angular.io/guide/universal or just https://prerender.io/

Solution 2:

This new package https://github.com/a-lucas/angular.js-server allows you to pre-render an Angular application and send HTML to the client, that will then execute the jS code.

It supports caching per url and you can define rules to activate URL pre-rendering.

PS: I am the main contributor for this package.

Solution 3:

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.

Solution 4:

I'm searching for a solution too. But it's not an option to use browser to render the html on the server and send it to the frontend. Airbnb try it first but rejected because is slow and resource hungry. It's not a production solution.

Update: This soon can be possible with the introduction of Object.observe ;)

Solution 5:

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.