Next Image not Cached Cloudflare
Unanswered
Silver carp posted this in #help-forum
Silver carpOP
Nextjs Images are showing cf-cache-status to be dynamic means they r not getting cached by cloudflare, how can I make them cached also if they were cached how will cloudflare even know what is is the correct cached image for every type of device, will cloudflare serve wrongly optimized versions of nextjs Image to people leading to wrong sizes, what is the correct way to use next Image with image optimizations while also having cdn caching work
11 Replies
@Silver carp Nextjs Images are showing cf-cache-status to be dynamic means they r not getting cached by cloudflare, how can I make them cached also if they were cached how will cloudflare even know what is is the correct cached image for every type of device, will cloudflare serve wrongly optimized versions of nextjs Image to people leading to wrong sizes, what is the correct way to use next Image with image optimizations while also having cdn caching work
Chinese softshell turtle
you can try making a cache rule from cloudflare
starts_with(http.request.uri.path, "/_next/image")you can give this to any AI for context
hope it helps
@Chinese softshell turtle `starts_with(http.request.uri.path, "/_next/image")`
Silver carpOP
Thanks for your answer but if I let cloudflare serve the images this way will cloudflare know the device's specs and the correct Image resolution to serve? I'm just afraid it serves wrongly optimized images for different devices
Chinese softshell turtle
you can test that out yourself by purging cache and try on different screens. Its also going to be faster rather than waiting for the perfect response
@Silver carp Thanks for your answer but if I let cloudflare serve the images this way will cloudflare know the device's specs and the correct Image resolution to serve? I'm just afraid it serves wrongly optimized images for different devices
Forest yellowjacket
The CDN can't serve the wrong size because it never chooses the size, the browser does. next/image renders a srcset, and the browser picks a width from your sizes and its own DPR, then requests that exact width: /_next/image?url=…&w=640&q=75. A different device requests a different w=, so it's a different URL and a different cache entry. Cloudflare just caches whatever URL it sees.
Concrete example from one of my projects: same image, sizes set, and the desktop viewport requests w=640 while a mobile viewport with DPR 3 requests w=1920. Mobile pulls the heavier file, because the browser did the math.
So Tamer's cache rule on /_next/image is the right direction. DYNAMIC is just Cloudflare's default for a path it doesn't treat as static and the rule opts it in.
Concrete example from one of my projects: same image, sizes set, and the desktop viewport requests w=640 while a mobile viewport with DPR 3 requests w=1920. Mobile pulls the heavier file, because the browser did the math.
So Tamer's cache rule on /_next/image is the right direction. DYNAMIC is just Cloudflare's default for a path it doesn't treat as static and the rule opts it in.
@Forest yellowjacket The CDN can't serve the wrong size because it never chooses the size, the browser does. next/image renders a srcset, and the browser picks a width from your sizes and its own DPR, then requests that exact width: /_next/image?url=…&w=640&q=75. A different device requests a different w=, so it's a different URL and a different cache entry. Cloudflare just caches whatever URL it sees.
Concrete example from one of my projects: same image, sizes set, and the desktop viewport requests w=640 while a mobile viewport with DPR 3 requests w=1920. Mobile pulls the heavier file, because the browser did the math.
So Tamer's cache rule on /_next/image is the right direction. DYNAMIC is just Cloudflare's default for a path it doesn't treat as static and the rule opts it in.
Silver carpOP
Thanks for answering my question. I read that cloudflare does not regard url queries when caching unless I explicitly tell it to , how do I tell it to take the query into account when caching
I'm talking about &w=640 etc
@Silver carp Thanks for answering my question. I read that cloudflare does not regard url queries when caching unless I explicitly tell it to , how do I tell it to take the query into account when caching
Forest yellowjacket
You don't need to tell it anything, that's already the default. Cloudflare's default caching level is standard, which keys the cache on the full url including the query string, so w=640 and w=1920 are already separate cache entries:(https://developers.cloudflare.com/cache/how-to/set-caching-levels/)
What you probably read about is the "Ignore Query String" level. it exists, but it's opt-in, not the default, and it only applies to static file extensions anyway.
Same applies to the Cache Rule on /_next/image, unless someone explicitly configured a custom cache key in that rule, the default key includes the query string(https://developers.cloudflare.com/cache/how-to/cache-keys/)
What you probably read about is the "Ignore Query String" level. it exists, but it's opt-in, not the default, and it only applies to static file extensions anyway.
Same applies to the Cache Rule on /_next/image, unless someone explicitly configured a custom cache key in that rule, the default key includes the query string(https://developers.cloudflare.com/cache/how-to/cache-keys/)
Silver carpOP
Okay, thanks for the help