This tutorial explains how to cache HTML files in cloudflare. Caching HTML file decreases page load times and saves money by reducing the number of server requests. By default, Cloudflare caches images, CSS and JS files but you have to manually set caching for HTML files if you want to.
Steps to Cache HTML in Cloudflare Pages
There are three steps to implement caching html pages in Cloudflare Pages.
- Log into your Cloudflare account.
- Under Websites section, select your website.
- Scroll down slightly and click on the Caching section in the menu on the left-hand side.
- Click on the Configuration sub-menu section.
- Scroll down slightly and you would find Browser Cache TTL and select the Respect Existing Headers option.
- Log in to your Cloudflare account.
- Under Websites section, select your website.
- Scroll down slightly and click on the Caching section in the menu on the left-hand side.
- Click on the Cache Rules sub-menu section.
- Click on the Create rule button and select Cache Everything option.
- Click on Custom Filter Expression and then set the page rule depending on the URL of your site. You can use wildcard or "contains" operator to match URL.
- Click Save and Deploy to tell cloudlare to cache specific html pages.
The final step is to configure headers in html files for caching. In the example below, the browser will always check with the server to ensure the content is up to date. And Cloudflare will serve the cached version of the content for up to 24 hours without checking the headers in your html files.
res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate');
res.setHeader('Cloudflare-CDN-Cache-Control', 'max-age=86400');
Cache-Control: Standard HTTP header to control caching behavior in browsers.
Cloudflare-CDN-Cache-Control:Controls caching behavior at the Cloudflare edge network.
If you are using framework like Astro, you can use the following commands and place them at the top of astro files.
Astro.response.headers.set('Cache-Control', 'public, max-age=0, must-revalidate'); // For browsers
Astro.response.headers.set('Cloudflare-CDN-Cache-Control', 'max-age=86400'); // For Cloudflare CDN (1 day)
Open your website in a browser and inspect the response headers by right-clicking on the page and select Inspect.
Go to the Network tab and refresh the page and then check the CF-Cache-Status and Cache-Control values. If Cloudflare has cached the content, you will see headers like CF-Cache-Status: HIT.
Deepanshu founded ListenData with a simple objective - Make analytics easy to understand and follow. He has over 10 years of experience in data science. During his tenure, he worked with global clients in various domains like Banking, Insurance, Private Equity, Telecom and HR.
Share Share Tweet