Tanstack Query with Next.js

이번에 Next.js가 15버전으로 업데이트 되면서 fetch 에 대해 캐싱 여부, stale time 조정 등의 기능이 추가되었다. 문득 든 "그동안 Tanstack Query 를 사용하며 비동기 요청에 대해 캐싱/stale 조정, 서버 상태관리를 진행했는데, 이제 굳이 사용 안해도 되지 않을까?" 라는 생각이 들었다. 각각의 기술을 정리하며 판단해보자.

Tanstack Query

공식문서에서 Tanstack Query는 it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. 라고 소개하고 있다. 간단히 번역하자면 데이터 Fetching, 캐싱, 서버 데이터의 업데이트와 동기화를 용이하게 해준다 라는 말이다. Tanstack Query를 사용하는 명확한 이유가 들어있는 한문장이다.

기존 서버상태관리의 유의점은 바로 캐싱, 동기화, 업데이트다.

오래된 데이터를 최신 데이터와 동기화하고, 데이터를 얼마나 캐싱해 사용할 것인지, 언제 다시 새로운 데이터로 업데이트할것인지를 다뤄야 하는 것이다. 기존 프레임워크 (eg. react)에서는 이것을 useState Hook을 사용해 해결했다. 물론 구현과 별개로 코드가 매우 길어지고 가독성 또한 떨어졌다. 이것을 메서드 하나로 손쉽게 해결해준 것이 바로 Tanstack Query다.

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })

  if (isPending) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

Fetching with Next.js

이번엔 데이터 Fetching 모범 사례에 대한 Next.js v15 공식문서를 살펴보자.

• 서버 컴포넌트를 사용해 서버 측에서 Fetching

• Suspense, Loading UI를 통한 점진적 Rendering

정도로 요약해 볼수 있다.

async function getData() {
  const res = await fetch('https://api.example.com/...', { 
    next: { revalidate: 10 },
    cache: 'force-cache'
  );
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}
 
export default async function Page() {
  const data = await getData();
 
  return <main></main>;
}

기본적으로 Next.js 15의 Fetch 는 캐싱을 지원하지 않는다. 이에 따라 개발자가 옵션을 통해 캐싱 옵션을 설정할 수 있으며, revalidate 또한 설정이 가능하다.

즉, 이전에 Tanstack Query를 사용함으로써 얻는 이점을 Next.js의 빌트인 메서드로도 얻을수 있다는 것이다. 그렇다고 Tanstack Query에서 지원하는 모든 기능들을 Next.js 15로 대체할수 있는가? 라는 질문에는 아니오 라고 할수 있다.

단순 데이터 Fetching 로직들은 Next.js 15의 Fetch로 구현이 가능하지만, 서버-클라이언트간 데이터 동기화, 실시간 데이터 반영 등 복잡한 상태관리나, 데이터 의존성 관리에 있어서 Tanstack Query는 여전히 매력적인 라이브러리이다.

다만, 이번 15버전 업데이트를 통해 빌트인 기능만으로 추가적인 의존성 없이 구현이 가능해졌기 때문에 추후 프로젝트를 진행하며 발전된 개발환경을 기대해 볼수 있을 것 같다.