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

问题描述

这是我的 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 },paritialVisibilityGutter: 50,mobile: {
        breakpoint: { max: 464,min: 0 },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”。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）