Contents x
    How to Integrate Prerender with Cloudflare for ESM Syntax
    • 24 Jan 2025
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Contents

    How to Integrate Prerender with Cloudflare for ESM Syntax

    • Updated on 24 Jan 2025
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Article summary

    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. Follow the guide below for step-by-step instructions on how to integrate Prerender with Cloudflare

    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

    Then click on Create on the Worker Overview page.

    Then click on the "Create Worker" button.

    Click on Create Worker

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

    Give your worker a name.

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

    Click on the Deploy button at the bottom right.

    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. 

    Step back to the previous interface by clicking on the name of your worker 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 TypeRoute Pattern
    example.comexample.com/*
    www.example.comwww.example.com/*
    Both with/without www*example.com/*
    Any subdomain*.example.com/*
    Specific subdomainblog.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.

    Click on Add route

    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.


    It only works in proxy mode.
    This integration will only work if Cloudflare is set up as your proxy.
    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.



    Was this article helpful?
    What's Next