[bug] hydration mismatch
Closed this issue · 2 comments
Hebilicious commented
- For the hydration mismatch this is probably a bug, do you have a repro ? With useFetch the data fetched on SSR is passed in the payload to the client (so you should see it in the nuxt devtools in Payload/Data)
Here's a minimal reproduction on stackblitz: https://stackblitz.com/edit/nuxt-starter-trga3p?file=components%2FBooks.vue
Again, same minimal code from README using ServerLoader, tested on nuxt v3.6.5
+ form-actions-nuxt 0.2.0-beta.1
.
You can see the Hydration text mismatch
warning on the console.
Some interesting points:
console.log
inside the component is run more than once on the server (see lower left, console from terminal). Here you see it three times, but on my actual project I consistently see it twice.console.log
on the client does not return result value -- see console on Chrome dev tools:result.value: null
. I think this is where vue figures out there is a mismatch. One thing interesting is if you check the network request, you DO get a response with data in it. It seems like the data gets lost during returning it to the component.
Despite the node mismatch you can still see the rendered screen in the screenshot, but on the actual project the client fails to render the data. (Maybe its because on stackblitz the client also renders the component twice, but not the actual project.)
I'm also checking on the route params update as well. Stay tuned for feedbacks! :)
Originally posted by @jangxyz in #29 (comment)
Hebilicious commented
jangxyz commented
I can confirm that with the v0.2.0-beta.4 release, the mismatch is gone -- for both pages/
and default app.vue
approach. Great work! 😎