Integration Checklist#

prerequisite: consider reading how it works

1. Configure Webserver#

Sign in or Sign up for headless-render-api.com to get your API token
Configure your webserver (Node, Apache, nginx, etc...) with one of our libraries
Add your headless-render-api.com API token to the configuration
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)

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></html>
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. Check JavaScript console for new/unusual errors#

Using the Chrome browser, open the Developer Tools (view -> Developer -> JavaScript Console)
Refresh the page
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#

Using the Chrome browser, open the Developer Tools (view -> Developer -> Developer Tools)
Click the Performance tab and make sure the Screenshots checkbox is checked
Click the reload/refresh button in your browser
Hover your mouse over the timeline so you see a small popup with a screenshot of the screen at that point in time
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?#

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

6. Firewall rules#

Most of the time, no firewall rules are needed because headless-render-api hits your public endpoint like all other traffic.

But if you're behind a service like Cloudflare, you may have Cloudflare's WAF (web application firewall) enabled which may be returning 403 forbidden to headless-render-api.

Try creating an exception for headless-render-api's user-agent:

in Cloudflare sidebar click "Security"
click "WAF"
Create rule
Edit the form until expression preview reads: (http.user_agent contains "prerendercloud")
Take action: "skip"
start by checking the box "all rate limit rules" and "super bot fight mode rules"