Caching +page.svelte on Cloudflare

[hjaber]

Hello!

How can I cache pages on Sveltekit when using Cloudflare pages?

I assumed static pages or pre-rendered pages would automatically be cached with Cloudflare but I am seeing Cf-Cache-Status: Dynamic and am hoping ton see Cf-Cache-Status: HIT.

I have seen some suggestions to create a Cloudflare cache rule that targets load functions by looking for “__data.json” but I was hoping to cache the actual +page.svelte (html) and not the load function.

I’m not currently setting any cookies but I've seen issues when setting cookies with Cloudflare's cache, is it possible to set a cookie and still get cached pages?

Live example: https://demo.tripcafe.org/
repo: https://github.com/hjaber/sveltekit-cf-cache

[eltigerchino]

The Cloudflare CDN does not cache HTML by default.
https://developers.cloudflare.com/cache/concepts/default-cache-behavior/#default-cached-file-extensions

You have a few different options to customise Cloudflare to cache your HTML files.
https://developers.cloudflare.com/cache/concepts/default-cache-behavior/#customization-options-and-limits

[hjaber]

Thank you, you solved my issue. It makes sense that it doesn't cache HTML by default but I assumed it did.

I was able to cache the html at https://demo.tripcafe.org/prerender with either a cloudflare page rule or a cloudflare cache rule and am now getting a Cf-Cache-Status: HIT with 30-90ms load times.

Interestingly, page rule seems more powerful than a cache rule as it also caches _data.json?x-sveltekit-invalidated=01 while the cache rule does not. So when sveltekit switches to client side routing, hovering over a /prerender link will reveal a cached route on cloudflare edge.