TanStack Query v6 suspense + RSC 충돌

Question

Next.js 16 App Router + TanStack Query v6를 사용 중입니다. Server Component에서 데이터를 prefetch하고, 클라이언트에서 useSuspenseQuery로 받으려고 하는데 hydration mismatch와 무한 fetch가 번갈아 발생합니다.

v6에서 권장 패턴이 어떻게 되는지, RSC와 함께 쓸 때 가이드라인이 궁금합니다.

김영삼 · Accepted Answer

TanStack Query v6 + Next.js 16(RSC) 조합의 정확한 권장 패턴은 v6 릴리스 시점부터 다소 바뀌었고, 공식 문서에도 반영이 늦어 혼란이 큽니다.핵심 원칙 (먼저 정리)Server Component에서 prefetch → state를 직렬화 → Client Component에 hydrateuseSuspenseQuery는 클라이언트 트리에서만QueryClient는 요청별로 생성 (singleton 절대 금지)1) QueryClient — 요청별 인스턴스// app/providers.tsx
'use client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState } from 'react'

export function Providers({ children }: { children: React.ReactNode }) {
  const [client] =

댓글 0