Client Fetch

클라이언트 데이터 페칭

초기 화면에 꼭 필요한 데이터는 서버에서 준비하는 편이 낫다. 클라이언트 fetch는 사용자 입력, 실시간 갱신, 브라우저 상태에 반응해야 할 때 빛난다.

초기 데이터와 분리한다

처음 렌더링에 필요한 값까지 client fetch로 미루면 빈 화면과 loading 비용이 커진다.

검색어, 필터, 페이지 번호처럼 브라우저에서 바뀌는 상태가 fetch key를 만든다.

네트워크 실패, 중복 요청, 빠른 입력 취소를 UI 상태로 표현해야 한다.

SWR/Query

캐시와 재검증focus revalidate, stale data, retry 같은 클라이언트 경험을 관리한다.

서버 캐시와 역할을 나눈다.

Abort

요청 취소빠르게 바뀌는 검색어에서 이전 요청 응답이 뒤늦게 덮지 않게 한다.

race condition을 본다.

Optimistic

즉시 반영mutation 성공을 기다리기 전 UI를 먼저 업데이트한다.

실패 rollback이 필요하다.

Hydration

초기 값 전달서버에서 받은 데이터를 client cache 초기값으로 넘기면 중복 요청을 줄일 수 있다.

직렬화 가능해야 한다.

초기 화면SEO나 첫 화면에 필요한 데이터를 클라이언트 fetch로만 처리하지 않는가.

경쟁 상태빠른 입력 변경에서 오래된 응답이 최신 UI를 덮지 않는가.

실패낙관적 업데이트 실패 시 원래 상태로 되돌릴 수 있는가.

// server: initial list
// client: filters, pagination, refetch after mutation