Streaming SSR

1// page.tsx (서버 컴포넌트)
2import { Suspense } from 'react';
3import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
4 
5export default function StreamingPage() {
6  return (
7    <div>
8      <h1>포스트 목록</h1>
9 
10      {/* Suspense로 감싸서 로딩 중에도 다른 UI 먼저 표시 */}
11      <Suspense fallback={<LoadingSkeleton />}>
12        <PostListWithData />
13      </Suspense>
14    </div>
15  );
16}
17 
18// 데이터를 가져오는 서버 컴포넌트
19async function PostListWithData() {
20  const queryClient = getQueryClient();
21  await queryClient.prefetchQuery(postsQueryOptions());
22 
23  return (
24    <HydrationBoundary state={dehydrate(queryClient)}>
25      <PostList />
26    </HydrationBoundary>
27  );
28}

1// PostList.tsx (클라이언트 컴포넌트)
2'use client';
3 
4import { useSuspenseQuery } from '@tanstack/react-query';
5 
6export default function PostList() {
7  // useSuspenseQuery: Suspense와 함께 사용
8  // - 데이터가 없으면 Promise를 throw하여 Suspense fallback 표시
9  // - 데이터가 있으면 바로 렌더링 (data가 undefined가 아님)
10  const { data } = useSuspenseQuery({
11    queryKey: ['posts'],
12    queryFn: () => fetch('/api/posts').then(res => res.json()),
13  });
14 
15  // data는 항상 존재 (undefined 체크 불필요)
16  return (
17    <ul>
18      {data.posts.map(post => (
19        <li key={post.id}>{post.title}</li>
20      ))}
21    </ul>
22  );
23}