Recommended patterns for pre-fetching, also for batching fetching multiple server calls?

[justingrant]

My app requires remote API calls to fetch a bunch of JPEG images from the server. These API calls are slow, so I'd like to pre-fetch the most-commonly-used images immediately after the user logs in so that they'll already be cached by the time that a user navigates to a page that might need some or all of those images. Furthermore, if the user does show up on a page and images aren't cached yet, I'd like to fetch all the uncached images needed for that page with a single server call in a batch, instead of making separate calls for each.

First, is there a recommended pattern for pre-fetching? Obviously I can build a custom cache implementation and directly shove data in there, but if the initial pre-fetch is still in progress when a user navigates to a new page, then there'd be two server calls for the exact same data, which would be bad. So I assume that prefetching should be more deeply integrated to prevent that case.

Second, is there a recommended pattern for batching? The easiest would seem to be a debounced custom fetcher, e.g. auto-batch all calls within 50ms. But that would still introduce a 50ms delay while I suspect that most render operations are faster than that. Is there a good way to know "this page is done rendering" or some other signal to know when the batch is complete and the server call should be made immediately?

BTW, the logical question here is why not just use static URLs for images and rely on HTTP caching instead of SWR. The answer is that the images are currently only available as base64 data via a JSON API; I don't have a way currently to do <img src=...> for these images. Instead, I must make an API call, retrieve the base64 data, and convert that to a data: URL.