Unable to read cached data in getInitialProps

[gammatitan]

Hello 👋

I'm using Next.js and want to read cached data inside getInitialProps during a client-side route change.

However, despite fetching the data prior to the route change, the data does not exist in the cache. Here's a simple example...

Data is fetched via useQuery with a stale and cache time of Infinity:

const Homepage = () => {
  useQuery('get-books', () => getBooks(), {
    staleTime: Infinity,
    cacheTime: Infinity,
  });

  return <Link to="/about">Next page</Link>;
};

When the user redirects to the next page, the cached data is not found and a fresh api call is made.

const AboutPage = () => {
  return ...
};

AboutPage.getInitialProps = () => {
  const queryClient = new QueryClient();

  // this does a fresh api call instead of reading the cached data
  const data = await queryClient.fetchQuery('get-books', () => getBooks(), { 
    staleTime: Infinity,
    cacheTime: Infinity,
  };
};

Oddly, I'm able to read the existing data just fine via useQuery inside AboutPage, but just not inside getInitialProps.

I couldn't find a discussion on this or an explanation in the SSR section of the docs as to why this is happening. Is it something to do with new QueryClient()?

Any help would be much appreciated, thanks 🙏

[TkDodo]

I think when you do frontend routing with next, it will still call functions like getInitialProps or getServerSideProps. The functions are usually self-contained, meaning the new QueryClient is created inside of it. That also means that the client is always empty, so the fetch from prefetch will always happen.

Some ways around this that I know of:

• set a cache-control: max-age on the response with the time of caching that you want. That way, the request will be made, but it will not hit your server, but come from the browser cache instead. As an advantage, those fetches will also succeed while you're offline.
• instruct next to not make the query if the request comes from a client transition. There is an open discussion about this:
  • Add option to disable getServerSideProps on client-side navigation vercel/next.js#19611
    shallow routing doesn't really solve it, so it seems you have to make the request and then check if it comes from SSR or not. This comment has the best workaround I guess ?
• use incremental static site regeneration. It basically makes your page static, but it revalidates after a certain time if a request comes in.

[yonatanhakatan]

So is there no way to share the QueryClient between pages in getInitialProps/getServerSideProps on the server-side? In the docs it says Create a new QueryClient instance for each page request. This ensures that data is not shared between users and requests. which makes sense but im wondering whether a QueryClient could be maintained for each session/user somehow?

[TkDodo]

I think you can use a server-side cache like redis to do this. There is a related discussion here:

• Custom CacheProvider for queryClient in Server-Side environment (Next.js) #3563