고민의 과정

next.js 13에서 fetch를 사용하면 캐싱을 알아서 해준다.

fetch API를 확장하여, 캐싱과 revalide기능을 추가했다고 한다. 그리고 React에서는 fetch를 확장하여 자동으로 메모이제이션을 수행해준다고 한다.

1. Next.js의 Caching Data

fetch('https://...', { cache: 'force-cache' })

캐싱을 했을 때와 하지 않았을 때

1. 캐싱을 하지 않았을 때

   

2. 캐싱을 했을 때

   

서버 사이드 렌더링을 수행한 페이지이다. 2번의 경우, 서버에서 미리 데이터를 받았고, 이를 캐싱해두었기에 크기에 (디스트 캐시)가 쓰여있고, 시간 또한 압도적으로 적은 수치임을 확인할 수 있다.

2. react-query

react-query를 사용하는 주된 이유는 서버 상태를 캐싱하고, 편리하게 관리하기 위함이다. 이 중 서버 상태를 캐싱하는 것은 Next.js의 fetch를 사용한다면 크게 도움이 되지 않는다고 생각한다. 만약 SSG를 구현한다면, fetch를 사용하면 알아서 SSG도 구현할 수 있다.

하지만 만약 서버 상태를 다양한 방법으로, 예를 들어 낙관적 업데이트, post 후 즉시 요청, 보다 선언적으로 코드를 작성한다면 react-query를 사용하는 것이 적절할 수 있다.

3. Next.js의 fetch캐싱과 react-query 비교

Next.js의 fetch기능은 자동으로 HTTP캐싱을 지원하여 네트워크 요청의 수를 줄여준다. 이는 주로 SSG, SSR에서 유용하게 사용된다. Next.js 캐싱은 브라우저와 서버 양쪽에서 작동할 수 있으며, 특히 페이지 레벨에서의 데이터 요청 최적화에 중점을 둔다.

react-query는 클라이언트단 상태 관리와 데이터 동기화를 위한 라이브러리로, 서버 상태 관리에 특화되어 있다. react-query의 캐싱 기능은 데이터를 가져오고, 동기화하는 복잡한 로직을 추상화한다. 이는 주로 비동기 데이터 작업에 유용하며 데이터 refetch, 캐싱, 동기화 등의 고급 기능을 제공한다.

결론

만약 복잡한 서버 상태를 다루는 프로젝트라면 react-query를 사용하는 것이 무조건 편리하고 가독성이 좋은 코드를 작성할 수 있을 것이라 생각한다.

하지만 그렇지 않고 단순히 데이터를 받아오기만 한다면, fetch의 캐싱 기능으로도 충분하다고 생각한다.

.. 이어서 : useQuery를 직접 만들어보자