Next.js

클라이언트 컴포넌트에서 데이터 페칭

클라이언트 컴포넌트의 데이터 페칭은 상호작용 이후의 최신 상태, 사용자별 요청, 브라우저 이벤트에 반응하는 화면을 다룰 때 필요합니다. 서버 렌더링 전략과 섞이면 캐시 경계와 로딩 상태를 먼저 분리해야 합니다.

사용자 상호작용 이후 필요한 데이터와 초기 렌더링 데이터를 구분해 클라이언트 페칭 기준을 정리합니다.

클라이언트 컴포넌트에서 데이터 페칭 흐름

1

데이터 페칭의 기준

클라이언트 컴포넌트는 브라우저(클라이언트)에서 렌더링되고 실행되는 React 컴포넌트입니다.

2

데이터 페칭하는 방법

클라이언트 컴포넌트에서 데이터를 페칭하는 방법은 일반적인 React 애플리케이션에서 데이터를 가져오는 방식과 동일합니다.

3

데이터 페칭 라이브러리 활용

SWR나 React Query로 클라이언트 캐시를 관리합니다.

4

서버 컴포넌트와의 데이터 페칭 시너지

서버는 초기 데이터, 클라이언트는 재검증과 캐시를 맡습니다.