NextJS: Prefetching/Hydration overwriting fresher cache data when using streaming SSR with staleTime
Hey folks,
tought i might also ask here on discord, here is the original discussion link:
https://github.com/TanStack/query/discussions/9559
I’ve run into something odd and couldn’t find an existing discussion about it (maybe it’s a bug, maybe I’m missing something
).
Setup:
- Next.js 15+
- TanStack Query 5+
- Prefetching + streaming hydration as described here
- staleTime on the server side = 5 seconds (but issue happens with longer/shorter times too)
Scenario:
1. On the server, I prefetch /users with a staleTime of 5s.
2. On the client, I load the same query via useQuery and render a table of users.
Now, within that staleTime window the following needs to happen to experience my issue:
3. A user deletes a row → I send the request, optimistically update the UI with useMutation.
TanStack Query Devtools show the cache updated correctly, with “Last updated” set to now.
4. The user refreshes the page → since we’re still inside staleTime, the server doesn’t refetch, but hydrates old data from the initial prefetch, overwriting the newer client cache.
Devtools now show the “Last updated” time as the timestamp from the original page load.
Result: the deleted row reappears, even though it’s actually gone on the server.
What I’d expect:
When hydrating, the server-side data should be skipped if the client already has newer/fresher data in the cache.
Question:
Is this expected behavior? Am I missing a setting here? Or could this be a Next.js SSR quirk?
tought i might also ask here on discord, here is the original discussion link:
https://github.com/TanStack/query/discussions/9559
I’ve run into something odd and couldn’t find an existing discussion about it (maybe it’s a bug, maybe I’m missing something
).Setup:
- Next.js 15+
- TanStack Query 5+
- Prefetching + streaming hydration as described here
- staleTime on the server side = 5 seconds (but issue happens with longer/shorter times too)
Scenario:
1. On the server, I prefetch /users with a staleTime of 5s.
2. On the client, I load the same query via useQuery and render a table of users.
Now, within that staleTime window the following needs to happen to experience my issue:
3. A user deletes a row → I send the request, optimistically update the UI with useMutation.
TanStack Query Devtools show the cache updated correctly, with “Last updated” set to now.
4. The user refreshes the page → since we’re still inside staleTime, the server doesn’t refetch, but hydrates old data from the initial prefetch, overwriting the newer client cache.
Devtools now show the “Last updated” time as the timestamp from the original page load.
Result: the deleted row reappears, even though it’s actually gone on the server.
What I’d expect:
When hydrating, the server-side data should be skipped if the client already has newer/fresher data in the cache.
Question:
Is this expected behavior? Am I missing a setting here? Or could this be a Next.js SSR quirk?
GitHub
Hey folks, I’ve run into something odd and couldn’t find an existing discussion about it (maybe it’s a bug, maybe I’m missing something ). Setup: Next.js 15+ TanStack Query 5+ Prefetching + stream...
). Setup: Next.js 15+ TanStack Query 5+ Prefetching + stream...
