Next.js - getServerSideProps 공식문서 번역

2022/11/09

n°25

category : Next.js

학습 목적을 위해 Next.js의 getServerSideProps 공식문서를 번역하였습니다. 오타, 의역이 있을 수 있습니다. leetekwoo@gmail.com으로 피드백 보내주시면 감사하겠습니다.

---

getServerSideProps

페이지로부터 getServerSideProps(Server-Side Rendering)라는 이름의 함수를 export 한다면, Next.js는 매번 요청마다 이 페이지를 getServerSideProps 함수가 반환하는 데이터를 사용하여 사전 렌더링(pre-render)할 것입니다.

export async function getServerSideProps(context) {
  return {
    props: {}, // 이 부분은 페이지 컴포넌트의 props로 전달됩니다.
  }
}

렌더링 타입과 상관없이 모든 props는 페이지 컴포넌트로 전달되어 클라이언트의 초기 HTML에서 보여질 수 있습니다. 이는 페이지가 올바르게 hydrate 되도록 하기 위함입니다. 클라이언트에서 보여지면 안되는 민감한 정보를 props로 전달하지 않도록 주의하십시오.

When does getServerSideProps run

getServerSideProps는 언제 실행될까

getServerSideProps는 서버사이드에서만 실행되며, 브라우저에서 절대 실행되지 않습니다. 만일 페이지가 getServerSideProps를 사용한다면 :

사용자가 이 페이지를 직접 요청할 때, getServerSideProps는 요청 시 실행되며, 이 페이지는 반환된 props로 사전 렌더링될 것입니다.
사용자가 next/link나 next/router를 이용해 클라이언트 사이드에서 페이지 전환으로 이 페이지를 요청할 때, Next.js는 getServerSideProps를 실행하는 api 요청을 서버에 보냅니다.

getServerSideProps는 이 페이지를 렌더링하는데 사용되는 JSON을 반환합니다. 이 모든 작업은 Next.js가 자동적으로 처리할 것이기 때문에 getServerSideProps함수를 정의했다면 추가적으로 할 작업은 없습니다. 이 툴을 사용하여 클라이언트 사이드의 번들에서 삭제되었는지 검증할 수 있습니다.

getServerSideProps는 오직 “page” 경로에서만 export 될 수 있습니다. page 파일이 아닌 곳에서는 export 할 수 없습니다.

getServerSdieProps는 반드시 독립된 함수로 export 되어야 합니다. 만일 페이지 컴포넌트의 property로 getServerSideProps를 더한다면 작동하지 않을 것입니다.

When should I use getServerSideProps

언제 getServerSideProps를 사용해야할까

getServerSideProps는 요청 시 데이터를 가져와야 하는 페이지를 렌더링해야 하는 경우에 사용해야 합니다. 이는 데이터의 특성이나 요청의 속성 (인증 헤더나 지리적 위치geo location) 때문일 수 있습니다. getServerSideProps를 사용하는 페이지는 요청 시 서버사이드에서 렌더링되며, cache-control 헤더가 설정될 때만 캐싱될 수 있습니다.

만일 요청하는 동안 렌더링을 할 필요가 없다면, client side에서 데이터를 가져오거나 getStaticProps를 사용하십시오.

getServerSideProps or API Routes

getServerSideProps 혹은 API Routes (page/api 경로)

서버에서 데이터를 가져오기 위해 getServerSideProps에서 API 경로에 접근하여 그 api를 호출할 수는 있습니다. 하지만 이는 불필요하고 비효율적인 접근입니다. getServerSideProps와 API Routes 모두 서버에서 작동하기 때문에 과도한 요청을 일으키기 때문입니다.

다음 예시를 봅시다. API Route는 CMS로부터 데이터를 가져오기 위해 사용됩니다. 그러고 나서 API Route는 직접getServerSideProps로부터 직접 호출됩니다. 이 절차는 추가적인 호출을 발생시키는데, 이는 성능 저하로 이어집니다. 대신, API Route 내부에서 사용된 로직을 getServerSideProps로 직접 import하십시오.

Fetching data on the client side

클라이언트 사이드에서 데이터 가져오기

만일 페이지가 자주 업데이트되는 데이터를 포함하고 이를 프리 렌더링할 필요가 없다면 클라이언트 사이드에서 데이터를 가져올 수 있습니다. 이 예시는 사용자 특정적인 데이터입니다:

먼저 데이터가 없는 채로 즉시 페이지를 보여줍니다. 페이지의 일부는 정적 생성(Static Generation)을 통해 프리 렌더링될 수 있습니다. 그 이후 없는 데이터는 로딩 상태(의 ui)를 보여줄 수 있습니다.
그 이후에 클라이언트 사이드에서 데이터를 가져오고 준비가 되었을 때 보여줍니다.

예를 들면 이러한 접근은 사용자 대시보드 페이지에서 잘 작동할 수 있습니다. 대시보드는 개인용이고 유저 특정적인 페이지이며, SEO가 중요하지 않고, 프리 렌더링 될 필요가 없기 때문입니다. 데이터를 가져오는데 요청 시간이 필요한 이 데이터는 자주 업데이트 됩니다.

Using getServerSideProps to fetch data at request time

getServerSideProps를 이용하여 요청 시 데이터 가져오기

다음 예시는 요청 시 데이터를 가져와서 그 결과를 프리 렌더링하는 방법을 보여줍니다.

function Page({ data }) {
  // 데이터 렌더..
}

// 아래의 함수는 매 요청마다 호출됩니다.
export async function getServerSideProps() {
  // 외부 API에서 데이터를 가져옵니다.
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // props로 데이터를 전달합니다.
  return { props: { data } }
}

export default Page

Caching with Server-Side Rendering (SSR)

SSR로 캐싱하기

동적 응답을 캐싱하기 위해서 getServerSideProps 내부에서 캐싱 헤더(Cache-Control)를 사용할 수 있습니다. 예를 들어 stale-while-revalidate를 사용할 수 있습니다.

/* 이 값은 10초 동안 fresh하다고 여겨집니다. (s-maxage=10). 만일 요청이 그 다음 10초 이내에 반복된다면, 이전에 캐싱된 값은 여전히 fresh할 것입니다. 만일 요청이 59초 이내로 반복된다면, 캐싱된 값은 stale하지만 여전히 렌더링될 것입니다. (stale-while-revalidate=59).*/
/* 백그라운드에서새로운 값으로 캐싱을 채우기 위해 재검증 요청(revalidation request)이 이루어집니다. 만일 페이지를 새로고침한다면 이 새로운 값을 볼 수 있습니다. */

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

  return {
    props: {},
  }
}

캐싱에 대해 더 배워봅시다 caching.****

Does getServerSideProps render an error page

getServerSideProps는 에러 페이지를 렌더하는가

만일 에러가 getServerSideProps 내부에서 throw된다면 pages/500.js가 보여질 것입니다. 만드는 방법에 대한 자세한 사항은 500 page의 공식 문서에서 확인하세요. 개발 중에 이 파일은 사용되지 않으며, dev 오버레이가 대신 보여질 것입니다.