SSR + Hydration

1// page.tsx (서버 컴포넌트)
2import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
3import { getQueryClient } from '@/providers/QueryProvider';
4 
5export default async function SSRPage() {
6  const queryClient = getQueryClient();
7 
8  // 서버에서 데이터 미리 가져오기
9  await queryClient.prefetchQuery({
10    queryKey: ['posts'],
11    queryFn: () => fetch('/api/posts').then(res => res.json()),
12  });
13 
14  return (
15    // dehydrate로 서버 상태를 직렬화하여 클라이언트로 전달
16    <HydrationBoundary state={dehydrate(queryClient)}>
17      <PostList />
18    </HydrationBoundary>
19  );
20}

1// PostList.tsx (클라이언트 컴포넌트)
2'use client';
3 
4import { useQuery } from '@tanstack/react-query';
5 
6export default function PostList() {
7  // 서버에서 prefetch한 데이터가 이미 캐시에 있음!
8  // → isLoading이 false로 시작, 즉시 렌더링
9  const { data } = useQuery({
10    queryKey: ['posts'],
11    queryFn: () => fetch('/api/posts').then(res => res.json()),
12  });
13 
14  return (
15    <ul>
16      {data?.posts.map(post => (
17        <li key={post.id}>{post.title}</li>
18      ))}
19    </ul>
20  );
21}