-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SSR: queries are cached on server #70
Comments
So it sounds to me like you are asking for a way to disable caching when react-query is used on the server, is that right? Outside of that, React Query is doing what it was designed to do, albeit, in the client. So let me ask, are there situations where you would want to use the cached value from |
Not sure about that. I think caching on server isn't an issue as long as that cache is not shared between page requests. But what wonders me the most is that I briefly looked through |
Hmmm. One guess is that in SWR, initialData may somehow be overriding the cached data. IMO, it shouldn't. The other idea is that maybe Regardless of what SWR does, we can figure out a way to fix this. Some of my thoughts keep going back to the idea that this use case is a bit contrived. I would really like to know how you're approaching this in a real example to better know what course of action to take. |
Huh, looked at In In So the fix would be to not store I will willingly work on PR, but source code in the repo is outdated (I've checked |
Yes, I intentionally made that example to be as simple as possible. I'm mostly worried about security in this case. I think the real-life use case would be SSRing user data:
|
Yes, that's exactly what I've discovered.
Can you elaborate on this? |
Yes, security should come first. Sharing cache data between users is a top concern for apps, but not technically something React-Query can control. Something I'm asking myself is this, if you weren't doing server-side rendering, and just requesting I bring this up because for our discussions sake, you could technically add a To clarify on your other findings, I believe that allowing So after talking this through I think the best course of action is that if you want to cache data in the server context, you should either (1) try to use a query id or variable that will allow multi-users to exist in the cache at the same time (2) clear the cache when user context changes More about (2) from above, the more I talk through it in my head, the more I don't feel like caching query results in the server is a good idea at all. It makes me think that there should simply be a way to opt out of using the cache at all, or simply force react-query to not cache on the server. I feel like it will only lead to major headaches and like you have illustrated here, security problems. Thoughts? |
Yes, this is valid point - user data are protected on the backend side.
I don't think it's obvious for developers. If user id isn't required by API endpoint (it's a common case from my experience), I don't think anyone would bother to provide one as query variable.
I agree, that prefilling cache with
Yes, I agree. Caching query result on server doesn't make any sense to me now. |
I think a good question here is "should we disable caching by defualt in server-side scenarios?" I think the answer is yes. I feel like the only feature people should be using during SSR is |
Yes, I agree. BTW, looks like using |
😂 Yeah, I don't think React Query has that issue. Once initialData is ingested into the query, the |
Version 0.3.22 is now available with caching disabled when typeof window === 'undefined'. |
@tannerlinsley Cool, thanks a lot! |
@tannerlinsley works like a charm, thanks again! |
I've started to use
react-query
with next.js SSR usinginitialData
option.It works pretty good, but looks like
queries
are cached in server js bundle and are used across all requests.Here's a minimal example reproducing the issue: https://codesandbox.io/s/react-query-ssr-cache-rkfsh
And a GIF which demonstrates the issue:
Note, that user index is incremented every time, but server always renders
1
.Here's what happens:
index
is 1, there's noqueries
stored yetdata
query is created andinitialData
is setinitialData
is passed touseQuery
, but there already is adata
query, so cached data is user on server renderqueries
in client bundle, newinitialData
is usedI've also checked if
swr
suffer from the same issue, but it works just fine - see https://codesandbox.io/s/swr-ssr-cache-qrmgnDo you have any idea how it can be handled on
react-query
side?As a workaround, I'm calling
clearCachedQueries
in_document.getInitialProps
, which clears cached queries on server on every requestThe text was updated successfully, but these errors were encountered: