I want to convert this component into server rendered but making request from the client result in slight delay for the club names to be displayed

"use client";
import { fetcher } from "@/lib/utils/fetcher";
import axios from "axios";
import useSWR from "swr";

const Clubs = () => {
  // const data = await clubList();
  // console.log("DATA FETCHED ON the server: ", data);
  const { data } = useSWR("/api/clubmembership", fetcher);
  console.log(data);

  return (
    <div className="flex items-center justify-center  bg-yellow-200">
      <div className="max-w-[1170px] flex flex-col items-center w-full">
        <div>List of Clubs</div>
        <div className="flex flex-col gap-4 items-center  w-full grow">
          {data?.map((item, key) => {
            return (
              <div className=" bg-red-200  p-y-[20px] w-full" key={key}>
                <h2>{item.club.clubName}</h2>
                <div></div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
export default Clubs;