Request for image between routers

[plush cave]

I have simple app
https://test-git-main-karina1703.vercel.app/
When I routing between pages, there is a request for an image, shouldn't this be cached?

My image looks like that

<Image src="/next.svg" width={100} height={100} alt="next"></Image>

[keen gazelle]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[sacred wharf]

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

[viscid merlin]

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

[hollow pasture]

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?

[plush cave]

do you also have multiple image requests between routes?

[plush cave]

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

[hollow pasture]

i am using firefox if that means anything...

ill check edge (basicly chrome)

ahh yes i do see this now

[plush cave]

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

[hollow pasture]

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

Cache-Control: no-cache

are you not using optiomised images form next/image

[plush cave]

do you know how to prevent it?

[plush cave]

yes, i do

[hollow pasture]

im assuming your using public folder to store the svg

[plush cave]

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;

[plush cave]

yep

[hollow pasture]

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

[plush cave]

thank you!

[hollow pasture]

@plush cave 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)

[plush cave]

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

[hollow pasture]

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

[hollow pasture]

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

[plush cave]

which version do you have?

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

[hollow pasture]

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

i don't see how that would change much tho

[plush cave]

hmm

[viscid merlin]

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)

[hollow pasture]

yeah i think it is working now 🙂

[plush cave]

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

[viscid merlin]

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

[plush cave]

I already tried this

images: {
minimumCacheTTL: 60,
},

And it is not work for me

[viscid merlin]

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

[hollow pasture]

yeah they now send 304 Not Modified for me (my issue was that I forgot to disable "disable cache" in chrome)

[plush cave]

you know, I forgot about it too

but I have the same problem in safari

But not in chrome 🙂

[hollow pasture]

well then its not proabibly nextjs/vercels issue but safari

[plush cave]

safari is always problematic 🙂

[plush cave]

yep, you are right, thank you too

[hollow pasture]

so i think you can mark this as solved?

[plush cave]

I think yes. I spend two days on it

ahah

[hollow pasture]

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

[keen gazelle]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1143892707396300980 message)

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1143892707396300980 message)

[plush cave]

by the way, did you use sprites in next?