from the screenshot we cannot tell, network debug tool may show a request even when it hits the cache

It seems like it is cached by vercel cdn but not cached by the browser

i can't reproduce this with that link, it fetches it once and then no more even when clicking "dish123" and "home"

are you using dev mode to get that screenshot?

do you also have multiple image requests between routes?

Stange thing. This screenshot from prod
https://test-git-main-karina1703.vercel.app/

i am using firefox if that means anything...

ill check edge (basicly chrome)

ahh yes i do see this now

In safari I have the same situation. But after all on a default so should not occur?

some reason it has the no cache headers on the result:

Cache-Control: no-cache

are you not using optiomised images form next/image

do you know how to prevent it?

yes, i do

im assuming your using public folder to store the svg

import Image from "next/image";
import Link from "next/link";
import React from "react";

const page = () => {
return (
<div>
<Link href="dish/123">Dish 123</Link>
<Image src="/next.svg" width={100} height={100} alt="next"></Image>
</div>
);
};

export default page;

yep

well, this seems like vercel isn't caching it, so i don't know of anything that can help you, sorry

thank you!

@Orinoco Crocodile actually, https://github.com/vercel/next.js/discussions/16118 suggests that you can override those headers and set them to cache

but thats old so idk (i haven't tested it)

so you might be able to
https://nextjs.org/docs/pages/api-reference/next-config-js/headers#header-cookie-and-query-matching
use the headers thing and make that image cached (but i don't know how well it works for files also)

I am already tried to set request headers, but it is not work for me. But I will try again. Thank you very much! I use app folder, maybe it is bug

yeah i didn't expect it to work, but heppy to try and help 🙂

@Orinoco Crocodile whatever your update was (it looks diferent now), my chrome isn't requesting it after page change (just the inital time)

which version do you have?

I have new Version 116.0.5845.96 (Official Build) (arm64)

uhh Microsoft Edge: Version 116.0.1938.54 (Official build) beta (64-bit)

i don't see how that would change much tho

hmm

The vercel behavior is correct : https://vercel.com/docs/edge-network/caching#static-files-caching
- default cache control : public, max-age=0, must-revalidate
- cache at the edge by vercel like in my screenshot (x-vercel-cache: HIT)

yeah i think it is working now 🙂

but this is not the best user experience - every time we request an image

You can change the vercel behavior here (I assume) : https://nextjs.org/docs/app/api-reference/components/image#caching-behavior

I already tried this

images: {
minimumCacheTTL: 60,
},

And it is not work for me

The CDN should be pretty close to the user, it will respond pretty fast. You can check it works with : x-vercel-id. For me, it's cdg1 zone. I'm always < 20ms on my tests with your deployment

I find it pretty nice from an app standing point. Your image responds in less than 20-50ms most of the time and you can control caching behavior from the CDN easily

you know, I forgot about it too

but I have the same problem in safari

But not in chrome 🙂

well then its not proabibly nextjs/vercels issue but safari

safari is always problematic 🙂

yep, you are right, thank you too

so i think you can mark this as solved?

I think yes. I spend two days on it

ahah

just folow this guide and choose any message that is the "answer"...

by the way, did you use sprites in next?

svg sprites