SSR에서 Tanstack Query가 꼭 필요할까?

• Next.js 13 앱 라우터가 로딩 및 오류 상태를 처리하기 위한 페이지를 제공 하더라도 React Query는 지능형 다시 가져오기 기능 및 캐싱과 관련하여 여전히 장점을 유지
• 정적 생성과 함께 React Query를 사용하면 효율적인 캐싱, 향상된 성능, 데이터 일관성, 애플리케이션에 대한 원활한 클라이언트 측 업데이트 등 React Query가 제공하는 이점을 얻을 수 있음

https://tkdodo.eu/blog/you-might-not-need-react-query

SSR + Tanstack Query 사용법 (Hydrate 방식)

서버에서 쿼리를 prefetch 하고 캐시를 dehydrate 한 후, <Hydrate> 로 클라이언트에게 rehydrate 해줌

• props drill이 필요 없음
• 쿼리 refetch는 쿼리가 서버에서 prefetch 된 시간을 기준으로 함

Hydrate와 Dehydrate

React Query는 서버에서 query를 prefetch하고 그 query들을 queryClient에 dehydrate하는 것을 지원. Dehydrate는 후에 Hydrate을 할 수 있도록 동결된 cache를 만드는데 이로 인해, 프리패치된 쿼리들이 서버에서 클라이언트로 이동하거나 다른 저장소에 유치되는 것이 가능. Hydrate는 정적인 HTML에 인터렉션을 공급하는 역할을 하는데 클라이언트에서 Hydrate 진행시 queryClient 에서 dehydrate 했던 state를 cache에 추가함

1. Provider 컴포넌트 제작

// app/components/provider/TanstackProvider
'use client'

import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { useState } from 'react'

export default function TanstackProvider({
  children,
}: {
  children: React.ReactNode
}) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

<aside> 💡

useState를 사용하여 queryClinet를 관리하면 QueryClient 애플리케이션 전체에서 하나의 인스턴스로 유지되고, 상태 관리와 최적화 측면에서 효율적이기 떄문임

</aside>

1. QueryClient의 요청 범위 싱글톤 인스턴스 생성 - 서로 다른 사용자 요청 간에 데이터가 공유되지 않고 요청당 한번만 쿼리 클라이언트를 생성함