[Next.js] getStaticProps와 getServerSideProps

Next.js는 React 기반의 서버사이드 렌더링 프레임워크로, 페이지를 서버에서 렌더링하여 초기 로딩 속도를 개선할 수 있습니다. 이때 getStaticProps와 getServerSideProps는 페이지에서 필요한 데이터를 서버에서 미리 가져와 렌더링하는 방식을 제공합니다.

getStaticProps

getStaticProps는 빌드 타임에 호출되어 페이지에 필요한 데이터를 미리 가져옵니다. 이후 브라우저에서 해당 페이지를 요청할 때는 서버에서 렌더링된 페이지가 캐시되어 바로 보여지게 됩니다. 이를 사용하면 초기 로딩 속도를 개선할 수 있습니다.

예시 코드:

export async function getStaticProps() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return {
    props: {
      data
    }
  }
}

getServerSideProps

getServerSideProps는 런타임에 호출되어 페이지에 필요한 데이터를 가져옵니다. 이후 브라우저에서 해당 페이지를 요청할 때마다 서버에서 렌더링된 페이지를 반환합니다. 이를 사용하면 항상 최신 데이터를 보여줄 수 있습니다.

예시 코드:

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data?id=${context.params.id}`);
  const data = await res.json();

  return {
    props: {
      data
    }
  }
}

위 예시 코드에서 context.params.id는 동적 라우팅을 사용하는 경우 해당 페이지의 파라미터를 가져오는 방법입니다.

결론

getStaticProps와 getServerSideProps는 Next.js에서 데이터를 미리 가져와 페이지를 렌더링하는 방식을 제공합니다. 빌드 타임에 데이터를 가져오는 getStaticProps와 런타임에 데이터를 가져오는 getServerSideProps를 적절하게 사용하여 초기 로딩 속도와 최신 데이터 보여주기를 개선할 수 있습니다.