Preserving cache across page switches - Next.js - SSR

[ghost]

Hello!

So I had a look at #4920. This question is similar, but the comment marked as answer did not clarify things for me.

Let's say I have an app with SSR - Next.js in my case - with three pages A, B and C. Said app also has two concurrent users: Alice and Bob. Now I would like for both of them to be able to navigate freely through the different pages without resetting their local cache on every page switch. The only way I see how to do that is by defining a query client outside of my page render method like so:

const queryClient = new QueryClient()

function MyApp({ Component, pageProps }: AppProps) {
//stuff
  return (
      <QueryClientProvider client={queryClient}>
         //children
      </QueryClientProvider>
  )
}

The docs clearly state that the query client should be defined inside of the main function to avoid sharing data across users. What I fail to understand is how such a leak would be possible. Say Alice uses the app and has a bunch of stuff in her cache. When Bob then uses the app at the same time there should be no way for the queryClient object his server responses will produce to contain information about Alice's activities. For that to be the case there would need to be some kind of sync between the client side cache, which to my understanding is stored in-memory on Alice's machine, and the queryClient object that exists on the server.

What I do understand could be an issue is if the same queryClient is used in a request made server side. Say page C has a getServerSideProps using the same queryClient object and Alice visits this page. Now, the next time bob refreshes his app, the queryClient should contain data about requests Alice made. This should however be avoidable by using different queryClients for server side requests and the one you pass to the client.

So my questions are as follows:

• Are any of my aforementioned assumptions wrong?
• Are the docs phrased this way as a failsafe?
• Is there any other way than the one outlined to preserve cache across page switches in Next.js?

Any feedback is greatly appreciated!:)

[louis-young]

Hi 👋

Instantiating the query client once in the top-level component and ensuring it isn't recreated across renders by using state or a ref should behave the way you've described. It shouldn't destroy the cache when changing pages, assuming they're not hard page requests, and that you're caching queries.

Instantiating the query client in module scope is problematic when server rendering for the reason you described. Modules are evaluated once and the query client instance could be shared across pre-renders for different users which is something you probably always want to avoid. I think what you say about this not being an issue if requests are only made on the client is true but I'd still opt for the idiomatic/safer option as per the documentation.

I think the concurrent user concern is interesting here, and the fact you're using Next.js and making all of the requests on the client. I'm not a Next.js expert but If you could provide a minimal reproduction of the issue, that'd be really helpful.

Thanks and hopefully this helps 🙂