I am using react-responsive-carousel but it does not working with SSR in NextJs? do you have any example for enable SSR in this conponent?

Question

I am working on an e-commerce project and have to fetch product details data through SSR and render it on the screen. While the data is displayed correctly, I am facing issues with displaying the product images. I am using the react-responsive-carousel component for the image gallery, but it is not functioning properly. Can you please provide me with an example of how to use this component with SSR?

import { Carousel } from "react-responsive-carousel";

<Carousel
  showArrows={true}
  showThumbs={false}
  className="position-relative"
>
      {detaildata?.listingImages?.map((item,index) => (
        <React.Fragment key={index}>
    
           <Image
              className="d-block imgdiv" src={item} alt=""
              layout="fill"
              objectFit="cover"
            />
        
        </React.Fragment>
      ))}

</Carousel>

My expecting output is Images are render properly with SSR in nextjs.

my output screen.

score 0 · Answer 1 · answered Jun 03 '23 at 17:56

You should set innerWidth property as shown here

 const getInnerWidth = () => {
    try {
      // if client
      return window.innerWidth;
    } catch(e) {
    // if server, set any desired value
      return 1024;
    }   
  };

  return (
    <Carousel items={[]} innerWidth={getInnerWidth()} />
  );

I am using react-responsive-carousel but it does not working with SSR in NextJs? do you have any example for enable SSR in this conponent?

1 Answers1