Next.js

Next.js Data Fetching

Next.js Data Fetching
Next.js는 현대적인 웹 개발을 위한 React 프레임워크다. Next.js 의 기능 중 getStaticProps, getStaticPaths, 그리고 getServerSideProps는 데이터를 불러오는 방식에 있어 핵심적인 API를 제공한다. 이 기능들을 적절하게 사용하면 사이트의 성능, SEO, 그리고 사용자 경험을 크게 향상시킬 수 있다.

getStaticProps

getStaticProps는 빌드 시에 데이터를 서버로부터 불러와 페이지를 미리 생성하는 정적 생성(Static Generation)을 위한 함수다. 이 함수는 페이지의 props로 데이터를 전달하고, 주로 아래의 경우에 사용된다.
  • 페이지에서 필요한 데이터가 빌드 시에 사용 가능할 때
  • 데이터를 Headless CMS에서 가져올 때
  • 모든 사용자에게 같은 데이터를 보여줄 때
  • SEO를 위해 빠른 페이지 로딩 속도가 필요할 때
  • 공식 문서에는 명시되어 있지 않지만, Node.js의 파일 시스템이나 경로 같은 API를 사용해야 할 때
export async function getStaticProps(context) {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return {
    props: {
      data,
    },
  };
}ㅇ

getStaticPaths

  • getStaticPaths는 동적 라우트를 가진 페이지에서 어떤 경로(path)가 정적 생성될지 정의한다. getStaticProps와 함께 사용되며, 주로 아래의 경우에 활용된다.
  • 동적 라우팅(Dynamic Routing)을 사용할 때
  • 미리 정적으로 생성할 페이지 경로를 지정할 때
  • fallback 옵션에 따라, 미리 생성되지 않은 경로의 처리 방법을 결정
export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: false, // 혹은 true 또는 'blocking'
  };
}

getServerSideProps

  • getServerSideProps는 서버 사이드 렌더링(Server Side Rendering)을 위한 함수다. 각 요청에 따라 서버에서 데이터를 불러와 페이지를 생성한다. 주로 다음과 같은 경우에 사용된다.
  • 요청 시마다 데이터가 달라지는 페이지에 사용
  • 사용자의 요청에 따라 실시간으로 데이터를 업데이트해야 할 때
  • 사용자별 맞춤형 콘텐츠를 제공해야 할 때
export async function getServerSideProps(context) {
  const response = await fetch(`https://example.com/data?user=${context.params.id}`);
  const data = await response.json();
  return {
    props: {
      data,
    },
  };
}

Fallback 옵션의 이해

  • getStaticPaths에서 사용되는 fallback 옵션은 세 가지 값을 가질 수 있다: false, true, blocking.
  • fallback: false: 지정된 경로 외의 모든 경로는 404 페이지로 연결된다.
  • fallback: true: 지정되지 않은 경로에 대한 첫 요청 시, Next.js는 빈 페이지를 먼저 로드하고, 백그라운드에서 정적 페이지를 생성하여 캐싱 후 이후 요청부터 제공한다.
  • fallback: 'blocking': 지정되지 않은 경로에 대한 요청 시, 서버는 정적 페이지를 생성할 때까지 사용자에게 응답을 지연시킨 후, 생성된 페이지를 제공한다. 이후 요청에 대해서는 캐싱된 페이지를 바로 제공한다.