고민의 과정

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, 캐싱, 동기화 등의 고급 기능을 제공한다.