Next · Client Fetch

클라이언트 데이터 페칭 라이프사이클

서버 컴포넌트가 초기 화면을 만들고, 브라우저에서 필요한 데이터만 마운트 이후 갱신하는 흐름입니다.

페칭 단계

browser state

서버 shell 라우트는 서버에서 HTML과 초기 props를 준비합니다.

하이드레이션 클라이언트 컴포넌트가 이벤트와 상태를 연결합니다.

캐시 조회 SWR 키나 Query key로 기존 데이터를 먼저 확인합니다.

API 요청 필요한 경우 브라우저에서 fetch를 실행합니다.

UI 갱신 성공, 로딩, 에러 상태를 작은 영역에서 바꿉니다.

단순 실습에 적합하지만 로딩, 에러, 재시도 처리를 직접 작성합니다.

stale 데이터를 먼저 보여주고 포커스 복귀 시 자동 재검증합니다.

mutation, retry, invalidation이 많은 화면에서 캐시 정책을 관리합니다.

서버·클라이언트 데이터 분리

SEO와 첫 화면에 필요한 데이터는 서버 컴포넌트에 두고, 사용자 행동 이후 바뀌는 데이터만 클라이언트 캐시에 맡기면 번들과 네트워크 비용을 줄일 수 있습니다.