[Docs] 서버 사이드 렌더링

빌드 시점이 아닌 요청 시점에 데이터를 페치해야 하는 경우 서버 사이드 렌더링을 사용할 수 있다.

페이지에서 getStaticProps 대신 getServerSideProps를 익스포트 하면 된다.

 

 

getServerSideProps 함수

다음은 getServerSideProps의 스타터 코드.

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}

getServerSideProps는 요청 시에 호출되므로 매개변수(context)에는 요청 관련 매개변수가 포함된다.

주의할 점은 요청 시점에 데이터 페치가 필수인 페이지를 프리렌더링 하는 경우에만 getServerSideProps를 사용한다.

서버가 모든 요청에 대해 결과를 계산해야 하고, 추가 설정 없이는 CDN에서 결과를 캐시 할 수 없기 때문이다.

첫 번째 바이트까지의 시간(Time to first byte, TTFB)이 getStaticProps보다 느리다.

 

 

 

클라이언트 사이드 렌더링(Client-side Rendering)
데이터를 프리 렌더링 할 필요가 없는 경우, 클라이언트 사이드 렌더링을 사용하는 것도 한 방법이다.

외부 데이터가 필요하지 않은 페이지 일부를 정적으로 생성(프리 렌더링)하고, 페이지가 로드되면 자바스크립트를 사용해 클라이언트에서 외부 데이터를 페치해와서 나머지 부분을 채우는 방식이다.

 

 

이 접근 방식은 예를 들면 사용자 대시보드 페이지에 적합하다.

대시보드는 비공개 사용자 전용 페이지 이므로 SEO와 관련이 없어서 페이지를 미리 렌더링할 필요가 없다.

그리고 데이터가 자주 업데이트되므로 매 요청 시마다 데이터를 페치해야 한다.

 

 

SWR
Next.js 개발팀은 SWR이라는 데이터 페칭을 위한 React 훅을 만들었다.

클라이언트 사이드에서 데이터를 페치 하는 경우 활용을 적극 권장한다고 한다.

캐싱, 재검증, 포커스 추적, 간격에 따른 리페칭 등을 처리한다.

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetch);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

 

자세한 내용은 SWR 문서를 확인

 

 

Quick Review: When should you use Client-side rendering? Private, user-specific pages where SEO is not relevant