React 多轮播不做服务器端渲染

Question

这是我的 Carousel，我正在使用 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'。

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

Answer 1

仅使用 ssr 是不够的，还需要为服务器端渲染设置 deviceType 属性。

<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 取决于您，但 official SSR example for 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 }
};

React 多轮播不做服务器端渲染

React multi carousel doesn't do server side render

reactjs

server-side-rendering

next.js

react-multi-carousel