SWR vs React-Query 상세 페이지

캐싱 기능이 있어 동일한 요청 시 네트워크 요청을 줄이고 성능 최적화를 지원한다

SWR:

가벼움: 4KB로 React Query보다 훨씬 작아서 초기 로딩 성능에 유리했습니다.

개발 속도: 복잡한 설정 없이 바로 사용 가능해서 프로토타이핑이 빨랐습니다

React Query: 데이터 캐싱 및 상태 관리를 세밀하게 제어해야 하거나 복잡한 애플리케이션에서 서버 상태를 효율적으로 관리해야 할 때 적합하다.

1. 계층적 캐시 무효화

queryClient.invalidateQueries({queryKey:['posts']})

2. 조건부 캐시 관리

queryClient.invalidateQueries({predicate:(query)=> query.queryKey[0]==='posts'&& query.queryKey[2]?.status ==='draft'})

3. 낙관적 업데이트

서버 응답 전에 UI 먼저 업데이트하고, 실패 시 롤백

SWR은 기본 지원하지 않아 수동 구현 필요

4. 메모리 기반 가비지 컬렉션

사용하지 않는 캐시를 자동으로 정리

쿼리별로 다른 캐시 유지 시간 설정 가능