-
|
Hello, My app is spitting hydration errors every second. I have 2.5K errors per hour. These are the error types:
So, my app is running client side without any SSR. The only thing I can think of that could be causing the problem is that in the loader the fetch of resources never returns the same data twice. Its a highly concurrent application that aggregates tons of data and I cannot guarantee that the same GET request returns the same JSON response. Every server response is different. I am using no Chrome extensions. My questions are:
Anyway, at this point I am clueless and thinking about switching the framework before it's too late, i.e. the app gets bigger and the problems gets bigger. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
I guess your users are visit your app, and maybe they are using Chrome extension.
can you reproduce the error in local dev? Then maybe you can get more detailed error message.
that's the process of hydration. You can remove the |
Beta Was this translation helpful? Give feedback.
-
|
I newly installed a next js application on my pc, after that I ran the command using using ' npm run dev', it compiled then showed the next js landing page while the page was loading. After the page was done loading I got an application error, I checked my console and I saw this 'hyrating errors'. Please I really need this fixed how can I go around this? I have tried solutions online but none seems to be working. And not just even creating a new next app, even older doesn't compile properly anymore, I have updated my chrome and done other things I saw from the internet. Really appreciate a response thanks |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
This is not what the error means, the error means that instead of hydrating the HTML generated during SSR what React will do is to render the app and throw away the HTML, here the difference is that hydrating just run effects and attach event listeners, while the other process is generating the DOM again. You still have SSR, but it will take a few ms more to finish the hydration/rendering process.
This can't happen, because when React hydrates the app client-side the loaders are not being fetched again, instead Remix sends the data it got from the loader during SSR in the HTML and use it during the hydration, so it's always the same data. What could be happening is dates being parsed with a different timezone during SSR and CSR for example. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much @sergiodxa. That was it. I'm using |
Beta Was this translation helpful? Give feedback.
-
|
@ric980 I would recommend you to do it with ClientOnly instead of change server locale. |
Beta Was this translation helpful? Give feedback.
-
|
You could also parse dates in the loader so the timezone is used once there. |
Beta Was this translation helpful? Give feedback.
-
|
and its possible that this error caused by third-party framework |
Beta Was this translation helpful? Give feedback.
This is not what the error means, the error means that instead of hydrating the HTML generated during SSR what React will do is to render the app and throw away the HTML, here the difference is that hydrating just run effects and attach event listeners, while the other process is generating the DOM again.
You still have SSR, but it will take a few ms more to finish the hydration/rendering process.