useAsyncData와 TanStack Query 선택 고민

최근에 Nuxt 3 기반 프로젝트를 진행하면서 데이터 fetching에 대한 고민이 깊어졌다. 초기에는 Nuxt 3에서 제공하는 useAsyncData를 사용했는데, 이후 TanStack Query로 전환하게 된 과정을 기록해본다.

useAsyncData를 사용한 초기 접근

프로젝트 초반에는 Nuxt 3의 공식 기능인 useAsyncData를 적극 활용했다. 다음과 같은 방식으로 데이터를 가져와 제품 목록을 fetching하는 코드를 작성했었다.

const { data, refresh } = await useAsyncData<Product | null>(
  'firstProduct',
  async () => {
    try {
      const response = await fetchProducts(searchParams.value);

      if (response.data && response.data.products && response.data.products.length > 0) {
        const firstProduct = response.data.products[0];
        productStore.setProduct(firstProduct);
        return firstProduct;
      }
      return null;
    } catch (error) {
      console.error('Error fetching products:', error);
      return null;
    }
  },
  {
    watch: [searchParams],
    immediate: true,
  }
);

useAsyncData의 장점은 Nuxt와의 자연스러운 통합이었다. 특히 SSR 환경에서 서버에서 미리 데이터를 가져와 페이지를 렌더링하기 때문에 SEO에 최적화된 점이 유리했다. 하지만 이번 프로젝트는 CSR(Client-Side Rendering) 로 배포할 계획이었기 때문에 useAsyncData의 SSR 이점이 반영되지 않았다.

TanStack Query로 전환

CSR 방식에서는 클라이언트에서 데이터를 효율적으로 관리하고, 캐싱 및 데이터 무효화 같은 기능이 더 중요해진다. 이 때문에 TanStack Query로 전환을 고민하게 되었다. 아래는 TanStack Query를 사용해 제품 데이터를 fetching하는 예제 코드이다.

const { data, refetch } = useQuery({
  queryKey: ['products', searchParams.value],
  queryFn: () => fetchProducts(searchParams.value),
  enabled: !!searchParams.value,
  staleTime: 5000,
  refetchOnWindowFocus: false,
});

watch(() => searchParams.value, () => {
  refetch();
});

TanStack Query는 캐싱을 통해 동일한 데이터를 반복해서 요청하지 않도록 해주며, stale time을 설정하여 데이터를 최신 상태로 유지하는 기능을 제공한다. 또한, 백그라운드 리패칭 및 데이터 무효화를 통해 클라이언트 측 데이터 관리가 훨씬 유연해졌다.

최종 결정

최종적으로 CSR로 배포하면서 useAsyncData보다는 TanStack Query가 더 적합하다는 결론을 내렸다.

useAsyncData는 SSR 통합 및 간단한 데이터 fetching에는 적합하지만, 캐싱 및 전역 상태 관리가 중요한 CSR 환경에서는 기능이 제한적이었다.
반면, TanStack Query는 데이터 캐싱, 백그라운드 리패칭, 자동 무효화 등 다양한 고급 기능을 제공하여 더 복잡한 상태 관리가 필요한 상황에서 유리했다.
특히, 페이지 전환이 빈번하고 동일한 데이터를 여러 페이지에서 재사용하는 프로젝트 특성상 TanStack Query의 전역 캐싱 및 데이터 관리 기능이 큰 도움이 되었다.

회고

이번 선택을 통해, 프로젝트의 배포 방식에 따라 도구를 신중히 선택해야 한다는 점을 배웠다. Nuxt의 useAsyncData는 SSR에 최적화된 도구였지만, CSR 환경에서 더 나은 성능과 유연한 상태 관리를 위해 TanStack Query를 선택한 것은 옳은 결정이었다고 생각한다. 상황에 맞는 도구 선택이 프로젝트의 효율성과 유지 보수성에 큰 영향을 미친다는 것을 다시 한 번 깨달았다.