How do I deduplicate SSR prefetch calls?

[maggo]

I have a nextjs app with a number of pages that do server-side API calls via getStaticProps.

In there I do around 6 prefetchQuery per page running in parallel, multiplicated times 10 for different locales. This results in 60 requests happening roughly at the same time for this one page alone and I have quite a few more. Naturally this triggers API rate limits during build which is bad…

Now I've been trying to make the calls respect cache time and perform automatic deduplication like frontend would do, but haven't had any luck yet trying different staleTime, cacheTime or other settings.

Is there some magic configuration to have them deduplicate automatically? Of course I'm already using the same query client for all similar requests.

[TkDodo]

if you already use the same queryClient, you have to pass staleTime to prefetchQuery to get cached data:

await queryClient.prefetchQuery({ queryKey, queryFn, staleTime })

[maggo]

Thanks! Turns out the issue is actually that nextjs page builds are isolated from another, so there's no straight forward way to share data between them.

I haven't found the time yet to dig further into it but I have a feeling that there's no way to have the builds share the same query client

[2manoj1]

POC I did example repo

[maggo]

Thanks! Did you manage to have two pages with the same queries deduplicate / share cache?

[2manoj1]

not yet tried. Pokemon list I am loading in page.jsx and in component getting data by hooks with staleTime: 1000 * 60,.