[Question] Is embla-carousel-react supported for use with SSR (specifically nextJS)?

[nik32]

@davidjerleke I mean can i use it in nextJS without any issues?? Or is there anything I need to take care of if I use embla-carousel-react with nextJS

[davidjerleke]

Hi @nik32,

Thank you for your question. It depends on what you mean by "issues". You won't get any errors because embla-carousel-react runs a function called casUseDom() before running the script that depends on a browser environment. A lot of devs are using it with NextJS.

As for other issues, no calculations of carousel alignment are made on the server because Embla reads element dimension upon initialisation (which don't exist on the server), so this might cause the carousel to "jump" into position as soon as the Embla script runs.

Let me know if that answers your question.

Best, David

[nik32]

@davidjerleke Thanks for such a quick response. Just to clarify, what you mean to say is that there won't be any errors produced. Just in some cases UX might not be optimal (carousel kind of popping up suddenly if the page is rendered on server).

[davidjerleke]

Hi again @nik32,

what you mean to say is that there won't be any errors produced

That's correct. Embla won't throw any errors.

Just in some cases UX might not be optimal (carousel kind of popping up suddenly if the page is rendered on server).

Not exactly. The HTML and CSS will be server side rendered so the carousel markup will be there when you server side render your page. But depending on what options you use it will affect the alignment of the carousel. The following options will affect how the carousel slides are aligned:

• align
• containScroll

And by affect I mean that upon hydration (when the client/browser takes over and SSR is complete), some combinations of options can cause the carousel to jump into correct position for a very brief moment when the Embla script is initialized:

https://user-images.githubusercontent.com/11529148/188283665-08aa3ca9-a9dc-4a34-be60-ece87aa8e4a7.mov

This is sent from the server (SSR)

This is when the the browser/client has loaded the JavaScript for your app

Most users won't even notice it and in the video recording I've used a slow setTimeout to demonstrate what I mean. In reality the jump will be much faster. This only happens the when the carousel script has loaded the first time and won't affect UX in any other way.

I hope my explanation helps you understand what I mean.

Best, David

[nik32]

@davidjerleke That clears it. Thank you so much for taking time to explain in such detail!!! Really appreciate it 😊.