Integration Checklist#

prerequisite: consider reading how it works

1. Configure Webserver#

  1. Sign in or Sign up for to get your API token
  2. Configure your webserver (Node, Apache, nginx, etc...) with one of our libraries
  3. Add your API token to the configuration
  4. Restart your server

2. Verify that pre-rendering is actually happening#

note: was previously known as (rebranded 2022-05-01)

  1. Visit your page with curl (or view source in your browser), and look for a timestamp at the bottom of the page, it looks something like: </body><!-- processed at: 2017-05-31T03:00:21.646Z --></html>
  2. don't see the timestamp? Then it didn't get prerendered
    • See if an error was presented on the page (invalid URL, can't access localhost, recursive pre-render etc...)
    • Check your server logs and make sure there were no errors
    • Sign in to and see if it logged any errors
  3. Sign in to and verify existence of logs and no errors

3. Check JavaScript console for new/unusual errors#

  1. Using the Chrome browser, open the Developer Tools (view -> Developer -> JavaScript Console)
  2. Refresh the page
  3. Compare any errors and output with the errors/output you get without

    • how do you quickly see what it looks like without Search google for a chrome extension that changes the user-agent, or use chrome dev tools (no extension necessary) and then change the user-agent to "prerendercloud" (one word, without quotes) - note: prerendercloud was the previous name of
    • some things weren't meant to be server-side rendered and then re-rendered on the client ( for example, or anything that does document.appendChild), for these scenarios, just wrap that code and create a fake/stub if necessary:

       var FakeAuth0 = function () {
         return {
           show: () => {},
           on: () => {}
       var auth0;
       if (window.prerenderCloudIsServerSideRendering) {
         auth0 = new FakeAuth0();
       } else {
         auth0 = new Auth0Lock(clientId, domain, options);

4. Test the transition from the server-side pre-rendered DOM to the client-side#

  1. Using the Chrome browser, open the Developer Tools (view -> Developer -> Developer Tools)
  2. Click the Performance tab and make sure the Screenshots checkbox is checked
  3. Click the reload/refresh button in your browser
  4. Hover your mouse over the timeline so you see a small popup with a screenshot of the screen at that point in time
  5. Look for a "flash" where the screen is white/blank between when the server content is rendered and the client takes over (the flash is not good, if you see it, there's more work to be done)
    • If no screen flash, everything is working (most React apps should work without modification)

5. Seeing a screen flash/blink during server -> client transition?#

  1. Verify that state is preserved
  2. Using React v14 or v15? Make sure checksums are working
  3. Still having problems? Use preboot