Hydration Mismatch

Recently stumped upon a hydration mismatch issue that happened when I SSR my blog post page on my nuxt website, it was a p tag with html rendered as its content.

This issue only happened when the page was being server rendered, client was totally fine. I checked the nuxt devtool to see if the payload of that page from server is wrong, but it was totally fine as well. Initially I thought it was a async rendering issue, so I added an state to cache the post content I got from Storyblok, but it was no help. Then I changeg the component to <ClientOnly> and the issue was gone, but I know I cant just fix that not knowing what the real reason was.

So I search the issues from nuxt repo and I found one issue about hydration not updating DOM, then I realised I just found a bug from Vue itself.

Link to the nuxt issue: https://github.com/nuxt/nuxt/issues/22784

Weirdly enough, I then change the p tag to a div solved the hydration mismatch issue (possibly the html of my content was has lots of p tag).

Guess I need to dig deeper now.