Subscribe on changes!

getSSRProps return value does not pass down innerHTML as dom props

avatar
Apr 18th 2023

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/github-c1z4a8-we3axz?file=src/main.ts

Steps to reproduce

return { innerHTML: 'some value' } from a Vue directive via getSSRProps. innerHTML is then not propagated. (see also stackblitz example)

What is expected?

I expect innerHTML to be defined serverside so that my component is prefilled with content before rendering.

What is actually happening?

The innerHTML is not filled, which means the content stays blank (see stackblitz example)

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 96.88 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Firefox: 112.0.1
    Safari: 16.0

Any additional comments?

I'm currently working rewriting some parts of our codebase from Nuxt 2 to Nuxt 3. I initially thought this was related to Nuxt but the same issue is happening in Vue 3 with SSR rendering too. I try to modify the innerHTML serverside but it seems that innerHTML is not propagated. I tried in the stackblitz example to write some content to innerHTML via getSSRProps. I'm not sure if this is a bug or intended behaviour, or perhaps there is a different way to modify innerHTML in getSSRProps?

avatar
Jun 19th 2023

I use webpack and have the same problem

avatar
Jun 19th 2023
image

getSSRProps does not support rendering of these properties. But I use v-html in ssr server is normal

avatar
Jun 19th 2023

Ah good find, seems like it's intentional indeed! I'll close this one

avatar
Jun 19th 2023

I think it needs to be fixed, and this only happens in optimized compilation. For client-compiled render functions it works.

https://github.com/vuejs/core/blob/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f/packages/server-renderer/src/render.ts#L317