Adding support for server side rendering (ssr)

[mahmoudAcm]

I have used Swiper JS with NextJs 14 (app router) and I encountered a strange behavior when loading the page the swiper takes the full width and jumps even after I defined the breakpoints and the default number of slidesPerView !

I think it is because the swiper waits for the javascript to load to apply interactivity and breakpoints so as a workaround I implemented the code below

'use client';

import React, { useId } from 'react';
import { Swiper as BaseSwiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import cn from '@/lib/cn';

const defaultBreakpoints = {
  640: {
    slidesPerView: 2
  },
  992: {
    slidesPerView: 3
  }
};
const defaultSpaceBetween = 20;
const defaultSlidesPerView = 1;
const defaultAutoHeight = false;

const Swiper = ({
  children,
  breakpoints = defaultBreakpoints,
  spaceBetween = defaultSpaceBetween,
  slidesPerView = defaultSlidesPerView,
  autoHeight = defaultAutoHeight,
  className = ''
}) => {
  const [mounted, setMounted] = React.useState(false);
  const id = 'swiper-' + useId().replace(/:/g, '');
  const _breakpoints = { 0: { slidesPerView: 1 }, ...breakpoints };

  React.useLayoutEffect(() => {
    setMounted(true);
  }, []);

  if (mounted) {
    return (
      <div className={cn('relative w-100', className)}>
        <BaseSwiper
          breakpoints={_breakpoints}
          spaceBetween={spaceBetween}
          slidesPerView={slidesPerView}
          autoHeight={autoHeight}
          className={className}
          modules={[Pagination]}
          pagination={{ clickable: true }}
        >
          {React.Children.map(children, (child, index) => (
            <SwiperSlide key={index} className='!h-auto'>
              {child}
            </SwiperSlide>
          ))}
        </BaseSwiper>
      </div>
    );
  }

  const initialColsAndGap = (spaceBetween, slidesPerView) => {
    return `
          --gap: ${spaceBetween}px;
          --cols: repeat(${slidesPerView}, 1fr); 
      `;
  };

  const hideChildren = slidesPerView => {
    const header = Array.from({ length: slidesPerView })
      .map((_, index) => `.${id} .swiper-child-${index}`)
      .join(', ');

    return `${header} { display: block }`;
  };

  const _className = Object.entries(_breakpoints)
    .map(([key, value]) => {
      const { slidesPerView = 1, spaceBetween: gap } = value;
      return `
         @media (min-width: ${key}px) {
            .${id} { 
               ${initialColsAndGap(gap || spaceBetween, slidesPerView)}
            }
            
            ${hideChildren(slidesPerView)}
          }`;
    })
    .join(' ')
    .replace(/\s+/g, ' ');

  return (
    <>
      <style>{_className}</style>
      <div className={cn(`grid grid-cols-[var(--cols)] gap-[var(--gap)] overflow-clip ${id}`, className)}>
        {React.Children.map(children, (child, index) => (
          <div className={`hidden swiper-child-${index}`}>{child}</div>
        ))}
      </div>
    </>
  );
};

it would be nice if the swiper doesn't wait for the javascript to apply the breakpoints and uses native style instead to support server-side rendering behavior (ssr)

[mahmoudAcm]

refer to this for the final solution

[mitesh-avid-brio]

@mahmoudAcm thank you so much

[mahmoudAcm]

@mitesh-avid-brio you are welcome

[x0m4ek]

Good workaround,worked purfectly to me!
Thank you!