vue-server-renderer: <hello will cause Server/Client DOM mismatch

[buhrmi]

Version

2.4.2

Reproduction link

https://jsfiddle.net/50wL7mdz/52896/

Steps to reproduce

Just make an SSR app using nuxt or something else and put <hello into the template.

What is expected?

No error

What is actually happening?

Console output: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

[posva]

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or Github repository containing a set of reproducible steps that can lead to the behaviour you described. Make sure to boil down the problem as much as possible. Thanks!

[buhrmi]

Here is a simple repo using nuxt (other ssr frameworks, eg. ream, have the same issue, so pretty convinced it's a vue-ssr bug)

https://github.com/buhrmi/ssr-bug/

[posva]

It would help if you make it with vanilla Vue, thanks

[buhrmi]

I've nailed this issue down to vue-server-renderer replacing HTML entities in the rendered output. Updated example code here https://github.com/buhrmi/ssr-bug

I don't know why this would be necessary, since browsers do this anyway. Adding <hello will be rendered as an opening tag, which browser will not understand and trigger the client-server dom mismatch warning. I've opened a PR to remove the HTML entity conversion. #6371

[posva]

Thanks for the concise repro. Looks like a bug. Thanks for proposing a PR