In a server component and using the fetch() API, is there an elegant way to check if the fetched resource is already cached on the nextJS server and to not fetch it from the remote server if it isn't? (remote server= not nextJS but a 3rd party server )
For example: In an image gallery's page.tsx is a very expensive fetch() call to get data of all images and part of it could be reused within the page.tsx of a image detail route. But if it's not already cached it would be smarter to use a lighter fetch() call that only asks for the image at hand and not the whole gallery.
It's easy to do with react-query and client components or with just passing the data when navigating between routes. Both is not possible with nextjs server components. I also could use a state management solution like redux or session storage, but both seem not be the right tool for the job, I would have to keep them in sync with the caching behavior of nextJS. I also know about the cache-control only-if-cached but I don't think nextjs respects it and it could respond with stale cache content in some cases which is not desirable.
