React multi carousel doesn't do server side render

Question

This is my Carousel, I am using react-multi-carousel and Nextjs and I am activating the ssr option

import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'

import CarouselImage from './CarouselImage'

const responsive = {
    desktop: {
        breakpoint: { max: 4000, min: 1024 },
        items: 1,
        paritialVisibilityGutter: 60,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1,
        paritialVisibilityGutter: 50,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
        paritialVisibilityGutter: 30,
    },
}

const imageFolders = [
    '/images/carousel/post-1',
    '/images/carousel/post-2',
]

export default function CarouselComponent() {
    return (
        <div>
            <div>
                <div>
                    <Carousel
                        ssr
                        infinite={true}
                        autoPlay={true}
                        containerClass='carousel-container'
                        itemClass='carousel-image-item'
                        autoPlaySpeed={6000}
                        responsive={responsive}
                    >
                        {imageFolders.map((imageFolder) => (
                            <CarouselImage
                                imageFolder={imageFolder}                                />
                        ))}
                    </Carousel>
                </div>
            </div>
        </div>
    )
}

This is CarouselImage, below the img tag I have the text hola

export default function CarouselImage({ imageFolder }) {
    return (
        <div>
            <img
                key={imageFolder}
                srcSet={`${imageFolder}/1270-520.png, ${imageFolder}/770-520.png 2x`}
                src={`${imageFolder}/770-520.png`}
            />
            <p>hola</p>
        </div>
    )
}

When I click View Page Source I don't see the text 'hola'.

what am I doing wrong? Do I need to add some other configuration to make server side render? I have already tried in development mode and I have also done build

Answer 1

Using ssr is not sufficient on its own, the deviceType prop also needs to be set for server-side rendering.

<Carousel
    ssr
    deviceType={deviceType} // `deviceType` needs to be set
    infinite={true}
    autoPlay={true}
    containerClass='carousel-container'
    itemClass='carousel-image-item'
    autoPlaySpeed={6000}
    responsive={responsive}
>
    {imageFolders.map((imageFolder) => (
        <CarouselImage imageFolder={imageFolder} />
    ))}
</Carousel>

---

How you'd define the deviceType is up to you, but the official SSR example for react-multi-carousel provides a possible solution by parsing the User-Agent.

import UAParser from 'ua-parser-js'

// ...

Index.getInitialProps = ({ req }) => {
    let userAgent

    if (req) {
        userAgent = req.headers['user-agent']
    } else {
        userAgent = navigator.userAgent
    }

    const parser = new UAParser()
    parser.setUA(userAgent)
    const result = parser.getResult()
    const deviceType = (result.device && result.device.type) || 'desktop'
    
    return { deviceType }
};