"Error: Text content does not match server-rendered HTML"
I'm using the T3 template with Tailwind and tRPC. I'm not sure what I might've changed but it's still using the prefetch pattern with <HydrateClient> in the main server component and useSuspenseQuery() in the nested client component. My code is identical to the template with the exception of some extra form fields and a list.
While the data is loading in (a list of db entries) - an old set of data flashes in briefly. I'm assuming this is cached data and the rendered difference between that cached data and the new data is causing the error.
Assuming I just need to set no-cache somewhere, not sure how to do this with tRPC.
...any advice?
(another related question - if I wanted to render the list in the root/parent server component, and revalidate the list on submit in the nested client component - is this possible? Revalidating using utils in the client component does nothing.)
(also, do I need to wrap every page in <HydrateClient> and use void x.prefetch()? It's kind of an eye sore, and I can't find much documentation on usage.)
Thank you!!
1 Reply
So now that I think about it, the flash-in is likely the data cached with suspense, which is why when I refresh it flashes back to that. But really that cache should be updated on every mutation - but it only updates when I restart the dev server.
Plus, that doesn't explain the error - and in the error dialog it shows the comparison between the cached data and the actual data being the problem.
Will be reverting to
useQuery for now - if someone could elaborate on useSuspenseQuery that would be great!