Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNp9jcsOgjAQRX+lmTW0iawkjcH/6AbtqKh9ZFpwQfh3W6IGMXHTdM69M2eEvfd86BFqkBGNv7cRd8pKnx7GpO6G+cNYG/RpRuLNpMglKT5rUEBnvKNYmtbza3A2XR1zVb2CoKBmM8ksafOs4BKjD7UQvfW3Mz86I5qUCept7AyW2pmm4htebZM7xCXnGEx5IPcISMmooFgcFwkOSCWh1UhIf2Wr7pdwlf1Is3NSdoLpCTHvceE=

Steps to reproduce

<p>
<div> asdf </div>
</p>

With Vue SSR

What is expected?

The div inside the p element should be rendered once.

What is actually happening?

<p>
<div>asdf</div>
</p>
<div>asdf</div>
<p></p>

System Info

No response

Any additional comments?

No response

The browser will hoist the div out of the paragraph, as it's not allowed to nest a block element in an inline element.

The server renderer though just strings together your HTML as you render it. So you get a hydration mismatch.

Solution: Write valid HTML.

We even have precicely this code as an example in our docs:

https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch