[Next.js] 데이터 패칭(Data fetching)

개념 설명

Next.js의 데이터 패칭은 React와 달리, 클라이언트 측에서만 데이터를 가져오는 것이 아닌 사전 렌더링(Pre-rendering) 과정에서 서버 혹은 빌드 시점에 데이터를 미리 가져와 HTML에 포함하는 방식.

• React의 한계 극복: 전통적인 React(CSR, Client-Side Rendering)는 사용자의 브라우저에 자바스크립트 파일이 다운로드된 후, 자바스크립트 실행을 통해 API 요청이 시작(FCP 이후). 이는 초기 로딩 속도 지연 및 SEO 문제 발생 가능.
• Next.js의 이점: Next.js는 사전 렌더링 시점에 데이터 패칭까지 미리 진행. 생성된 HTML 파일에는 이미 데이터가 채워진 상태로 제공되어, 데이터 요청 시점이 앞당겨짐과 동시에 사용자는 데이터를 즉시 확인 가능. 웹 성능 지표 개선에 매우 유리.

사용 상황 예시: 3가지 전략

Next.js는 데이터의 성격과 변경 빈도에 따라 데이터를 미리 가져오는 3가지 핵심 사전 렌더링 전략 제공.

1. 서버 사이드 렌더링 (SSR, Server-Side Rendering):

   • 사용: getServerSideProps 함수 사용.
   • 적합 상황: 사용자 요청이 들어올 매 순간 최신 데이터가 필요한 경우 (예: 실시간 주식 가격, 로그인 사용자 맞춤 대시보드).
   • 동작: 요청 시마다 서버에서 페이지 사전 렌더링 및 데이터 패칭 진행. 데이터 응답이 늦으면 해당 사용자 요청에 대한 응답 시간도 지연 가능.

2. 정적 사이트 생성 (SSG, Static Site Generation):

   • 사용: getStaticProps 함수 사용.
   • 적합 상황: 데이터 변경이 거의 없거나, 모든 사용자에게 동일한 내용을 제공하는 경우 (예: 블로그 포스트, 회사 소개 페이지, 마케팅 페이지).
   • 동작: 빌드 타임에 페이지를 미리 렌더링하고 데이터 패칭 완료. CDN에 캐싱되어 매우 빠른 성능 제공. 데이터가 늦게 오더라도 빌드 시점의 문제일 뿐, 사용자에게는 항상 빠르게 제공.

3. 증분 정적 재생성 (ISR, Incremental Static Regeneration):

   • 사용: getStaticProps 내 revalidate 옵션 사용.
   • 적합 상황: SSG처럼 빠르지만, 주기적으로 데이터 업데이트가 필요한 경우 (예: 자주 변경되지는 않지만 하루에 한 번 정도 업데이트되는 상품 목록).
   • 동작: 빌드 시점에 페이지 생성 후, 설정된 시간(revalidate 값)이 지나면 첫 사용자 요청에 의해 백그라운드에서 페이지 재생성.

기본 문법

데이터 패칭 함수는 페이지 컴포넌트 파일 내에서만 사용 가능하며, export 필수.

1. SSR: 요청 시마다 실행

export async function getServerSideProps(context) {
  // context에 요청 정보(req, res, query 등) 포함
  const res = await fetch(`API_ENDPOINT/data`);
  const data = await res.json();
  
  return {
    props: { data }, // 페이지 컴포넌트로 전달
  }
}

2. SSG/ISR: 빌드 시점 (ISR은 revalidate 추가)

export async function getStaticProps() {
  const res = await fetch(`API_ENDPOINT/data`);
  const data = await res.json();
  
  return {
    props: { data },
    // ISR 설정: 60초마다 재생성 시도
    // revalidate: 60 
  }
}

3. SSG: 동적 라우팅 시 모든 경로 사전 생성

export async function getStaticPaths() {
  // 사전 생성할 페이지의 모든 경로(paths) 지정
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: false, // paths에 없는 요청에 대한 처리 (true, false, 'blocking')
  }
}

자주 하는 실수

1. 클라이언트 측 로직 혼용: getServerSideProps나 getStaticProps 내부에서 브라우저 전용 API(예: window, document) 사용 시 에러 발생. 해당 함수는 서버나 빌드 환경에서 실행되기 때문.
2. 함수 위치 오류: getServerSideProps나 getStaticProps를 페이지 컴포넌트가 아닌 일반 컴포넌트에서 정의 시 무시되거나 오작동 유발. 반드시 페이지 레벨 컴포넌트 파일 내에서 export 필요.
3. 데이터 무거운 SSR 사용: 데이터가 자주 변경되지 않음에도 SSR만 고집하여 매 요청마다 서버 부하 및 느린 응답 발생. 데이터 성격에 맞춰 SSG/ISR을 최대한 활용 필요.
4. getStaticPaths의 fallback 미고려: 동적 SSG(예: /posts/[id])에서 getStaticPaths 사용 시, paths에 명시되지 않은 경로에 대한 처리(fallback: true | 'blocking')를 설정하지 않으면 빌드 후 해당 페이지 접속 불가.

핵심 요약

• 사전 렌더링: Next.js는 데이터 패칭을 사전 렌더링 시점으로 앞당겨 초기 로딩 속도 및 SEO 성능 개선.
• 세 가지 전략: 데이터 성격에 따라 SSR (매 요청 시), SSG (빌드 시), ISR (주기적 재생성) 중 선택 사용.
• 함수 위치: 데이터 패칭 함수는 페이지 컴포넌트 내에서만 export하여 사용 가능.

출처: 한 입 크기로 잘라먹는 Next.js(v15)