Integration Checklist#

1. Configure Webserver#

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

2. Verify that prerendering is actually happening#

  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><!-- prerender.cloud processed at: 2017-05-31T03:00:21.646Z --></html>
  2. don't see the prerender.cloud timestamp? Then it didn't get prerendered
    • See if an error was presented on the page (invalid URL, can't access localhost, recursive prerender etc...)
    • Check your server logs and make sure there were no errors
    • Sign in to prerender.cloud and see if it logged any errors
  3. Sign in to prerender.cloud 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 prerender.cloud

    • how do you quickly see what it looks like without prerender.cloud? Use a Chrome extension to change your user-agent to prerendercloud
    • some things weren't meant to be server-side rendered and then re-rendered on the client (Auth0.com 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 prerendered 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
Hosted on Roast.io