Tengo un problema con swiper.js cuando implemento mi sitio web en Vercel. Swiper evita que mi sitio web se vuelva a renderizar (cuando hago cambios, el contenido permanece igual). En el entorno de desarrollo, todo funciona perfectamente, pero cuando lo presiono en Vercel, el contenido permanece igual. Aquí está mi código:

 import React from "react"; import Product from "../../components/PremiumProducts/Product"; // import { Swiper, SwiperSlide } from "swiper/react"; // import SwiperCore, { Autoplay } from "swiper"; // SwiperCore.use([Autoplay]); // Import Swiper styles // import "swiper/css"; export default function PremiumProducts(props) { const { data } = props; console.log(data); return ( <> <section className="premium"> <div className="premium__brands"> <div className="premium__brands-content center-content"> {/* <Swiper spaceBetween={10} slidesPerView={5} loop={true} autoplay={{ delay: 2000, disableOnInteraction: false }} breakpoints={{ 400: { width: 400, slidesPerView: 2, spaceBetween: 5, }, }} > <SwiperSlide> <img src="/Premium/Brands/ime.png" alt="" /> </SwiperSlide> <SwiperSlide> <img src="/Premium/Brands/biooil.png" alt="" /> </SwiperSlide> <SwiperSlide> <img src="/Premium/Brands/tuf.png" alt="" /> </SwiperSlide> <SwiperSlide> <img src="/Premium/Brands/fedor.png" alt="" /> </SwiperSlide> </Swiper> */} </div> </div> <div className="premium__products"> <div className="center-content"> <div className="premium__products-content"> {data.map((product, i) => { return <Product key={i} {...product} />; })} </div> </div> </div> </section> </> ); } export async function getStaticProps() { const resp = await fetch(`${process.env.SERVER_API}premium-products`); const data = await resp.json(); return { props: data, revalidate: 1, }; }