Integration Checklist#

prerequisite: consider reading how it works

1. Configure Webserver#

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

2. Verify that pre-rendering is actually happening#

note: Headless-Render-API.com was previously known as Prerender.cloud (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><!-- 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 pre-render etc...)
    • Check your server logs and make sure there were no errors
    • Sign in to headless-render-api.com and see if it logged any errors
  3. Sign in to headless-render-api.com 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 headless-render-api.com

    • how do you quickly see what it looks like without headless-render-api.com? 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 headless-render-api.com
    • 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 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