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

【问题标题】：React multi carousel doesn't do server side renderReact 多轮播不做服务器端渲染
【发布时间】：2021-08-10 03:02:46
【问题描述】：

这是我的轮播，我正在使用 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”。

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

【问题讨论】：

标签： reactjs next.js server-side-rendering react-multi-carousel

【解决方案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 }
};

【讨论】：