server component에서 사용하기

nextjs 13 버전인 app router 구조에서는 기본적으로 server component 기능을 지원합니다.

tanstack-query를 server component에서 미리 랜더링 하는 방식은 2가지가 있습니다.

initialData

서버 쪽에서 데이터를 받아서 prop drilling 형태로 pre-fetch 하는 방식
Hydration

hydrate 방식으로 pre-fetch 하는 방식

일단 위 두가지 방식을 적용전에 기본적으로 해줘야할 세팅이 있습니다.

// app/providers.tsx

'use client'

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

export default function Providers({ children }) {
  const [queryClient] = React.useState(() => new QueryClient())

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

// app/layout.tsx

import Providers from './providers'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

위 코드처럼 layout 에 provider 로 감싸줍니다.

initialData 방식

세팅이 간단하다
props 드릴링을 해줘야하는 단점

// app/page.jsx
export default async function Home() {
  const initialData = await getPosts()

  return <Posts posts={initialData} />
}

// app/posts.jsx
'use client'

import { useQuery } from '@tanstack/react-query'

export function Posts(props) {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    initialData: props.posts,
  })

  // ...
}