Skip to content
  • There are no suggestions because the search field is empty.

Cloudflare Integration Guide

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:

 

 

 
Cloudflare UI change
The Workers & Pages menu is moved under Compute(Workers).

Prerender token 

The location of the Prerender token has changed. You can find it under the Security and Access menu under Prerender Token.

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.
  • Create a new worker. The worker's source code can be found here

2. Configure the worker

  • Go to the settings of the worker.
  • Add the zone and Route corresponding to the domain where you wish to integrate Prerender.
  • You can add the route as *example.com/*
  • You can get more specific with the routes.
    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/*
    • Select Failure more: Fail open(proceed)
    • Save the setting. 

    3. Add the Prerender token as an Environment Variable.

    • Under Variables and Secrets
    • Type: text
    • Variable name is PRERENDER_TOKEN
    • Add your Prerender.io Token from the Security and Access menu as the value. 

      image-1718876685490

    4. Deploy the worker.

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

     

    It only works in proxy mode.
    This integration will only work if Cloudflare is set up as your proxy.
     
    Check the DNS settings for the specified domain and ensure that the A record (or CNAME) is configured to be proxied.

    Disable Automatic Signed Exchange (SXGs) in Cloudflare

    If you keep the SXGs option enabled, Cloudflare will display the cached version of your website pages to users who click on the page link on the search engine result pages.
    However, keep in mind that Prerender is meant to create a static HTML file for search bots, so the rendered version may not be as responsive.
    To avoid this issue, we highly recommend disabling this setting in Cloudflare.

    You can turn off Automatic Signed Exchanges by going to Speed -> Optimization -> Other (tab) in Cloudflare settings.

    image-1707993684604

     

     


     

    Verify Your Installation

    After integration, it’s important to verify that everything is working as expected. We’ve provided an easy-to-follow guide to help you test your setup and confirm that Prerender is functioning properly.

     

    Is the Prerender integration working on other pages?

    Test if the Prerender integration works on the other pages based on this guide: Verify the integration

    If you don't see the Prerender headers / IDs, then the Integration is not working, which might be why the other URL is not cached. 

     

    Getting an Error?

    If you see the message "Prerender Integration Not Detected," you can refer to the troubleshooting guide here to help resolve the issue.

     

    Expert Assistance

    For those who need additional help or want to ensure a smooth and secure launch, we offer a specialized package:

    Kickstart Package

    Price: $800 (one-time payment)

    This one-time package empowers you with expert setup and configuration, ensuring a smooth and secure launch.

    Features:

    • Three setup and configuration sessions with our experts
    • Onboarding assistance
    • Security assessment

    To learn more about this package or to purchase, visit the Packages section under the Billing menu in your Prerender dashboard. 


     

    Get Support

    If you're still encountering issues after implementing Prerender:

    • Review your implementation against our documentation
    • Contact our support team:

     

    Related Articles: