React 多轮播不进行服务器端渲染

Question

这是我的轮播，我正在使用react-multi-carousel和Nextjs，并且我正在激活 ssr 选项

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>
    )
}

这是CarouselImage，在img标签下面我有文字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>
    )
}

当我单击“查看页面源代码”时，我没有看到文本“hola”。

我究竟做错了什么？我需要添加一些其他配置来进行服务器端渲染吗？我已经在开发模式下尝试过，并且也完成了构建

Answer 1

ssr单独使用是不够的，deviceType还需要设置 prop 以用于服务器端渲染。

<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>

如何定义deviceType取决于您，但官方 SSR 示例react-multi-carousel通过解析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 }
};