Hebilicious/form-actions-nuxt

[bug] hydration mismatch

Closed this issue · 2 comments

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

Screenshot

image

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)

I was able to reproduce it initially, but as soon as I switched to /pages the bug went away. Still investigating.

I did notice a couple of other bugs and will push fixes now
#32
#35

it looks like there's a difference in the bundle in my local build, and what's published on npm ...

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