SWR vs Tanstack Query — 데이터 페칭 라이브러리 비교

SWR

import useSWR from "swr";
const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading, mutate } = useSWR("/api/user", fetcher, {
    revalidateOnFocus: true,
    revalidateInterval: 30000,
  });
}

Tanstack Query

import { useQuery } from "@tanstack/react-query";

function Profile() {
  const { data, isLoading } = useQuery({
    queryKey: ["user"],
    queryFn: () => fetch("/api/user").then(r => r.json()),
    staleTime: 30000,
  });
}

선택 기준

• SWR: 간단한 프로젝트, Next.js와 통합
• Tanstack Query: 복잡한 캐싱, 뮤테이션, 무한 스크롤