NextJs_otsu/pages/ssr.tsx

import { GetServerSideProps } from 'next'
import React, { FC, useEffect } from 'react'
import { fetchGuiters } from '../lib/strapi'
import { Guiter, GuiterResponse } from '../styles/type/guiters'

const Ssr = ({ data }: GuiterResponse) => {
  return (
    <div>
      {data.map((guiter: Guiter) => {
        return <div key={guiter.id}>{guiter.attributes.name}</div>
      })}
    </div>
  )
}

export const getServerSideProps: GetServerSideProps = async () => {
  const fetchData = await fetchGuiters()
  const data: Guiter[] = fetchData.data
  return {
    props: {
      data: data,
    },
  }
}

export default Ssr