Query cache persistence and Next.js 404 page

[nagisa-yamato]

Hi,

I want to use TanStack Query with Next.js to cache client-side API requests and utilize scroll restoration. Due to other requirements, I want to resort to client-side fetching as much as possible.

However, I noticed that the query cache resets when I hit a 404 in Next.js.

Is this a Next.js issue/limitation? Is there a way to persist the query cache in this situation?

Example

• GitHub
  • https://github.com/nagisa-yamato/test-nextjs-react-query-cache
• StackBlitz
  • https://stackblitz.com/github/nagisa-yamato/test-nextjs-react-query-cache?file=README.md

Here, you can see that scroll restoration works when you navigate with history.back() / history.forward() while the query is enabled.
When you access Non-existent page (/foo), the query cache is empty, so the query needs to reload from scratch, and you lose your scroll position.

[TkDodo]

clicking on the Non-existent Page link results in a full page reload, which of course clears the cache. I don’t know if this is standard nextJs behaviour, or if opting into a custom 404 page will make this better.

[nagisa-yamato]

Ah I see, thank you for the reply.

I'll check Next.js to see if there is a workaround for the full-page reload or if I can adjust my app's requirements to accept it.

[nagisa-yamato]

From what I found, if you call notFound() programmatically, the HTTP response would be 200, so it does not cause a full-page reload.
On the other hand, if the route does not exist in the routing, the HTTP response would be 404.

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

---

There seem to be workarounds like handling all Not Found pages with the catch-all segment, but this makes all Not Found instances into HTTP 200, which feels inconsistent with conventions.

So, the current behavior, where the query cache is persistent while programmatically calling notFound() and resets when the user hits a non-existent page, is sufficient for my use case.