NextJS - Maintain cache while navigating between different pages

[george-roussos]

Hi, this is my first time using react-query on a NextJS project.

Using it in a single page React app has been no problems re: the shared cache. Like, you go in one page, navigate to another, go back to the first page, data is cached, served, done.

I am realising just now that with NextJS that is not really the case, since the docs advise on every page having its own queryClient instance. This is good and motivated in the docs, however, I was hoping to benefit from the cache while the user is navigating between different pages. Is there a way to do this? I am guessing with a shared, exported queryClient instance this might be possible - but what are the caveats and what is the correct way to do so accounting for hydration (right now I have the hydration boundary wrapping everything in my _app.tsx (using pages/ structure). I don't believe my pages expose any sensitive data (I get my data from a contentful instance and no authentication or similar is involved).

By the way, thanks for this tool, what a thing...

[TkDodo]

I am realising just now that with NextJS that is not really the case, since the docs advise on every page having its own queryClient instance.

That's not true. You should have one QueryClient per browser session - either by sharing it over the window or by instantiating it in React State inside the Providers component, where you'll only have one per application.

[TkDodo]

Does that then mean that when querying in components, the client query is used?

yes

Which means that data between page changes is cached

yes

The newly created cache on the server is empty, but we only need to send data to the client. There, the HydrationBoundary takes the data from the server and puts it into the client cache

[george-roussos]

Aha ok, then I think my implementation might be wrong when using <Link/>. Thank you for clarifying 🙏

[shamun-khatri]

@george-roussos @TkDodo I have implemented the react query in my next js 15 app router and seems like the data is not cached between routes like if I go to specific route and it fetches and cheche the data but when I go to another page and then comeback it fetches again how do I fix this?
I have properly set staleTime

[george-roussos]

@george-roussos @TkDodo I have implemented the react query in my next js 15 app router and seems like the data is not cached between routes like if I go to specific route and it fetches and cheche the data but when I go to another page and then comeback it fetches again how do I fix this? I have properly set staleTime

Hi!
I can think of two possible scenarios, either you are using a custom server.js which causes this behaviour, or route staleTimes is too short and clashes with query's staleTime

[TkDodo]

but when I go to another page and then comeback it fetches again how do I fix this?

are you talking about fetching on the server or on the client ?