[Next.js] Data Fetching > getServerSideProps

원본: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

---

어떤 페이지에서 getServerSideProps라는 함수를 export한다면 Next.js는 해당 페이지를 요청할 때마다 getServerSideProps에서 리턴한 데이터를 사용하여 pre-rendering을 진행할 것이다.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

getServerSideProps 실행 시점

getServerSideProps는 server-side에서만 실행되고 절대 브라우저에서는 실행되지 않는다. getServerSideProps가 실행되는 경우는 다음과 같다.

• 페이지를 직접 요청하면 getServerSideProps가 실행되고 페이지는 여기서 반환된 props를 사용하여 pre-render된다.
• next/link나 next/router를 통해서 client-side에서 페이지 이동이 발생한다면 Next.js는 서버로 API 요청을 보내고 getServerSideProps를 실행하게 된다.

getServerSideProps는 JSON 객체를 반환한다.

getServerSideProps는 page에서만 export 할 수 있다. page가 아닌 일반 파일에서는 export 할 수 없다.

getServerSideProps는 독립 실행 함수로 작성해야 한다. 만약 getServerSideProps를 page 컴포넌트의 일부로 포함시킨다면 동작하지 않는다.

getServerSideProps와 함께 사용할 수 있는 props와 parameter는 여기서 확인할 수 있다.

getServerSideProps를 사용해야 할 경우

요청 시 데이터를 가져와야 하는 페이지를 렌더링하는 경우에만 getServerSideProps를 사용해야 한다. 이 경우 페이지는 서버 측에서 렌더링되며 cache-control header가 구성된 경우에만 캐시될 수 있다.

요청하는 동안 데이터를 렌더링할 필요가 없는 경우 client-side 또는 getStaticProps에서 데이터를 가져오는 것이 좋다.

getServerSideProps에서 API 경로를 가져와서 사용하고 싶을 경우 이는 서버에서 실행 중인 getServerSideProps 및 API 경로로 인해 추가 요청이 발생하므로 불필요하고 비효율적인 접근 방식이므로 하지 않는 것이 좋다.

getServerSideProps 사용 예시

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

SSR에서 캐싱하기

getServerSideProps 내부의 Cache-Control 헤더를 사용하여 동적 응답을 캐싱할 수 있다.

export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

오류

getServerSideProps 내부에서 오류가 발생하면 pages/500.js 파일이 표시된다. 개발 중에는 이 파일이 사용되지 않고 dev overlay가 대신 표시된다.