0

On Vue's official site, it gives a good and short example to show how to do ssr by vue.

(https://stackblitz.com/edit/vue-ssr-example-qaztqn?file=package.json)

I copied this example to my local machine and ran it successfully.

However, after I tried to bundle vue locally by vite, I got the hydration mismatch error:

index.0977acf5.js:2980 Hydration completed but contains mismatches.

Before my change, the official example imports vue from CDN in it's index.html. The only change I made is to bundle vue locally, then reference the whole bundled js file.

I uploaded my failed example to github: https://github.com/yangjiang3973/vue-ssr-demo

Can anyone take a look and tell me why this hydration error happen?

Thanks!

Yang Jiang
  • 11
  • 3
  • Please give a read to that one: https://stackoverflow.com/a/67978474/8816585 It's based on Nuxt is still relevant as of what is happening regarding the hydration issue. Simple debugging would be to toggle JS on and off to see what is different. – kissu Oct 10 '22 at 17:41
  • Please provide enough code so others can better understand or reproduce the problem. – Community Oct 11 '22 at 13:50

1 Answers1

0

Hydration node mismatch may appear also if you have invalid html, e.g.

<p>
  <p></p>
</p>

or

<span>
  <p></p>
</span>

In the example above the nesting is illegal, you can't nest p inside p, or p inside span. Browser corrects this error that's where SSR rendered piece of template diverges from what you have finally rendered in the browser.

Sergey Onishchenko
  • 6,943
  • 4
  • 44
  • 51