initialData vs hydrate/rehydrate
I am having a hard time understanding the difference between the two.
Any example I come up with works with both.
Here is my general understanding of react-query:
It is used to cache data and make sure that updates are reflected on the frontend respectively.
Meaning If I have Page A & B where i display some data, and that data can be changed on Page C,
I use useQuery with a queryKey and on Page C on POST/UPDATE I use useMutate and onSuccess I invalidate those queries.
Page A & B get notified of that and refetch the data, therefore always displaying the newest data.
But now for SSR/SEO I want to display data right away, before the client fetches data on its own. For this I need to have some data available in the server request.
For this I can either fetch the Data on the server and then pass it as initialData or I can use hydrate/dehydrate.
Here I also fetch the data on the server, but I don't just pass the result, but instead the intire query fetch/cache mechanic.
But in the end with both ways, some data is available right away.
And to keep on showing the updated data, I have to invalidate the query anyway.
So what is the use of hydration?
0 Replies