cloudinary icon indicating copy to clipboard operation
cloudinary copied to clipboard

Published 20 hours ago • verified publisher icon nuxt-modules

Trouble with SSR

Open madsh93 opened this issue 4 years ago • 17 comments

Hi

I have just installed this module and testing it out. One thing I am confused about - is this module SSR ready?

e.g. using is only rendered client-side.

madsh93 avatar Dec 15 '20 14:12 madsh93

@madsh93 Nuxt is SSR, so this module is for both SSR and static site generating.

e.g. using is only rendered client-side.

I don't quite understand. Can you please elaborate a bit?

mayashavin avatar Dec 16 '20 06:12 mayashavin

@mayashavin Hi Maya

Sorry for the short explanation. My issue is, when I add the module and do the cld-image component tag, the image works great, but it is not displayed when javascript is blocked, therefore I assume it does not work with SSR?

madsh93 avatar Dec 16 '20 07:12 madsh93

@madsh93 Got it. The current version for components used in this module has a problem with SSR afaik, it rendered 'cld-image' in the html page instead of the actual img tag in SSR. The next version of the Vue components has the fixes for it, and I'm waiting for its release to fully test.

I will suggest to use $image.url for now if you want it to work when javascript is blocked.

Will keep this issue open and update it :). Hope it helps.

And thanks a lot for reporting it :)

mayashavin avatar Dec 17 '20 10:12 mayashavin

Which version is affected? I'm using v1.0.2 and got this error: [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. when using the cld- components.

Clex1o1 avatar Jan 05 '21 16:01 Clex1o1

@Clex1o1 all the versions currently, including the latest - v1.0.3-beta-2.

mayashavin avatar Jan 05 '21 22:01 mayashavin

@mayashavin Hey Maya. Is this planned for Nuxt 3.0 or 2.15? :-)

madsh93 avatar Feb 11 '21 19:02 madsh93

@madsh93 currently it's planned for 2.15. But I try to make it compatible with Vue 3x (aka Nuxt 3) if we can't release it before end of March :)

mayashavin avatar Feb 14 '21 12:02 mayashavin

@mayashavin How's it going? Any update on this?

tomiiide avatar Mar 14 '21 12:03 tomiiide

Hi, does this mean that if I generate a nuxt.js website using the static target the cld-image tag does not work?

finex avatar Apr 09 '21 11:04 finex

Hello, any updates? REALLY need this to be working SSR/SSG.

johncastorina avatar Jul 27 '21 21:07 johncastorina

@johncastorina maybe give a look to nuxt/image and see if it works there: https://image.nuxtjs.org/providers/cloudinary

kissu avatar Jul 27 '21 22:07 kissu

I am new to this module...just discovered the SSR issue too.

dosstx avatar Sep 21 '21 23:09 dosstx

I wrapped the <cld- components in <client-only> for now. Any potential downsides to this?

haykkh avatar Jul 05 '22 20:07 haykkh

@haykkh the image will not be available on server side.

kissu avatar Jul 09 '22 18:07 kissu

@kissu SSR doesn't work so the image isn't available server side anyway though, right?

haykkh avatar Jul 09 '22 19:07 haykkh

Indeed.

kissu avatar Jul 09 '22 20:07 kissu

This is still not resolved? Getting a lot of errors about "The client-side rendered virtual DOM tree is not matching server-rendered content" when using with Nuxt 2.15.7 and cloudinary 1.0.3.

Any update?

muhammedjenos avatar Aug 24 '22 11:08 muhammedjenos

Hey, Closing this as it targets the v1 version and it is a really old issue

Baroshem avatar Jun 02 '23 12:06 Baroshem

This one may be helpful too: https://v1.image.nuxtjs.org/providers/cloudinary

kissu avatar Jun 07 '23 10:06 kissu