在服务器端渲染上使用时，Swiper有时会很大

如何解决在服务器端渲染上使用时，Swiper有时会很大

• 滑动版本：6.3.5。
• 平台/目标：Chrome，Safari，Edge等（所有现代浏览器+移动浏览器）。
• 具有问题的实时链接： https://bouclesandwaves-p67ctnmpb.vercel.app

我正在使用REACT版本的swiper。当您加载页面时，所有功能都可以正常运行。这是我的编码方式：

import React from 'react';
import SwiperCore,{Navigation,Pagination,A11y,Autoplay} from 'swiper';
import {Swiper,SwiperSlide} from "swiper/react";

import styles from './Slideshow.module.scss';

SwiperCore.use([Navigation,Autoplay]);
const Slideshow = ({images = [],intervalMs = 1000}) => {
    return <div className={styles.slideshow}>
        <Swiper
            slidesPerView={1}
            navigation
            pagination={{clickable: true}}
            loop
            autoplay={{delay: intervalMs}}
        >
            {
                images.map(src => <SwiperSlide key={src}><img className={'banner-img'} src={src}
                                                              alt={'banner'}/></SwiperSlide>)
            }
        </Swiper>
    </div>;
};

export default Slideshow;

现在，该错误仅在特定情况下发生。首先，我正在使用https://vercel.com/进行服务器端渲染。 当您进入登录页面时：https://bouclesandwaves-p67ctnmpb.vercel.app/login 并登录，您可以使用测试帐户： [e-mail] 密码：测试

然后将其重定向到主页，然后就可以了。然后注销（按右上角的用户图标->注销），然后使用凭据再次登录，然后图像将很大（请注意幻灯片上的样式宽度）：

<div class="swiper-wrapper" id="swiper-wrapper-fb9fb52f2fefd337" aria-live="off"
     style="transform: translate3d(-45672px,0px,0px); transition: all 0ms ease 0s;">
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5" role="group" aria-label="1 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide6.png" alt="banner"></div>
    <div class="swiper-slide" data-swiper-slide-index="0" role="group" aria-label="2 / 8" style="width: 15224px;"><img
            class="banner-img" src="/images/home/slides/slide1.png" alt="banner"></div>
    <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1" role="group" aria-label="3 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide2.jpg" alt="banner"></div>
    <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="2" role="group" aria-label="4 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide3.png" alt="banner"></div>
    <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="3" role="group" aria-label="5 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide4.png" alt="banner"></div>
    <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="6 / 8" style="width: 15224px;"><img
            class="banner-img" src="/images/home/slides/slide5.jpg" alt="banner"></div>
    <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="7 / 8" style="width: 15224px;"><img
            class="banner-img" src="/images/home/slides/slide6.png" alt="banner"></div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" role="group" aria-label="8 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide1.png" alt="banner"></div>
</div>

这些是我已经在刷卡器上添加的其他样式：

.swiper-container {
  width: 100%;
  height: auto;
  max-height: 100%;
  .swiper-wrapper {
    align-items: center;
    img {
      width: 100%;
    }

    .swiper-slide {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  }
}

我已经尝试过使用不同的样式（例如包装纸或幻灯片或图片上的最大宽度，但这不能解决问题）

请注意，当我在本地运行项目时，我没有任何问题，因此我认为它必须在服务器端呈现上做一些事情。

有什么我可以做的吗？为什么第二次（而不是第一次）重定向后发生？另外，如果我只是使用菜单栏更改页面，那么根本没有问题