getServerSideProps

getServerSideProps는 Next.js에서 제공하는 서버 사이드 렌더링(SSR)에 사용되는 함수입니다. 이 함수를 사용하면 각 요청마다 데이터를 가져와서 페이지를 렌더링할 수 있습니다. 이는 빌드 시간에 데이터를 가져올 수 없거나, 실시간으로 업데이트되는 데이터를 처리해야 하는 경우에 유용합니다.

getServerSideProps는 서버에서만 실행되며, 클라이언트 측 코드로 전달되지 않습니다. 따라서 이 함수 내에서 직접 데이터베이스에 접근하거나 비밀 키를 사용하는 등의 작업을 안전하게 수행할 수 있습니다.

다음은 getServerSideProps의 사용 예시입니다:

export async function getServerSideProps(context) {
  // fetch the data
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default function Page({ data }) {
  // Render data...
  return <div>{data}</div>
}

위 코드에서 getServerSideProps 함수는 외부 API에서 데이터를 가져옵니다. 이 데이터는 페이지 컴포넌트에 props로 전달되며, 각 요청마다 이 함수가 실행되어 페이지가 렌더링됩니다.

getServerSideProps는 각 요청에 대해 서버에서 페이지를 생성하므로, 페이지에 실시간 데이터가 필요한 경우에만 사용해야 합니다. 모든 요청에 대해 페이지를 생성하는 것은 getStaticProps를 사용하여 빌드 시에 페이지를 사전에 생성하는 것보다 더 많은 서버 자원을 사용할 수 있습니다. 따라서 getServerSideProps를 사용할지 getStaticProps를 사용할지는 페이지의 요구사항과 데이터의 특성에 따라 결정해야 합니다.