App Router (5) - 데이터 페칭
2026.09.25 · 2분 읽기 · 조회 0
데이터 페칭
Page Router
// 페이지 라우터
// 1. SSR(서버 사이드 렌더링)
export async function getServerSideProps(){
return {props: {...}}
}
// 2. SSG(정적 사이트 생성)
export async function getStaticProps(){
return {props: {...}}
}
// 3. Dynamic SSG(동적 경로에 대한 정적 사이트 생성)
export async function getStaticPaths(){
return {props: [...], fallback:...}
}기존의 Page Router 에서는 다음과 같은 함수들을 통해 서버측에서 실행되는 함수들을 사용해 데이터를 페칭했다.
// 1. 함수 내부에서 데이터를 페칭해와서 프롭스로 내려줌
export async function getServerSideProps(){
const data = await fetch('...');
return {props : {data}}
}
// 2. 페이지는 프롭스에서 그 데이터를 받아와 사용
export function Page(props){
return <div>...</div>
}이렇게 사용해 왔다. Page Router에서는 모든 컴포넌트가 클라이언트 컴포넌트였기 때문에 서버 측에서만 데이터를 불러오기 위해서는 위의 특수한 함수들을 사용해야 했다.
그렇게 페이지에 프롭스로 받아온 데이터도, 하위 컴포넌트들에 전달하려면 수 많은 Props들을 거쳐야 했기 때문에 redux, zustand, recoil 등의 전역 변수를 사용해야 하는 불편함이 있었다.
App Router
App Router 에서는 서버 컴포넌트가 추가되었기 때문에 다르게 할 수 있다.
// 서버 컴포넌트 (+ 비동기 함수)
export async function Page(props){
const data = await fetch('...')
return <div>...</div>
}이런 식으로 서버 컴포넌트에서 async/await을 이용해 데이터를 직접 불러올 수 있다.
클라이언트 컴포넌트는 브라우저에서 문제를 일으킬 수 있었기 때문에 Async 키워드를 사용할 수 없었다. 이것이 페이지 라우터의 고질적인 문제였다.
이것으로 기존의 getServerSideProps 같은 함수들은 사용하지 않아도 된다.
필요한 데이터가 있으면 props도 필요없이 해당 컴포넌트가 직접 요청하면 된다.
export default async function Page(){
const response = await fetch('...');
const data = await response.json();
return (
{data.map((data) => <DataComponent {...data}/>)}
)
}위와 같이 그냥 서버 컴포넌트에 데이터 페칭 로직을 넣으면 된다.
여기에 "use client"를 적어서 클라이언트 컴포넌트로 만들어주면 브라우저에서 무한 페칭의 굴레에 빠지는 걸 확인할 수 있으니 서버 컴포넌트에서만 async를 붙임에 주의하자.
앱과 웹을 만들고, 직접 운영하며 기록합니다.
댓글
giscus로 동작하며 GitHub Discussions에 저장됩니다.