[250719 TIL] Tanstack SSR시 왜 클라이언트 매번 새로 생성?

RSC에서 QueryClient 패턴

질문: prisma client 혹은 다른 여러 이런 종류 클라이언트들은 singleton 으로 쓰는 경우 많은데,
왜 tanstack-query server side 에서는 매번 new QueryClient() 하나유?

왜 매번 새로 생성하나요?

// 각 요청마다 독립적인 QueryClient가 필요
async function PostPage() {
  const queryClient = new QueryClient() // 서버 요청별로 새 인스턴스

  await queryClient.prefetchQuery({...})

  return <HydrationBoundary state={dehydrate(queryClient)}>

이유

1. 서버사이드는 stateless: 각 요청이 독립적
2. 요청간 격리: 다른 사용자의 데이터가 섞이면 안됨
3. 메모리 누수 방지: 요청 완료 후 GC로 정리

Prisma vs TanStack Query 차이

Prisma (연결 풀 관리)

// 연결은 재사용, 인스턴스는 싱글톤
const prisma = globalThis.prismaGlobal ?? new PrismaClient()

TanStack Query (상태 관리)

// 각 요청마다 새로운 상태 컨텍스트
const queryClient = new QueryClient() // 매번 새로 생성이 정상!

클라이언트에서는 다르게

// app/providers.tsx - 클라이언트는 싱글톤
'use client'
const [queryClient] = useState(() => new QueryClient()) // 한 번만 생성

결론

• ✅ RSC에서 매번 new QueryClient(): 정상 패턴
• ✅ Prisma는 싱글톤: 연결 재사용
• ✅ 클라이언트는 QueryClient 싱글톤: 상태 유지

TanStack Query 공식 문서에서도 RSC에서는 매번 새로 생성하라고 권장해요!
그렇다고 합니다...