I've been passing data fetched server-side (specifically on-demand ISR) into a regular React Query instance via as initialData on the client side, because I didn't know about its hydration support. Any particular benefits to using rehydration vs initialData?
There are a few tradeoffs to consider when compared to the hydration / dehydration approach:
If you are calling useQuery in a component deeper down in the tree you need to pass the initialData down to that point.
If you are calling useQuery with the same query in multiple locations, you need to pass initialData to all of them.
There is no way to know at what time the query was fetched on the server, so dataUpdatedAt and determining if the query needs refetching is based on when the page loaded instead.
I've been passing data fetched server-side (specifically on-demand ISR) into a regular React Query instance via as initialData on the client side, because I didn't know about its hydration support. Any particular benefits to using rehydration vs initialData?
There are a few tradeoffs to consider when compared to the hydration / dehydration approach:
If you are calling
useQueryin a component deeper down in the tree you need to pass theinitialDatadown to that point.If you are calling
useQuerywith the same query in multiple locations, you need to passinitialDatato all of them.There is no way to know at what time the query was fetched on the server, so
dataUpdatedAtand determining if the query needs refetching is based on when the page loaded instead.For more information please check here.
I've just migrated over to the de/hydrate based approach, and so far, so good!
Thanks for the pointer to dataUpdatedAt too!