[공식문서] NextJS - Pre-rendering and Data Fetching #9

요청 시간에 데이터 가져오기

빌드 시간이 아닌 요청 시간에 데이터를 가져와야 하는 경우 Server-side Rendering을 시도할 수 있습니다.

Next .js 공식문서 - 데이터를 가져오는 Server-side Rendering

서버 사이드 렌더링을 사용하려면 페이지에서 getStaticProps 대신 getServerSideProps를 내보내야(export) 합니다.

getServerSideProps 사용

다음은 getServerSideProps의 시작 코드입니다. 우리의 블로그 예제에는 필요하지 않으므로 구현하지 않겠습니다.

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

 

왜냐하면 getServerSideProps는 요청 시간에 호출되므로 매개변수(context)에는 요청에 특화된 매개변수가 포함됩니다.

 

getServerSideProps는 요청마다 결과를 계산해야 하므로 첫 번째 바이트의 시간(TTFB)은 getStaticProps보다 느릴 것입니다. 또한 결과를 CDN에 캐시하려면 추가 구성이 필요합니다.

 

클라이언트 사이드 렌더링

데이터를 사전 렌더링하지 않아도 되는 경우 다음 전략인 클라이언트 사이드 렌더링이라는 전략을 사용할 수도 있습니다.

• 외부 데이터가 필요하지 않은 페이지의 일부를 정적으로 생성(사전 렌더링)합니다.
• 페이지가 로드되면 JavaScript를 사용하여 클라이언트에서 외부 데이터를 가져와 나머지 부분을 채웁니다.

Next .js 공식문서 - Client-side Rendering 작동 방식

 

이 접근 방식은 사용자 대시보드 페이지와 같은 경우에 잘 작동합니다. 대시보드는 개인 및 사용자별 페이지이므로 SEO가 관련되지 않으며 페이지를 사전 렌더링할 필요가 없습니다. 데이터가 자주 업데이트되어 요청 시간 데이터 가져오기가 필요합니다.

 

SWR

Next.js 팀은 데이터 가져오기용으로 SWR이라는 React 훅을 만들었습니다. 클라이언트 측에서 데이터를 가져올 때 권장되는 방법입니다. SWR은 캐싱, 재검증, 포커스 추적, 간격별 다시 가져오기 등을 처리합니다. 여기에 대한 자세한 내용은 다루지 않겠지만 사용 예시는 다음과 같습니다.

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 문서에서 더 자세한 내용을 확인하세요.

 

여기까지입니다!

다음 레슨에서는 동적 경로(dynamic routes)를 사용하여 각 블로그 게시물용 페이지를 생성합니다.

 

getStaticProps와 getServerSideProps에 대한 자세한 정보는 데이터 가져오기 문서에서 확인할 수 있습니다.