T
TanStack2y ago
rival-black

Unable to cache data with `prefetchQuery` on server + `useQuery` in client

Test-case: https://stackblitz.com/edit/stackblitz-starters-skmfha?file=app%2Fform%2Fposts.tsx Each time ./posts gets refreshed, the terminal prints "in getPosts" which is a message sent by the getPosts() function. I was under the assumption that getPosts() function will only be called again once the cached data expired, but it seems to be called every time the page gets refresh. Is this the expected behaviour or am I doing something wrong?
Laurentiu T
StackBlitz
Next.js Starter - StackBlitz
The React framework for production
3 Replies
xenial-black
xenial-black2y ago
what does "gets refreshed" refer to? If the server component runs again, the prefetch will be done again because there is no caching on the server - the caching happens on the client only
rival-black
rival-blackOP2y ago
by gets refreshed I mean when I F5 the page -- which now I assume the server component will run again (alongside the prefetch in that component) but then again, what advantages would be to run the prefetchQuery in a Server Component? not sure if you got a chance to look over the stackblitz. it's 95% the example from Advanced Server Rendering (v5) I've changed ./posts/page.tsx to do 'use client'; and I still see the console.log on each page refresh. I'm obviously doing something wrong, but not sure what.
xenial-black
xenial-black2y ago
F5ing the page will always result in a new fetch because our cache lives in memory

Did you find this page helpful?