make swiper render on server

Question

I'm using NextJS and i have a component that contains swiper, the swiper need interactions (JavaScript) to work such as button clicks..etc, is there any chance to make this component as server component? (run on server) and if no, does that make impact on SEO and performance ?

"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/effect-fade";
import "swiper/css/pagination";
import { EffectFade, Navigation, Pagination, Autoplay } from "swiper/modules";
import { useTranslations } from "next-intl";
import styles from "./page.module.css";
const Features = () => {
  const t = useTranslations("HomePage");
  const swiperSlides = [
    {
      class: `...`,
      heading: ...,
      par: ...,
    },
   ...
  ];
  return (
    <div>
      <Swiper
        effect="fade"
        speed="2000"
        navigation={true}
        pagination={{
          clickable: true,
        }}
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
        }}
        modules={[EffectFade, Navigation, Pagination, Autoplay]}
        className="mySwiper"
      >
        {swiperSlides.map((swiperSlide) => (
          <SwiperSlide key={swiperSlide.heading}>
             ...
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default Features;