Prerender
Reaction uses prerender to serve cached prerendered versions of your pages to web crawlers. prerender.io offers a hosted service for this which is free for up to 250 pages. Prerender is open source software, if you do not want to use the hosted version of the service, you may set up your own prerender server. Reaction does not provide any support or documentation for self-hosted prerender servers.
Usage
To enable prerender for your app set the following environment variables
PRERENDER_TOKEN: YOURTOKEN
PRERENDER_HOST: example.com
You can find your PRERENDER_TOKEN
on your prerender.io account page
Your PRERENDER_HOST
should be the domain your app is using (e.g. example.com
or www.example.com
)
Customization
Delaying capture of a page
By default prerender attempts to determine when a page is done loading by counting requests in flight.
We try our very best to detect when a page is done loading by counting the number of requests in flight and saving the page when the number of requests in flight reaches zero (after a slight delay). You can tell us when your pages are ready so that we can be more accurate.
If you need to set a page's readiness more specifically, you can use window.prerenderReady
. We've done this on the product grid already and you can use that as an example if you need to set readiness for other templates.
For the product grid, we set window.prerenderReady = false
at the top of our onCreated function and then in our autorun block, we wait until the products subscription is ready to set window.prerenderReady = true
Template.products.onCreated(function () {
// We're not ready to capture prerendered page until products have loaded
window.prerenderReady = false;
this.autorun(() => {
const productsSubscription = this.subscribe("Products", scrollLimit, queryParams);
// Once our products subscription is ready, we are ready to capture
if (productsSubscription.ready()) {
window.prerenderReady = true;
}
})
});
More details can be found in the Prerender Best Practices Documentation
Setting HTTP Status Codes
Prerender has a special meta tag that must be used to send a response other than 200
to the crawler.
For example, the meta tag to return a 404
to the crawler should look like this.
<meta name="prerender-status-code" content="404">
We use the following pattern to insert this meta tag into the notFound
template
Template.notFound.onCreated(function () {
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<meta name='prerender-status-code' content='404'>");
});
We also insert this tag with a 403
status code whenever the unauthorized
template is rendered.
More details can be found in the Prerender Best Practices Documentation