swiper/react problem in ssr mode

[matin-mortazavi]

Check that this is really a bug

• I confirm

Reproduction link

hhtps://i-provide-code-in-description

Bug description

hi guys i’ve a problem with swiper/react package in ssr mode

i got an parent component that fetch data and pass it to a component
the child component show product in slider but problem is in first 0.5 second of first renedr all styles are messed up (in csr work well)
have you any idea how to handle it?! i think the problem related to slow loading of react-swiper

my parent component =>

export default async function Home() {
 const { data, categoryBox } = await coreUseCase.getBaseData();
 const {
     topCenterSlider,
    } = data;
 return (
   <div className={styles.home}>
     <TopSlider list={topCenterSlider} />
</div>  

my child component =>

import { SwiperSlide } from "swiper/react";
import { NextLink } from "@/components/Common";
import { Btn, Slider } from "@/components/Common";
import styles from "./TopSlider.module.scss";
import { Img } from "@/components/Common";
import { coreConstant } from "@/constant";
const sliderSettings = {
  navigation: false,
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
};

export default function TopSlider({ list }) {
  return (
    <div className={styles["top-slider"]}>
      <Slider settings={sliderSettings}>
        {list
          ?.filter((fil) => fil?.isEnable)
          ?.map((item, key) => (
            <SwiperSlide key={key}>
                           <figure className={styles["top-slider__img"]}>
                  <Img alt={item?.title} path={item?.image} category={coreConstant.Sliders} />
                </figure>
                <div className={styles["top-slider__details"]}>
                  <p className={styles["top-slider__details-text"]}>{item?.metaTitle}</p>
                </div>
                       </SwiperSlide>
          ))}
      </Slider>
    </div>
  );
}

my slider component =>

import { Swiper } from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y, Keyboard, Thumbs, Autoplay } from "swiper/modules";

import "swiper/css/bundle";
import "swiper/css";

const Slider = ({ settings, children }) => {
  const settingConfigs = {
    modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard, Thumbs, Autoplay],
    pagination: { clickable: true },
    navigation: true,
    loop: true,
    ...settings,
  };

  return <Swiper {...settingConfigs}>{children}</Swiper>;
};

export default Slider;

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.0.4

Platform/Target and Browser Versions

chorome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[s-patompong]

We face the same issue, on initial render (for a split second), the style messed up. It'd be nice to have swiper working nice with SSR.

[mahmoudAcm]

The issue arises because Swiper calculates and assigns each slide's width and margin only after the JavaScript loads. This can cause layout shifts, especially in server-side rendering (SSR) environments where initial styles are applied inconsistently.

To prevent this, a workaround could involve pre-setting the slide widths and margins in CSS based on the expected layout, so the layout is more stable before Swiper's JavaScript adjusts the slides. Additionally, if the layout shifts are too significant, consider implementing a custom solution to handle these styles on the server side.

[mahmoudAcm]

I had to implement a workaround using <style> tags to replicate the same width and margin calculations that Swiper applies to each slide. By pre-calculating and setting these styles, I could ensure layout stability even before Swiper’s JavaScript fully loads. This approach helped to avoid layout shifts, especially under server-side rendering (SSR) conditions, by mimicking Swiper’s dynamic styling process upfront.

[mateusp7]

Someone fix this issue?

[mahmoudAcm]

@diazevedo can you tell me the final result that you want to achieve?

[diazevedo]

@mahmoudAcm thanks for taking the time to look into this. I much appreciate it!
So, I wanted the carousel to follow the paddings I have on the screen.
Let's say 20px on each side. But when my items have a min-width the calculation swiper makes the width of the slides go smaller than the min-width of tiles, this causes the last element to be cut off a bit.

something like this codepen with example

[mahmoudAcm]

@diazevedo You gave the tail a min-width of 21rem and adding padding to each tile am i right?

[diazevedo]

@mahmoudAcm I'll try it today, thanks a lot!

[yunom-io]

@mahmoudAcm you're solution is simple and amazing, thank you!