반응형
패키지 설치
bun add @tanstack/react-query@5.59.0
QueryProvider 설정
- 고급 서버 검색 advanced server
- https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#initial-setup
- 단일 책임 원칙에 따라 React Query만 담당하는 전용 Provider를 생성
src/
└── app/
└── component/
└── ui/
└── dottedSeparator.tsx
└── query-provider.tsx'use client'
import {
isServer,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'
function makeQueryClient() {
return new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000,
},
},
})
}
// 브라우저에서 사용할 QueryClient 인스턴스 (싱글톤)
let browserQueryClient: QueryClient | undefined = undefined
function getQueryClient() {
if (isServer) {
return makeQueryClient()
} else {
if (!browserQueryClient) browserQueryClient = makeQueryClient()
return browserQueryClient
}
}
// export default function Providers({ children }: { children: React.ReactNode }) {
// const queryClient = getQueryClient()
// return (
// <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
// )
// }
interface QeuryProviderProps{
children: React.ReactNode;
}
export const QueryProvider = ({ children }: QeuryProviderProps) => {
const queryClient = getQueryClient()
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
)
}
Layout에서 Provider 적용
src/app/layout.tsx
- 전체 layout에서 감싸줌(쿼리준비 완료)
<html lang="en">
<body className={cn(inter.className, "antialiased min-h-screen")}>
<QueryProvider>
{children}
</QueryProvider>
</body>
</html>
서버와 클라이언트 분리의 중요성
// ❌ 잘못된 방법: 서버와 클라이언트에서 같은 인스턴스 공유
const queryClient = new QueryClient()
// ✅ 올바른 방법: 환경별 적절한 인스턴스 생성
function getQueryClient() {
if (isServer) {
return makeQueryClient() // 서버: 매번 새로운 인스턴스
} else {
if (!browserQueryClient) browserQueryClient = makeQueryClient()
return browserQueryClient // 브라우저: 싱글톤
}
}
- 서버 사이드: 각 요청은 독립적이어야 하므로 매번 새로운 QueryClient 생성
- 클라이언트 사이드: 앱 전체에서 캐시를 공유해야 하므로 싱글톤 패턴 사용
- 메모리 누수 방지: 서버에서 인스턴스 재사용 시 이전 요청 데이터가 남을 수 있음
반응형
'Clone Coding' 카테고리의 다른 글
| Jira Clone - AppWrite 백엔드 서비스(BaaS) (0) | 2025.09.17 |
|---|---|
| Jira Clone - Hono + Zod 로그인 API 구현 (0) | 2025.09.16 |
| Jira-Clone - Next.js + Hono API 라우팅 (0) | 2025.09.16 |
| Jira Clone - auth page Router, schemas (0) | 2025.09.15 |
| Jira Clone - react-hook-form, zod (0) | 2025.09.15 |
