close

API에서 데이터 가져오기 Next.js: getStaticProps 및 getServerSideProps 활용

애플리케이션을 개발하는 과정에서 Next.js API에서 데이터를 가져오는 것은 동적 콘텐츠를 표시하는 데 중요한 측면입니다. getStaticProps 이 문서에서는 를 사용하여 빌드 프로세스 중에 정적 데이터를 가져오는 방법과 getServerSideProps 각 요청에 대해 를 사용하여 API에서 데이터를 가져오는 방법을 안내합니다 .

getStaticProps 사용

getStaticProps Next.js 빌드 프로세스 중에 정적 데이터 가져오기를 지원하는 내장 메서드입니다. 이를 통해 애플리케이션이 배포되기 전에 미리 렌더링되는 쿼리된 데이터로 정적 페이지를 생성할 수 있습니다. 다음은 사용의 기본 예입니다 getStaticProps.

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

위의 예에서는 fetch API에서 데이터를 쿼리하고 해당 데이터를 props로 반환하는 데 사용합니다.

getServerSideProps 사용

getServerSideProps Next.js 각 요청에 대해 API에서 데이터를 가져올 수 있는 또 다른 방법입니다. 이렇게 하면 콘텐츠가 항상 최신 상태이고 동적으로 유지됩니다. 다음은 사용 예입니다 getServerSideProps.

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

이 getServerSideProps 메소드는 페이지에 요청이 이루어질 때마다 API에서 데이터를 쿼리합니다.

결론

이 섹션에서는 애플리케이션의 API에서 데이터를 효율적으로 가져오는 방법을 배웠습니다 Next.js. getStaticProps 및 를 사용하면 getServerSideProps 응용 프로그램에서 정적 콘텐츠와 동적 콘텐츠를 모두 유연하게 표시할 수 있습니다.