SSR in dev for more consistent output in dev and prod

[zyyv]

trafficstars

Describe the bug

Usage:

features:
  - icon: <i class="i-carbon-sun" />
    title: Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Check the feature icon type

type FeatureIcon =
  | string
  | { src: string; alt?: string; width?: string; height: string }
  | {
      light: string
      dark: string
      alt?: string
      width?: string
      height: string
    }

I refer to the render logic, use v-html render the icon. Display well in dev environment, but shows errors in prod environment.

dev	build

Reproduction

https://stackblitz.com/github/zyyv/vitepress-unocss-issue

• Display right run pnpm dev
• Display error run pnpm build && pnpm preview

Expected behavior

Dev and build behave the same

System Info

latest

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

<i> is not a self closing tag. make it <i class="i-carbon-sun"></i> it should work.

[brc-dd]

Vue doesn't allow/rectify invalid HTML in SSR:

https://play.vuejs.org/#__PROD____SSR__eNp9UtFOgzAU/ZWmz8q2TF+QLVGzB31Qoz42cVDuoFuhTVsYZNm/ewthkrnsrT3n3MO5hx7oo9ZBXQENaWS5EdoRC67SS1ZyVVpHGrIg60gQLmNrF4xulGKUTJbrQdCeCZLYDIJo0luiGV4cFFrGDvBGSJSKmtS3uSskzjSMLqMJQhe4dsRFk5EJXq1rpT8GmIoc/GwS811mVFWmITGQPnhsL1KXh2Q2neqmA3IQWe7GSCos2rYhSaTiO4SO3j/AXf7bJrKCse/9ue0JuOSKnXSh6Q11FhvciCzYWlXiD+i+xChXhRYSzLt2AhtmNOwzeC6WUu1fO8yZCm4GnOfAdxfwrcVqQzx8GLBgamD0xLnYZOB6evX1Bg2eT2Sh0kqi+gr5CVbJymfsZU/YDsYe6bq0L4VWxoky+7arxkFph6V8UK88dnpG8RU+X1n9L+48uOvmsE9s8acG4z2xQCSC+YwefwFPfe8q

VitePress won't be able to help with SSR inconsistencies unless we start doing SSR in dev.

[zyyv]

Thank you @brc-dd .

[brc-dd]

I'm fine with keeping this open though. There should be consistency for better DX. SSR in dev is possible - Nuxt is doing that. Someone with better insights might be able to introduce that here too.

[ghost]

I don't have a solution, but I have some ideas for you.

Probably time will tell that in the future, a better approach for SSR in VitePress is going to be a closer integration with Vite. Already released in Vite 5.3 and coming up in a greater form in Vite 6 is the Environment API, that enables every plugin or app that builds on top of Vite to work together in Vite's SSR pipeline, it is very good. Currently VitePress uses the Vue's SSR, this is also good, but it is more limited in scope and you guys are needing to solve these consistencies issues, that are more or less the same issues that Vite 6 is also addressing.