Data Fetching 이란?
데이터 페칭 (Data Fetching) : 웹 애플리케이션에서 데이터를 가져오는 프로세스
Next.js는 다양한 방법의 데이터 페칭 방법이 존재
- 서버에서 데이터를 가져와 페이지를 렌더링
- 클라이언트 측에서 데이터를 가져와 동적으로 페이지를 업데이트
종류
Next.js는 페이지에 필요한 데이터를 효율적으로 가져오는 방법을 선택하고 사용자에게 최상의 경험을 제공하는데 활용할 수 있습니다.
getStaticProps
빌드 시점에 페이지에 필요한 데이터를 불러오는 함수. (주로 정적인 사이트에서 사용)
예시) 제품 목록, FAQ 목록
getStaticPaths
동적 경로를 사용할 때, 필요한 경로의 목록을 동적으로 생성하는 함수입니다. (getStaticProps 함수와 함께 사용)
예시) 블로그 게시물 상세 페이지, 제품 디테일 페이지
getServerSideProps
매 요청마다 서버에서 필요한 데이터를 가져올 수 있게 하는 함수 (항상 최신 데이터 제공, SSR에서 사용)
예시) 검색 결과 페이지
API Routes
Next.js에서 엔드포인트를 생성, 사용하여 데이터를 가져오는 방법 (API 라우트를 통해서 서버와 클라이언트간 데이터를 주고 받을 수 있음)
예시) 데이터 등록, 처리, 로그인
getStaticProps
정적 페이지 생성을 위한 데이터를 가져오는 사전 렌더링 함수. 런타임이 아니라, 빌드 타임에서만 실행되기 때문에 변동이 거의 없는 데이터 대상으로만 적용하는게 좋다
- 빌드 타임에 getStaticProps로 생성한 props를 가지고 페이지를 사전에 렌더링 함
- 예를 들어, 거의 변동이 없는 블로그 글 또는 FAQ 글 목록을 가져올 때 사용됨
export async function getStaticProps() {
const posts = await fetchPosts(); // 데이터 가져오기 함수
return {
props: {
posts,
},
};
}getStaticPaths
동적 경로를 위한 정적 경로 생성하는 사전 렌더링 함수.
- 동적으로 생성되는 페이지를 사전 렌더링할 때 사용
- 예를 들어, 하나의 FAQ 데이터 (id: 1)가 존재한다고 했을 때, faqs/1 라는 경로를 빌드 타임에 미리 사전 렌더링 할 수 있음
export async function getStaticPaths() {
const posts = await fetchDynamicPaths(); // 동적 경로 생성 함수
return {
paths,
fallback: false, // 없는 경로는 404 페이지로 처리
};
}getServerSideProps
서버 사이드 렌더링을 위한 데이터 가져오기 함수
- 매 요청 마다 데이터를 서버에서 가져옴
- 예를 들어, 자주 업데이트 되는 posts 데이터들을 외부 API로 부터 fetch해서 사전 렌더링을 하고 싶을 때 사용
export async function getServerSideProps() {
const posts = await fetchData(); // 서버에서 데이터 가져오기
return {
props: {
data,
}
};
}