how to make a carousel in server side in nextjs?
Answered
Western harvester ant posted this in #help-forum
Western harvester antOP
I tried react slick and other libraries they didn't work tho..
Answered by Short mackerel
That is a tricky one if you want to render it in a server component. First of all, why would you want to use a carousel in a server component? You probably have not worth anything in it for index for the web crawlers.
On top of that, carousels are probably always client component, since you will need to adjust the index of the current visible slide. Hence a carousel is not a read-only component, because a user interacts with it.
I mean you can still get the data in a server component and pass the data into a client component. The logic of clicking would still be on a client, because client events can never be done on a server.
On top of that, carousels are probably always client component, since you will need to adjust the index of the current visible slide. Hence a carousel is not a read-only component, because a user interacts with it.
I mean you can still get the data in a server component and pass the data into a client component. The logic of clicking would still be on a client, because client events can never be done on a server.
13 Replies
@Western harvester ant I tried react slick and other libraries they didn't work tho..
try embla-carousel: https://www.embla-carousel.com/api/
Keep in mind, that a carousel is mostly interactive, so it needs to be on the client
Keep in mind, that a carousel is mostly interactive, so it needs to be on the client
@Western harvester ant solved?
Western harvester antOP
Nop
@Western harvester ant Nop
what else do you need to solve your initial issue?
Western harvester antOP
Actually it doesn't work on server side that's why
I want a carousel that works on server side
@Western harvester ant I want a carousel that works on server side
Keep in mind, that a carousel is mostly interactive, so it needs to be on the clientare you aware of this?
Western harvester antOP
Yes but I am working on a project and it's requirement there
Then how can I solve it?
@Western harvester ant Then how can I solve it?
add the
'use client' directive on top of your file. Like that the carousel will still be rendered serverside and only hydrated on the clientShort mackerel
That is a tricky one if you want to render it in a server component. First of all, why would you want to use a carousel in a server component? You probably have not worth anything in it for index for the web crawlers.
On top of that, carousels are probably always client component, since you will need to adjust the index of the current visible slide. Hence a carousel is not a read-only component, because a user interacts with it.
I mean you can still get the data in a server component and pass the data into a client component. The logic of clicking would still be on a client, because client events can never be done on a server.
On top of that, carousels are probably always client component, since you will need to adjust the index of the current visible slide. Hence a carousel is not a read-only component, because a user interacts with it.
I mean you can still get the data in a server component and pass the data into a client component. The logic of clicking would still be on a client, because client events can never be done on a server.
Answer
@Western harvester ant solved?