How to optimize images in NextJS?

Viewed 28

I have implemented a menu of several tabs. When opening one of the tabs, several images are loaded from an external resource in jpg format.

If I open another tab, then other images are downloaded (this is expected). But when I go back to the previous tab, NextJS downloads the old images again.

How can I get rid of unnecessary downloads?

p.s. I want to clarify that depending on the tab, different components are drawn, removing others (perhaps this is important)

1 Answers

next js just compress your image and improve performance, you must not expect to not load the image when you will request to server again if you want to not download the image again the solution I think maybe can work: you must use your cash with react query when you want to request again when client change tab instead of axis or fetch,

react query will see if the image in the server is changed to load it again or not

Related