데이터 페칭 - App Router

Next.js의 패러다임이 App Router로 넘어가면서 가장 큰 변화를 겪은 부분 중 하나가 바로 데이터 페칭 방식이다.

Page Router 방식

Page Router에서는 데이터 페칭이 페이지 단위에서 이루어졌다.
대표적인 방식은 다음 세 가지였다.

tsx

// 1. SSR (Server Side Rendering)
export async function getServerSideProps() {
  return { props: { data: ... } };
}

// 2. SSG (Static Site Generation)
export async function getStaticProps() {
  return { props: { data: ... } };
}

// 3. Dynamic SSG (동적 경로 생성)
export async function getStaticPaths(){
  return {paths:[...], fallback:...}
}

모든 컴포넌트가 클라이언트 컴포넌트로 동작했기 때문에, 서버에서 데이터를 미리 가져오려면 위와 같은 약속된 함수를 통해서만 가능했다.

데이터는 반드시 페이지 레벨에서 가져와야 했고
가져온 데이터를 props로 하위 컴포넌트에 전달해야 했다.

즉, 페이지 → props → 컴포넌트라는 흐름이 강제되었다.

왜 이런 구조였을까?

Page Router에서는 모든 컴포넌트가 기본적으로 클라이언트 컴포넌트처럼 동작했기 때문이다.
페이지 컴포넌트 역시 브라우저에서 한 번 더 실행되었고, 컴포넌트 내부에 직접 데이터 페칭 로직을 작성하면 실행 환경 문제가 발생할 수 있었다.
결국 Next.js는 안전한 실행 모델을 위해 데이터 페칭을 getServerSideProps, getStaticProps 같은 별도 함수로 분리했다.

App Router 방식

App Router의 핵심 철학은 데이터는 필요한 곳에서 직접 불러와라(Fetching data where it's needed)이다.

이제 컴포넌트 자체가 서버 컴포넌트(Server Components)가 될 수 있으므로, 복잡한 설정 함수 없이 일반 비동기 함수(async/await)처럼 코드를 작성할 수 있다.

tsx

// 서버 컴포넌트는 그 자체로 비동기 함수(async)가 될 수 있다.
export async function Page(props) {
  // 컴포넌트 내부에서 직접 await로 데이터를 페칭한다.
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return <div>... </div>;
}

이제 서버 컴포넌트는 그 자체로 비동기 함수가 될 수 있으며, 컴포넌트 내부에서 직접 async / await를 사용할 수 있다.

주요 변경 포인트

컴포넌트 레벨 데이터 페칭: 서버 컴포넌트는 브라우저에서 실행되지 않는다.
- 따라서 async / await 자유롭게 사용 가능
- 컴포넌트 내부 fetch 자연스럽게 작성 가능
  이제 컴포넌트 자체가 데이터 페칭 단위가 된다.
예약 함수 제거: 더 이상 다음 함수들을 사용할 필요가 없다.
- getServerSideProps
- getStaticProps
- getStaticPaths
  데이터 페칭 로직이 API가 아닌 일반 JavaScript 비동기 코드로 통합되었다.
fetch 확장 & 자동 최적화 : App Router에서의 fetch는 단순한 Web API가 아니다. Next.js가 fetch를 확장하여 Request Memoization, 자동으로 데이터 캐싱(Caching) 및 재검증(Revalidation)을 자동으로 처리한다.
즉, 여러 컴포넌트에서 fetch를 호출하더라도 불필요한 중복 요청이 발생하지 않도록 최적화된다.

요약

구분	Page Router	App Router
데이터 페칭 방식	getServerSideProps / getStaticProps	컴포넌트 내 async/await
데이터 위치	페이지 레벨 중심	필요한 컴포넌트 어디서든
실행 모델	서버 + 클라이언트	서버 컴포넌트 기본
코드 구조	데이터 로직 분리 필요	UI와 함께 배치 가능

App Router는 데이터 페칭을 페이지 개념에서 컴포넌트 개념으로 이동시켰다.

데이터 페칭 - App Router ​

Page Router 방식 ​

App Router 방식 ​

주요 변경 포인트 ​

데이터 페칭 - App Router

Page Router 방식

App Router 방식

주요 변경 포인트