What are the steps to integrate Prerender with Cloudflare?

If you want to integrate Prerender into your site, the best approach is to incorporate it into your CDN if one is available. This integration specifically uses the ESM JavaScript syntax in Cloudflare Workers.

Video guide:

 

 

Copy the Cloudflare worker's source code from this link from here.

It might take a couple of minutes for the integration to start working after the final deployment.

Step-by-step guide

1. Create a new worker

Open your Cloudflare Dashboard and click on Compute(Workers) and select  Workers & Pages on the left side

Then click on Create on the Worker Overview page.

Then click on the "Create Worker" button.

Give your worker a descriptive name. e.g.: prerender-worker

Click on the Deploy button at the bottom right to initialize the worker.  

2. Add the Prerender worker's code

Click on "Edit Code"

Replace the example code with the worker's source code
Copy the Cloudflare worker's source code from this link.

Save the changes by clicking on Deploy.

3. Configure the worker

Step back to the previous interface by clicking on your worker's name on the top left. 

Go to Settings and add the zone and routes for your site. 

Click on +Add at Domains & Routes
Select route

Add a Route pattern that matches your site and select the Zone where your site is located.

Examples of the Route setting: 

Website Address Type	Route Pattern
example.com	example.com/*
www.example.com	www.example.com/*
Both with/without www	*example.com/*
Any subdomain	*.example.com/*
Specific subdomain	blog.example.com/*
Multiple subdomains	(sub1|sub2).example.com/*

 

You can add a route specific to your subdomain. If you want to test Prerender on just one of your domains or subdomains, you can add another route to the worker later.

Select Failure more:
Click on Add Route to save the setting.

4. Add the Prerender token as an Environment Variable.

Next to Variables and Secrets, click on +Add

Copy your Prerender token from your dashboard

Add your Prerender.io Token from the Security and Access menu.

Add a text variable named "PRERENDER_TOKEN" and set its value to the token from your dashboard. Then, click Deploy.

It might take a couple of minutes for the integration to start working after the final deployment.