Passing `initialData` to react-query from `getServerSideProps` "Text content did not match" error
I have a newsfeed-like page with infinite scroll. I'm sending a request to my Laravel backend API from
This works fine but when anything changes in the database, I'm getting a "Text content did not match" error because the page source generated by NextJS doesn't match whatever is rendered client-side.
I've logged everything out and it goes like this: the browser is always getting the correct data. It receives correct data from
However the HTML generated by NextJS is not up-to-date. NextJS again receives valid data with
So in other words NextJS generates stale HTML because it tries to fetch data with react-query and somehow comes up with stale data. Seems like it could be caching something but why would NextJS cache a react-query call?
Any suggestions on how to debug this?
getServerSidePropsreact-queryuseInfiniteQueryinitialDatagetServerSidePropsThis works fine but when anything changes in the database, I'm getting a "Text content did not match" error because the page source generated by NextJS doesn't match whatever is rendered client-side.
I've logged everything out and it goes like this: the browser is always getting the correct data. It receives correct data from
getServerSidePropsHowever the HTML generated by NextJS is not up-to-date. NextJS again receives valid data with
getServerSidePropsSo in other words NextJS generates stale HTML because it tries to fetch data with react-query and somehow comes up with stale data. Seems like it could be caching something but why would NextJS cache a react-query call?
Any suggestions on how to debug this?
