Client data fetching

클라이언트 fetch는 상호작용 데이터에 맞다

브라우저에서 데이터를 가져오면 사용자 이벤트와 실시간 갱신에 강하지만 초기 화면과 로딩 상태를 직접 설계해야 합니다.

01

하이드레이션 이후

useEffect 기반 fetch는 HTML이 그려진 뒤 실행되므로 첫 화면에는 로딩 UI가 필요합니다.

02

캐시 라이브러리

SWR이나 React Query는 재요청, 오류, 재검증 상태를 컴포넌트 가까이에서 관리합니다.

03

서버와 분리

초기 데이터는 서버에서 받고 이후 상호작용 데이터만 클라이언트에서 갱신할 수 있습니다.

1

mount

컴포넌트가 브라우저에서 준비된 뒤 요청을 시작합니다.

2

loading

비어 있는 초기 상태와 오류 상태를 화면에 둡니다.

3

fetch

인증, 취소, 중복 요청 처리를 함께 고려합니다.

4

cache

재검증 주기와 사용자 조작 뒤 새로고침 방식을 정합니다.