[Next.js] 서버 사이드 렌더링(SSR)

데이터를 항상 최신으로 유지해야 하고, 페이지에 동적인 데이터를 표시해야하는 경우에는 정적 사이트 생성(SSG)보다 서버 사이드 렌더링(SSR)을 사용하는 게 더 적합하다.

Server-side Rendering (SSR)

getServerSideProps()

만약, 외부 API에서 가져오는 자주 업데이트되는 데이터를 가진 페이지를 사전 렌더링해야 한다면, getServerSideProps()를 이용해 데이터를 가져와서 페이지에 다음과 같이 전달할 수 있다.

export default function Page({ data }) { // 데이터를 props로 받는다.
  // ...
}
 
// 아래의 getServerSideProps 함수는 매 요청(request)마다 호출된다.
export async function getServerSideProps() {
  const res = await fetch(`https://.../data`); // 외부 API로부터 데이터를 가져온다.
  const data = await res.json();

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

getServerSideProps()는 getStaticProps()와 유사하지만, 빌드 시간이 아니라 모든 요청에서 실행된다는 점에서 차이가 있다.

context

• getServerSideProps()는 매개변수로 context 객체를 전달받아 요청 객체 / 응답 객체에 접근할 수도 있다.

export async function getServerSideProps(context) {
  const req = context.req; // 요청 객체 - 인증(authentication)이 필요한 경우
  const res = context.res; // 응답 객체
  
  //...
  return { props: { data } };
}

서버 사이드 렌더링을 사용하면 좋은 경우

1. 요청 객체에 접근해야 하는 경우

• 사용자의 인증 정보, 쿠키, 세션 등의 요청 관련 정보를 필요로 하는 페이지
• 요청에 따라 콘텐츠가 변경되어야 하는 페이지

2. 데이터가 자주 업데이트되는 경우

• 데이터가 빈번하게 변경되는 경우
  ➡️ 서버 사이드 렌더링을 통해 항상 최신 데이터를 적용할 수 있다.