Vue SSR is not equal (isomorph) to its CSR with inline styles. Hydration not possible without re-rendering.

[activenode]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/vue-csr-ssr-diff-github-issue-n0rbl

Steps to reproduce

1. Open the example
2. See that i have been using an extremely minimal example by using the initial HelloWorld.vue and adapting it to having CSS inline styles
3. Check the console.log of the rendered HTML and notice that Vue complains that it is bailing hydration due to the diff

What is expected?

It should output the EXACT same HTML to be isomorph. The only allowed difference must be data-server-rendered="true" attribute which only applies for SSR.

It should output

html from SSR <div id="app" data-server-rendered="true"><div class="hello"><div style="padding:0;margin:0;">Check my styles</div></div></div> 

html from CSR <div id="app"><div class="hello"><div style="padding:0;margin:0;">Check my styles</div></div></div> 

XOR

html from SSR <div id="app" data-server-rendered="true"><div class="hello"><div style="padding: 0px; margin: 0px;">Check my styles</div></div></div> 

html from CSR <div id="app"><div class="hello"><div style="padding: 0px; margin: 0px;">Check my styles</div></div></div> 

What is actually happening?

As you can see it the HTML differs even though it is the exact same Vue instance that is rendered CSR and SSR:

(if you cannot see it: it adds whitespace in the inline CSS and in one it adds "px" units)

html from SSR <div id="app" data-server-rendered="true"><div class="hello"><div style="padding:0;margin:0;">Check my styles</div></div></div> 

html from CSR <div id="app"><div class="hello"><div style="padding: 0px; margin: 0px;">Check my styles</div></div></div> 

[posva]

This is because when style is set client side, through $el.style.padding = 0, the browser reformats the value and the final style property visible on the html element is different but at the end it doesn't matter as long as the result is the same and Vue can hydrates the content

[activenode]

I think you closed this issue too fast. Have you seen the demo that Vue complains and is saying that it performs a full re-render?

For real isomorphism it is expected to have the same output. I do not think this is solved. You kinda provided an "explanation" but it does not solve the issue.

[activenode]

Also there is additional whitespace added. I get what you are saying. But this is by definition not isomorph to the vue-server-renderer

[activenode]

I adapted the code example now so that the error from Vue is visible. Please re-open.

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

[activenode]

Okay so with the newest example provided in codesandbox Vue does not complain anymore. I would still recommend to reach 100% of isomorphism by recreating the browser behaviour SSR side. Is that an option?