How it Works#

TL;DR: someone or something visits your site, but instead of receiving your original index.html, they receive the server-side rendered version of your JavaScript app, which includes all the HTML, plus original JavaScript.

Prerender.cloud uses a headless Chrome browser to "prerender" or "server-side render" a JavaScript app.

"Prerender" just means, load a page in a browser and "view source". It's a general purpose solution for server-side rendering JavaScript apps. So the following terms are mostly synonymous:

  • server-side rendering (most common)
  • isomorphic
  • prerendering
  • universal

Here's a flow of what it looks like when fully configured:

  1. random human or bot visits your JavaScript website
    1. your webserver forwards the request to prerender.cloud (this usually takes approximately ~1.5 seconds, so caching is important)
    2. prerender.cloud receives the request and makes a new request back your webserver
      1. your webserver receives another request but since the user agent matches /prerendercloud/ it serves it instead of forwarding to prerender.cloud
    3. prerender.cloud receives the response from your server
    4. prerender.cloud waits for all in-flight XHR/AJAX/WebSockets to finish
    5. prerender.cloud waits for DOM to finish rendering
    6. prerender.cloud serializes the DOM (think, view-source)
    7. if using React v14 or v15, prerender.cloud computes a checksum for the DOM
  2. your webserver receives the new serialized DOM response from prerender.cloud and serves that instead of your original index.html
  3. the browser now renders the server-side generated HTML within a few hundred milliseconds (as opposed to several seconds)
  4. the JavaScript app, meanwhile, is starting/booting and when it's finished, it replaces the server-side rendered DOM with the client-driven DOM - this is the server client transition
Hosted on Roast.io