getServerSideProps를 컴포넌트에서 사용할 수 있나요?

Question

개발 공부하는 학생입니다. next.js를 공부하는 중에 getServerSideProps를 구현했는데 이게 최상위 파일에서만 되고 컴포넌트에서는 호출이 안되는것 같아요. 혹시 어떻게 사용하는지 알려주실분 계신가요?

김석현 · Accepted Answer

안녕하세요!

아래 Next.js 공식 문서를 보시면 사용법이 잘 나와있습니다.
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

getServerSideProps는 페이지 파일 안에서만 사용할 수 있다는 얘기가 나오구요,
getServerSideProps can only be exported from a page. You can’t export it from non-page files.

기본적으로는 아래와 같이 사용하시면 됩니다.
function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

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

export default Page

사용법을 모를 땐 항상 먼저 공식 문서를 보시는 게 가장 효과적이에요!

마찬가지로 혹시라도 React Query를 통해 Next.js SSR을 구성하시는 경우에는 아래 React Query의 공식 문서를 참고해보세요!
https://tanstack.com/query/latest/docs/react/guides/ssr