Server-side rendered page differs from client-side rendered page

[PeppeL-G]

I'm using VuePress 2 with Vite. To get mermaid to work, I have created a Vue component like this:

<template>
	<div class="mermaid">
		<slot></slot>
	</div>
</template>

<script>
export default {
	async mounted() {
		const mermaids = document.getElementsByClassName('mermaid')
		console.log(mermaids)
		const mermaid = await import("mermaid/dist/mermaid")
		mermaid.initialize({
			startOnLoad: true
		})
		mermaid.init()
	}
}
</script>

Which I then use like this in my .md files:

<Mermaid>
{{`
graph LR
    subgraph Project
        a[Task A]
        b[Task B]
        c[Task C]
        d[Task D]
    end
`}}
</Mermaid>

The reason the graph definition is in {{}} is because otherwise the newline characters would be removed by an optimizer somewhere (I'm guessing), but I was "clever" and managed to find this as a workaround (mermaid requires the newline characters to be preserved).

This always works good for me when I access the page after using npm run dev on my own computer. When I have built it and uploaded it to a server and try to access a page using <Mermaid>, mermaid always complains about a syntax error when that's the first page the web browser loads. If I then go to another page using <Mermaid>, it works fine.

My logic tells me the problem is that the problem with the first page load is because it's server rendered. Looking at the innerHTML of each <div class="mermaid">, I notice a different when I run locally compared to first page load from server:

<div class="mermaid">.innerHTML locally:

"\ngraph LR\n    subgraph Project\n        a[Task A]\n        b[Task B]\n        c[Task C]\n        d[Task D]\n    end\n"

<div class="mermaid">.innerHTML first page load from server:

"<!--[-->\ngraph LR\n    subgraph Project\n        a[Task A]\n        b[Task B]\n        c[Task C]\n        d[Task D]\n    end\n<!--]-->"

The server-side rendered page does not work the same way as the client-rendered page, is this a bug? At least unexpected behavior for me.

PS
I think I can use <Mermaid> the following way instead to get around the problem:

<Mermaid definition="
graph LR
    subgraph Project
        a[Task A]
        b[Task B]
        c[Task C]
        d[Task D]
    end
" />

DS

[Mister-Hope]

Try reading the code of vuepress-plugin-md-enhance.

It can avoid the issues and do have a better writing experience. Adding Syntax to markdown should be better than creating and using component

Edited: relook what you are reporting, vue is using special comment to mark Mustache or directives like v-if and v-for, so the ssr render result is expected.