Next.js에서 데이터 패칭 방법은?

Next.js에서 페이지가 로드될 때 또는 특정 이벤트 발생 시 데이터를 패칭하는 방법에는 여러 가지가 있습니다. 예를 들어, getStaticProps와 getServerSideProps는 각각 정적 생성과 서버 사이드 렌더링을 위한 함수입니다. 이 함수를 활용하여 API에서 데이터를 가져올 수 있습니다. 아래는 getStaticProps를 사용한 기본적인 예제입니다:

이 외에도 클라이언트 사이드에서 데이터를 가져오는 방법이나, SWR 라이브러리를 사용하는 방법이 있습니다. 이러한 다양한 데이터 패칭 기법들 중에서 어떤 것이 적절한지 선택해야 합니다.

JAVASCRIPT

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

  return {
    props: { data }, // 이 데이터는 페이지 컴포넌트에 props로 전달됩니다.
  };  
}

답변

getServerSideProps getInitialProps getStaticProps getStaticPaths

로그인 후 제출하기