Server-side Rendering (SSR)

"SSR" 또는 "동적 렌더링"이라고도 불립니다.

페이지가 서버 사이드 렌더링을 사용하는 경우, 페이지 HTML은 각 요청 시마다 생성됩니다.

페이지에 서버 사이드 렌더링을 사용하려면, getServerSideProps라는 async 함수를 export 해야 합니다. 이 함수는 매 요청마다 서버에 의해 호출됩니다.

예를 들어, 페이지에서 자주 업데이트되는 데이터(외부에서 가져온 데이터)를 미리 렌더링해야 한다고 가정해봅시다. 이 데이터를 가져와 아래와 같이 Page에 전달하는 getServerSideProps를 작성할 수 있습니다:

export default function Page({ data }) {
  // 데이터를 렌더링합니다...
}
 
// 이 함수는 매 요청마다 호출됩니다.
export async function getServerSideProps() {
  // 외부 API에서 데이터를 가져옵니다.
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // props를 통해 페이지에 데이터를 전달합니다.
  return { props: { data } }
}

보시다시피, getServerSideProps는 getStaticProps와 유사하지만, 차이점은 getServerSideProps가 빌드 타임이 아닌 각 요청마다 실행된다는 점입니다.

getServerSideProps가 어떻게 작동하는지 더 알고 싶다면, Data Fetching documentation을 확인하세요.

Middleware Static Site Generation