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.
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!