search

SSENSE / vue-carousel

A flexible, responsive, touch-friendly carousel for Vue.js
https://ssense.github.io/vue-carousel/
MIT License
1.72k stars 505 forks source link

Feature request: Real SSR support #192

Open manniL opened 6 years ago

manniL commented 6 years ago

Hey all!

Issue

Currently, only the navigation arrows are rendered on SSR-side. (See #191) This means all information inside the slider must be rendered by the client. SSR should me mature enough to render the whole slider as well (except eventlisteners and DOM manipulation through document or window).

Feature Request

As SSR is increasing in popularity (10k stars for nuxt.js is pretty awesome!), the carousel should support it as well and as good as possible by rendering at least all information.

Related

81

quinnlangille commented 6 years ago

Hey @manniL, this is a great request! SSR compatibility, as well as your other ticket (adding scoped slots -> #172) will be two of the major technical criteria we must complete before releasing v1.

I'm hopeful that we'll get some contributor traction on these issues. I'm going to release a roadmap document with our next release, which will hopefully make these requests more visible 🔍

felorhik commented 6 years ago

I have played with the idea of adding it but noticed something. The package itself does hook into the correct lifecycle hooks for SSR, so it "should" work.

However it does not and complains about a use of document. I was not sure how to setup an environment to test so I just copied the src directory into another project and built carousels in an SSR app..... and it worked fine in SSR.

It seems something in the build process might be causing the problem, but nothing jumps out to me anyway.

Still some quirks but it loads if the build process is bypassed.

manniL commented 6 years ago

@jordanramstad I've seen some issues with SSR (Nuxt.js in particular) as the SSR and CSR HTML does not match. This results in awkward "glitches", showing the slider once and the navigation labels a second time below.

felorhik commented 6 years ago

@manniL Yes, the reason for that is if things run in the mounted function, and add elements that is not represented through virtual dom (jQuery for instance). So when vue finishes initializing, those changes are not "tracked" so it ignores them and if a change happened to the element, it would just duplicate it since it does not know the context of the other element. At least that is my understanding of it.

SSR requires a bit more care in how a site is structured to prevent scripts from just doing their own thing without care. I have not noticed those problems on my end so far though.

All that vue-carousel should do in SSR is build the html and make it "visible" in some manner, possibly forced to 100% width and only showing 1 item since it cannot compute the widths of the slides. Once it loads through CSR it adjusts everything and adds the events it needs to (mounted function does not run in SSR).

amjadkhan896 commented 5 years ago

Is this feature is completed, We are waiting for it. Though it works on SSR, the view source is not generating when we run the build. When we run the npm run dev, it's generating the view source

quinnlangille commented 5 years ago

Hey @amirmasoud, proper SSR support will hopefully be resolved in the upcoming v1 release. Will keep you posted on this issue if we have any major developments/setbacks

DanielFortuyn commented 5 years ago

I still have great difficulty getting it to work in NUXT / SSR env I have tried most options suggested in the comments. But I did not succeed in getting it to work flawlessly for SSR. I would really like to help to make this work so if I can help out please let me know!

syffs commented 5 years ago

I still have great difficulty getting it to work in NUXT / SSR env I have tried most options suggested in the comments. But I did not succeed in getting it to work flawlessly for SSR. I would really like to help to make this work so if I can help out please let me know!

Same, even declared with ssr: false ! I faced some strange cases where carousel would not render because of its content (changing the content to something basic would actually work). I'd need to find a way to replicate the issue.

Hey @amirmasoud, proper SSR support will hopefully be resolved in the upcoming v1 release. Will keep you posted on this issue if we have any major developments/setbacks

@quinnlangille would you know when v1 will be released ?

quinnlangille commented 5 years ago

Hey @syffs, we're working on it internally but it's a bit of a slow grind. We're aiming for sometime within the next month or two but no real guarantees

BRafols commented 5 years ago

@quinnlangille Is there any open branch regarding this issue? I might be able to throw in some hours to help with this.

JWardee commented 5 years ago

Sorry to be a pain but is there any update on the progress of v1?

leonardlin commented 4 years ago

I'm using gridsome (also SSR) and unfortunately, I need to do the workaround described in the docs: https://gridsome.org/docs/assets-scripts/#without-ssr-support

but looking forward to v1 too.

lambdadev007 commented 2 years ago

Hi @quinnlangille, Is this feature request already added to the package?

leonardlin commented 2 years ago

@lambdadev007 I don't think so, I'm using the workaround