작성일: 2025-12-15

맥락: Artify 프로젝트는 Supabase를 주 데이터베이스로 사용

질문: Supabase를 쓰는 상황에서 TanStack Query가 여전히 필요한가?

요약

Artify처럼 Supabase 중심 아키텍처라면 대부분의 경우 Server Actions + Supabase Realtime 조합이 더 적합합니다. TanStack Query는 “클라이언트 캐싱/상태가 매우 복잡한 특정 케이스”에서만 가치가 있습니다.

권장 사항: 우선 Server Actions + Supabase 네이티브 기능으로 시작하고, 실제로 이점이 입증되는 구간에 한해 TanStack Query를 선별적으로 추가하세요.

Supabase가 기본 제공하는 기능

Supabase가 이미 제공하는 것들

기능 Supabase 기본 제공 TanStack Query
실시간 업데이트(Realtime) 가능(내장 Realtime 구독) 수동 폴링 또는 웹소켓 구성 필요
낙관적 업데이트(Optimistic) Realtime 콜백으로 구현 가능 onMutate로 기본 제공
캐싱 제한적(세션 내 메모리 수준) 고급 캐시(staleTime, cacheTime)
데이터 패칭 Supabase 쿼리 직접 호출 Supabase 호출을 감싸는 래퍼 성격
SSR 지원 Next.js용 createServerClient prefetchQuery + HydrationBoundary
쿼리 무효화(Invalidation) 수동 refetch 필요 invalidateQueries로 자동화
백그라운드 재요청 기본 제공 없음 포커스 복귀 시 자동 refetch
요청 중복 제거(Dedup) 수동 구현 같은 queryKey면 자동

Supabase Realtime vs React Query 캐시

Supabase Realtime 구독

동작 방식 예시:

const supabase = createBrowserSupabaseClient()

// Realtime 변경 구독
const channel = supabase
  .channel('artworks-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'artworks' },
    (payload) => {
      console.log('Change received!', payload)
      // 로컬 상태를 즉시 업데이트
    }
  )
  .subscribe()

장점

제약/주의점