Open1
SSRでTanstackQueryを使用してデータフェッチする
kiwichanuseQueryやuseMutationのようなReactフックはクライアントサイドでしか使えません。
サーバーサイドで使用するには
const queryClient = new QueryClient()
queryClient.fetchQueryを使う
処理の流れのイメージ
- サーバーコンポーネントでデータを事前に取得する
- 取得したデータをクライアントコンポーネントに渡して初期状態として提供する
- ハイドレーションにより、クライアント側での再取得を防止する
公式参照：https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
// app/posts/page.tsx
import {
dehydrate,
HydrationBoundary,
QueryClient,
} from '@tanstack/react-query'
import Posts from './posts'
export default async function PostsPage() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery({
queryKey: ['posts'],
queryFn: getPosts,
})
return (
// Neat! Serialization is now as easy as passing props.
// HydrationBoundary is a Client Component, so hydration will happen there.
<HydrationBoundary state={dehydrate(queryClient)}>
<Posts />
</HydrationBoundary>
)
}