Hi @bartlomiejzuber,

Thank you for your bug report. It might come as a surprise but this is expected. At the time of writing, Embla Carousel is a client side script and won't do anything on the server.

This is what's happening:

• You serve your HTML and CSS from the server.
• The client script mounts and Embla picks up the container and slide dimensions (slide sizes, spacing between slides etc).
• Embla aligns the slides and positions slides needed to create the loop effect.
• Hence, you'll see the flicker when this happens.

One way to solve this would be to hide the carousel with opacity: 0; until Embla has initialized. Alternatively, you can add opacity: 0; to all the slides if you still want to display the carousel arrows and dots until Embla has initialized. There are probably other ways to do it but I think you get the idea.

SSR support might be added in the future.

Best,
David

@davidjerleke Do you think the approach suggested in this issue, helps fix this problem? FormidableLabs/nuka-carousel#786 (comment) ?

Hi @manojVivek,

Thanks for sharing that.

Currently, the HTML gets server side rendered and you don't loose any important SEO. I think the flicker thing is solvable with a similar approach as you suggest, but if this is going to be implemented we need to ask ourselves at what cost? How much will it affect bundle size and what would be a good solution for this?

@davidjerleke Thanks for mentioning this issue! But could you help me with something? How could I control if the embla has initialized or not?

@davidjerleke Thanks! I fixed my problem with the solution bellow and while the embla isn't rendered I show a Skeleton

const [isEmblaRendered, setIsEmblaRendered] = useState(false);

useEffect(() => {
    setIsEmblaRendered(true)
}, [])

Hi all, in case it's of any help to anyone, here's my approach to a related problem (SSR).

I have a page with a big carousel (product images) of which the currently selected is stored in a query param of the URL. To achieve a server-rendered HTML that is already pointing to the correct image i added a translation to the <div> container of the items and which is the child of the element that holds the ref used by Embla.

Reduced example (from my components based on shadcn's):

  <div ref={carouselRef} className="overflow-hidden">
    <div
      ref={ref}
      className="flex"
      style={{ transform: `translateX(-${initialIdx * 100}%)` }}
    />
  </div>

This translation is overridden by Embla with a transform3d (here if i'm not mistaken) as soon as it loads/hydrates client-side (and becomes interactive), but there's no flicker because it matches up. If you have any margin between the items in the carousel, you may have to adjust for that.

Hope it helps anyone!

This feature has been added to the roadmap:

• [Feat]: ⭐ Roadmap #841

Hi @davidjerleke.
I only work on the client side is there any way to remove SSR feature never used to reduce file size?

Hi @sarussss,

Thank you for your question. The SSR feature will be released with v9 and it will be an opt-in feature. By default, it won’t be active. So if that’s your concern, you will be able to use Embla just as you do today without any problems.

But the bundle size will grow a little bit because SSR is the kind of feature that has to be built into the core. However, the bundle size won’t grow significantly. Maybe I will consider lifting out an existing feature and make it a plugin so the bundle size won’t grow but I haven’t decided that yet.

Did that answer your question?

Hi @davidjerleke
Thank you for your answer. I think it would be more reasonable to deploy it as a plugin, only when someone needs it will they use it.

Hey @sarussss,

Sorry if I wasn’t clear 🙂. The SSR feature needs to be integrated into the core because it impacts several parts of the core code, so it can't be a plugin.

What I meant was that I might consider removing a different feature and turning that into a plugin instead, in order to reduce the core library's bundle size.

Hi @davidjerleke,
Don't get me wrong, I understand there will be features that need to be removed to convert SSR into a plugin, if you find those features are not too important then I think converting to a plugin is best.

@sarussss no, SSR can’t be a plugin. It has to be added to the core library, meaning the embla-carousel package because of technical reasons.