Prerender.cloud logo

Prerender.cloud

Server-side rendering (SSR) for JavaScript apps

Server-Side Rendering Quick Start
URL to JPG/PDF (screenshots) Quick Start

2.5x faster renders

Before

single page app rendering duration before prerender.cloud

After

single page app rendering duration after prerender.cloud

Open graph (Slack, FB, Twitter etc..) previews/unfurls

Before

slack open graph preview before prerender.cloud

After

slack open graph preview after prerender.cloud

Better search engine results

Before

search results before prerender.cloud

After

search results after prerender.cloud

We made Prerender.cloud for easy server-side rendering because speed matters

a React app on a fast network can download in as little as 100ms, but then take another 600ms to render... unless it's server-side rendered (then <= 250ms)

Our experiments demonstrate that slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user

 

Google saw a 20% drop in revenue from an accidentally introduced 500ms delay.

When you load a server-side rendered JavaScript app, you see the content immediately, before the JavaScript is even downloaded - it's what makes pages feel as if they are instantly loading.

Using XHR/AJAX? We automatically cache and preload AJAX calls so the "initial state" just works. If you have a more complicated setup, you can preload your state by saving to a special variable we serialize into the DOM called window.__PRELOADED_STATE__

Using React? We include your server-side rendered checksums for best possible client render performance. (version 0.14 and above)

What is it?

Prerender.cloud is a Chrome based server-side rendering API for JavaScript apps (React, Angular, Ember, Preact, Vue, etc.). It aims to address 3 weaknesses of the now ever-popular single-page JavaScript app revolution:

  1. improved rendering performance (up to 2.5x speed boost)
  2. fixed link previews (open graph and meta tags)
  3. and improved SEO (especially for pages/apps that make XHR/Websocket requests)

Addressing these 3 weaknesses of JavaScript apps without Prerender.cloud means manual implementation of custom, server-side rendering solutions. Prender.cloud is a generalized solution that "just works" for all JavaScript apps and various hosting technologies (Node.js, Nginx, Apache, Golang, etc.) and strategies (proxy all requests, or just bots, or use local cache or some combination of the above).

We've tested hundreds of apps and addressed many requirements:

  • infrastrucure
    • uptime, scalability, burst/batch API requests
    • low latency from geographically distributed, high power AWS machines
      • let us know if you need a specific geographic region
    • API calls up to 3x faster than competing services using PhantomJS
    • up to 10x cheaper than competing services
  • features
    • es2017 compatible from the latest Chrome build
    • caching your app's state during the server-side render and serializing it into the HTML payload
    • intelligently waiting for all XHR and Websockets to finish
    • protection for pages that never stop making XHR/Websockets requests (ad networks)
    • special integration for React: react-data-checksums included (version 0.13 and above)
    • special support for Webpack code splitting

Test prerender.cloud in seconds with our server and let us know if you need a particular feature or guidance.

How do you use it?

It's easy, just add middleware or a snippet to your web server that forwards requests to service.prerender.cloud

We've already written and tested integrations with Node.js, nginx, CloudFront via Lambda@Edge, Apache, Golang, Ruby, IIS and can quickly add more. Just email us: support@prerender.cloud

You can also use it for crawling/scraping JavaScript apps

Try It In Your Browser

Your url:
click to open the server-side rendered version of http://reactjs-hello-world.netlify.com
(why append ?text) TL;DR: it's for demoing the product.
This ?text query parameter tells service.prerender.cloud to change the Content-Type to text/plain which allows you to see the actual generated HTML. If you remove that query parameter, HTML will be returned in the browser, which means the browser will try to load relative paths against service.prerender.cloud, which won't work. This is only relevant when demoing the product. In production, your server will use middleware to access service.prerender.cloud and relative paths will be accessed against to your domain.

Or Try It On Your Laptop

This is a static, pushstate, Node.js server with the official Prerender.cloud middleware already configured. If you have a built/compiled/transpiled directory with your index.html and JavaScript files, this should "just work".

npm install -g prerendercloud-server
prerendercloud-server --help
prerendercloud-server ~/path/to/my-javascript-single-page-app

Alternative Services

As of June 2017 there are no other services that operate as a generalized server-side rendering solution - instead, these other services strip JavaScript before returning the payload to client. They have similar APIs but were designed for an earlier era.

Prerender.cloud is a superset of these services - it achieves the same objectives (SEO, link previews for bots) but yields one more: initial render performance (by leaving the JavaScript in).

  • Prerender.io
    • is really expensive: $3,600 per 1,000,000 requests (10x more expensive than us)
    • Prerender.io and Prerender.cloud have same exact API (for compatability)
    • uses PhantomJS (we use Chrome)
  • Brombone
    • is expensive: $2,600 per 1,000,000 requests (7x more expensive than us)
    • uses PhantomJS (we use Chrome)
  • SEO.js
    • is expensive: $690 per 1,000,000 requests (2x more expensive than us)
    • uses PhantomJS (we use Chrome)
  • SEO4Ajax
    • has analytics (we do not)
    • has a crawler (you can host with Roast.io to achieve this)
    • is similarly priced
    • also uses Chrome
Hosted on Roast.io