new-hp/pages/ssr.tsx

import React, { FC } from "react";
import { fetchGuitars } from "../lib/strapi";
import { GetServerSideProps } from "next";
import { Guitar, GuitarResponse } from "../type/guitars";

const Ssr: FC<GuitarResponse> = ({ guitars }) => {
  return (
    <div>
      {guitars.map((guitar: Guitar) => {
        return <div key={guitar.id}>{guitar.attributes.name}</div>;
      })}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  const guitars = await fetchGuitars();
  return {
    props: {
      guitars,
    },
  };
};

export default Ssr;