SSR Issues

[syropian]

I'm trying to use cloudinary-vue with a Nuxt application, but I'm getting an SSR warning from Nuxt everywhere I server render a CldImage component. It mentions that theres mismatching childNodes vs. VNodes, and there appears to be extra an text node in the VNode list. I've attached a screenshot from my browser console:

[joshukraine]

I have experienced this same issue on my blog, which is built with Nuxt. Here is one of my image components: https://github.com/joshukraine/ofreport.com/blob/master/components/ArticleImage.vue Full repo is open source.

[mayashavin]

@syropian I saw you are using "cloudinary-vue": "^1.0.0-beta3". Please change it to ^1.0.0 as we solved this problem in SSR with the official version 1.0.0. The beta3 version doesn't work directly with SSR and will need to use a workaround.
Let me know if you need other help.

[syropian]

@mayashavin I have "cloudinary-vue": "^1.0.0", in my package.json file already, and I confirmed it's "version": "1.0.0", by looking in node_modules.

[joshukraine]

@mayashavin Thank you for the information. I was also on "cloudinary-vue": "^1.0.0-beta3", but I have just now updated to v1.0.0, and I can confirm that the issue persists. During normal client-side navigation, the pages render without errors. But if I refresh the page (SSR), I get the usual errors about mismatches in the virtual DOM. (See PR link above, screenshot below.)

[pktharindu]

Wrapping it with a client-only tag works for me.

<client-only>
  <cld-image
    public-id=""
    quality="auto"
    responsive="auto"
    fetch-format="auto"
  />
</client-only>

[unr]

It sounds like this is an ongoing issue?

If the expectation is that every image using CldImage is to be client only, will likely just have to go back to using straight urls. Not useful in an SSR Nuxt Application.

[mayashavin]

responsive is a client-only tag, since it calculates the size base on the actual viewport.

If you don't use responsive, CldImage should work normally regardless server or client. However, the new version of Cloudinary-Vue SDK will address the issue of mis-matching content render in general.

@unr @joshukraine