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

It may be coming in AngularJS 2.0. In this video they talk about server-side rendering & why it currently isn't possible to do such a thing with AngularJS at the moment. — Jay
– Jay, Commented Apr 26, 2013 at 19:44

Jason Livesay · Accepted Answer · 2019-05-21 04:43:57Z

16

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/

edited May 21, 2019 at 4:43

Jason Livesay

6,3783 gold badges27 silver badges31 bronze badges

answered May 27, 2013 at 21:49

outluch

9018 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bokkie Over a year ago

the angular.io thing is for Angular, not AngularJs. They are two completely different languages...

Razvan Zamfir Over a year ago

Can I use Prerender in an application that uses PHP on the server-side, instead of Express? How?

A Pond · Accepted Answer · 2016-07-15 14:48:16Z

7

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.

answered Jul 15, 2016 at 14:48

A Pond

1011 silver badge3 bronze badges

Comments

setec · Accepted Answer · 2014-11-02 16:54:14Z

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.

Aleksandrenko · Accepted Answer · 2014-05-27 20:43:07Z

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 ;)

edited May 27, 2014 at 20:43

answered May 3, 2013 at 16:54

Aleksandrenko

3,0836 gold badges30 silver badges35 bronze badges

3 Comments

setec Over a year ago

In most cases server-side rendering will used for robots and some special cases, so server performance impact is neglible. Also 'rendering' on server side is just template to html processing, without actual rendering (which is most CPU hungry), which anyway occurs at client side.

jemiloii Over a year ago

usually you want to do the server side rendering on an initial load. so user x is going to a list page for the first time visiting the app. maybe they closed the browser and reopened it later. instead of loading the app, then making another http request for the data, the server can just do all of that for us in the initial launch. the other very useful reason to do this is for search engine bots. not all of them are as smart as the google bots and don't have their own javascript compilers.

Edward Newell Over a year ago

Render time does matter for google Adwords bots which use load time as a factor in landing page quality. I've found even headless browsers like PhantomJS generate significant CPU load.

bullgare · Accepted Answer · 2014-10-02 07:15:05Z

4

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.

answered Oct 2, 2014 at 7:15

bullgare

1,7731 gold badge22 silver badges33 bronze badges

Comments

Lior · Accepted Answer · 2013-05-01 18:18:46Z

2

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

answered May 1, 2013 at 18:18

Lior

40.6k12 gold badges40 silver badges40 bronze badges

1 Comment

Razvan Zamfir Over a year ago

What If I have an application that uses PHP on the server-side, instead of Express? What option do I have?

himangshuj · Accepted Answer · 2016-03-04 17:32:52Z

2

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/

answered Mar 4, 2016 at 17:32

himangshuj

7305 silver badges9 bronze badges

Comments

Ant · Accepted Answer · 2016-07-16 22:20:18Z

2

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.

answered Jul 16, 2016 at 22:20

Ant

1,8425 gold badges22 silver badges39 bronze badges

Comments

smothers · Accepted Answer · 2013-09-18 16:14:01Z

1

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.

answered Sep 18, 2013 at 16:14

smothers

4345 silver badges15 bronze badges

Comments

MoLow · Accepted Answer · 2015-06-15 20:05:05Z

-1

i Hope it could still help somone, but here is an npm package I have created:

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

answered Jun 15, 2015 at 20:05

MoLow

3,0642 gold badges23 silver badges41 bronze badges

1 Comment

hackp0int Over a year ago

Can you give more explains how does it know when the pipeline of angularjs stopped working?

Collectives™ on Stack Overflow

AngularJS - server-side rendering

10 Answers 10

2 Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related