Next.js의 데이터 페칭 방식

Pages Router

페이지 라우터에서는 사전 렌더링 과정 중 Next.js 서버 사이드에서 다른 백엔드 서버나 데이터베이스로부터 데이터를 페칭한다.

작동 원리

페이지 역할을 하는 파일 안에 서버 측에서만 실행되는 특수 함수를 사용하여 데이터를 직접 페칭하며, 페칭한 데이터는 페이지 컴포넌트에 props로 전달한다.

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

  return {
    props: { data },
  }
}

export default function Page({ data }) {
  return <div>{data}</div>;
}

특수 함수와 렌더링 방식

Next.js 페이지 라우터의 렌더링 방식

• getServerSideProps: SSR
• getStaticProps: SSR, ISR
• getStaticPaths: 동적 경로를 갖는 페이지의 정적 생성

 

이유와 한계점

• 페이지 라우터에는 서버 컴포넌트 개념이 없어 모든 컴포넌트가 클라이언트 컴포넌트로 동작
• 컴포넌트가 서버와 브라우저에서 각각 한 번씩 실행됨
• 컴포넌트 내 데이터 페칭 로직은 서버와 브라우저 양쪽에서 실행되므로, 서버 측에서만 실행하기 위해 특수 함수가 필요
• 데이터가 페이지 컴포넌트에만 전달되어 하위 컴포넌트로의 전달이 복잡해짐 (props drilling 또는 Context API 사용 필요)

 

App Router

앱 라우터에서는 서버 컴포넌트의 도입으로 데이터 페칭 방식이 크게 개선되었다.

작동 원리

서버 컴포넌트 내에서 직접 데이터 페칭이 가능하기 때문에 특수 함수가 필요하지 않으며, 컴포넌트 내에서 async/await 사용이 가능하다.

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

  return <div>{data}</div>;
}

 

장점과 개선사항

• 서버 컴포넌트는 서버에서만 동작하므로 데이터 페칭 로직이 클라이언트에 노출되지 않음
• 컴포넌트 내부에서 직접 데이터를 페칭하고 사용할 수 있어 구조가 단순해짐
• 페이지 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 필요가 없어짐
• 복잡한 컴포넌트 구조에서도 효율적인 데이터 페칭 구현 가능