connect-prerenderer
Express/connect middleware to pre-render ajax page for non-ajax browsers, especially using angular.js
How to use
$ npm install connect-prerenderer
In app.js:
var express = require('express');
var prerenderer = require('connect-prerenderer');
var app = express();
app.use(prerenderer());
...
Options
- targetGenerator: a name or a function to generate a new one for HTTP request.
- "default" --- check "/PRERENDER-" prefix which will be removed, and replace "HASH-" to "#/" and all "-"s to "/"s to make a target URL. (see the source code for more options.)
- "googlebot" --- follow https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
- a function that returns a target URL for prerendering or null.
- timeout: an integer in milliseconds to specify how long it waits to prerender.
- cookieDomain: a domain name to allow passing cookies.
- attachConsole: when truthy, attach
global.consoletowindow.consolewhen prerendering files
(useful for debugging) - subprocess: if
truthy, do the rendering in a subprocess (it helps to prevent possible memory leaks in jsdom). You can also set theRENDERER_USE_SUBPROCESSenvironment variable to any value (except an empty string) to achieve the same result. Try it if you experience memory leaks.
Coding conventions (client-side)
- If an html is prerendered, the body is like:
<body data-prerendered="true"> - When JavaScript code finishes prerendering, it should call:
document.onprerendered()
Notes for AngularJS
The following snippet would help AngularJS to work:
<script>
angular.element(document).ready(function() {
if (document.body.getAttribute('data-prerendered')) {
document.addEventListener('click', function() {
document.removeEventListener('click', arguments.callee, true);
angular.bootstrap(document.documentElement, []);
return true;
}, true);
} else {
angular.bootstrap(document.documentElement, []);
}
});
</script>
To keep templates for interpolation in a prerendered html,
use the modified version of angular.js (v1.2.5)
located in test/server/public/.
Limitations
styleattributes are not preserved by jsdom (useclass).
AngularJS only limitations:
ng-repeatworkaround only works withng-repeatattributes.ng-repeat-(start, end)is not supported.