이승준의 개발 블로그 | data fetching (client side fetch with swr, react-query)

data fetching (client side fetch with swr, react-query)

nextjs13에서 데이터를 fetch하는 방법에는 다음과 같은 네 가지가 있다.

이번 글에서는 클라이언트에서 서드파티 라이브러리를 사용하는 데이터 fetch에 대해 알아보자.

시작 전 나의 궁금증

next.js 13버전에서 fetch를 통해 데이터를 받아오면 기본으로 캐싱이 되는데 굳이 swr 또는 react-query 같은 데이터 fetching 라이브러리를 사용해야할까?

이런 의문을 갖고 찾아보니 많은 사람들이 13버전에서도 swr이나 react-query를 사용하고 있었다!!!

swr이나 react-query를 한번도 사용해보지 않은 나로서는 이번 블로그를 만들때 이 부분이 엄청난 궁금증이며 좀처럼 시원하게 결론이 나지 않는 부분이었다.

왜 사람들은 next.js 13버전에서도 swr, react-query를 사용할까?

그래서 오늘은 이 부분에 대해 공부하고 기록하려한다.

짧게 요약해서 말하면

나의 경우엔 블로그 서버 배포가 비용적인 측면에서 성능이 매우 제한적이고 data fetch 라이브러리들을 경험해 보고 싶었기에 이번 블로그 프로젝트에 적용하기로 정했다.

( 역시 프로그래밍은 정답이 없다... 트레이드 오프를 잘 고려해보아야 한다.)

앞서 데이터 fetch 라이브러리를 도입하기로 결정하였으니 이번엔 npm trends 양대 산맥은 SWR 과 React Query 두 라이브러리의 장단점을 비교하여 어떤것이 나의 프로젝트에 적합할지 고민해보려 한다.

데이터 가져오기와 동기화: SWR은 stale-while-revalidate 전략을 사용하여 데이터를 가져옵니다. 캐시된 데이터를 먼저 반환한 다음 백그라운드에서 서버로부터 최신 데이터를 가져와 캐시를 업데이트합니다.
데이터 조작과 동기화: mutate 함수를 제공하여 로컬 캐시의 값을 변경할 수 있지만, 서버에 대한 실제 변경 요청(POST, PUT, DELETE 등)은 개발자가 직접 처리해야 합니다.
요청 실패 시 재시도: onErrorRetry 옵션을 통해 재시도 로직을 설정할 수 있습니다.
개발자 경험: 간단하고 직관적인 API로 시작하기 쉽고 코드량도 줄일 수 있습니다.
커뮤니티와 생태계: Vercel에서 만든 라이브러리로서 Next.js와 잘 통합되어 있습니다.

데이터 가져오기와 동기화: React Query는 stale-while-revalidate 전략을 사용하며 추가적으로 refetch-on-window-focus와 refetch-on-network-reconnect 같은 다양한 리페치 전략을 제공합니다.
데이터 조작과 동기화: mutations 기능을 제공하여 서버의 데이터 조작 요청과 클라이언트 사이드의 캐시 업데이트를 함께 처리할 수 있습니다.
요청 실패 시 재시도: 기본적으로 요청 실패 시 일정 횟수만큼 재시도하는 기능을 제공하며, 이는 커스터마이즈 가능합니다.
개발자 경험: API가 약간 복잡하지만 고급 기능들과 유틸리티 함수들로 인해 큰 프로젝트에서 많은 이점을 얻을 수 있습니다.
커뮤니티와 생태계: 커뮤니티가 활발하고 많은 유틸리티와 확장 기능들이 제공됩니다.

결론 swr 3점으로 승리

그럼 본격적으로 SWR을 시작하고 프로젝트에 적용해보자.