효율적인 React 5편 — 데이터 흐름 설계: 도착 순서를 트리와 함께 설계한다

// 순차: 150ms
await getUser();
await getPosts();
await getNotifications();
 
// 병렬: 50ms
await Promise.all([getUser(), getPosts(), getNotifications()]);

function ProfilePage({ userId }: { userId: string }) {
  const user = useUser(userId);            // 요청 1 시작
  if (!user) return <Spinner />;
  return <Posts authorId={user.id} />;     // user가 와야 Posts가 마운트 → 요청 2 시작
}

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const user = await getUser(id);          // 끝나야
  const posts = await getPosts(id);        // 시작
  const stats = await getStats(id);        // 시작
  return (/* ... */);
}

const Chart = lazy(() => import('./Chart'));   // JS 청크 다운로드 →
// Chart가 마운트된 뒤 useEffect에서 데이터 요청 →

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
 
  // 세 요청을 동시에 시작한다. 아직 await하지 않는다.
  const userPromise = getUser(id);
  const postsPromise = getPosts(id);
  const statsPromise = getStats(id);
 
  // 헤더에 반드시 필요한 user만 기다린다
  const user = await userPromise;
 
  return (
    <>
      <ProfileHeader user={user} />
      <Suspense fallback={<PostsSkeleton />}>
        <Posts postsPromise={postsPromise} />
      </Suspense>
      <Suspense fallback={<StatsSkeleton />}>
        <Stats statsPromise={statsPromise} />
      </Suspense>
    </>
  );
}
 
async function Posts({ postsPromise }: { postsPromise: Promise<Post[]> }) {
  const posts = await postsPromise;
  return (/* ... */);
}

// 서버 컴포넌트
const commentsPromise = getComments(postId);
return (
  <Suspense fallback={<CommentsSkeleton />}>
    <Comments commentsPromise={commentsPromise} />
  </Suspense>
);

'use client';
import { use } from 'react';
 
export function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise);   // 도착 전이면 가장 가까운 Suspense로 중단
  const [sort, setSort] = useState<'new' | 'top'>('new');
  // 상호작용은 클라이언트에서
}

import { cache } from 'react';
 
export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

const loadChart = () => import('./Chart');
const Chart = lazy(loadChart);
 
function ReportButton({ reportId }: { reportId: string }) {
  const queryClient = useQueryClient();
 
  function prefetch() {
    loadChart();                                     // 청크 다운로드 시작
    queryClient.prefetchQuery(reportQuery(reportId)); // 데이터 요청 시작
  }
 
  return (
    <Link href={`/reports/${reportId}`} onMouseEnter={prefetch} onFocus={prefetch}>
      보고서 보기
    </Link>
  );
}

<Suspense fallback={<PageSkeleton />}>
  <Header />          {/* 50ms */}
  <MainContent />     {/* 200ms */}
  <Recommendations /> {/* 2000ms */}
</Suspense>

{posts.map(p => (
  <Suspense key={p.id} fallback={<CardSkeleton />}>
    <PostCard id={p.id} />
  </Suspense>
))}

<>
  <Header user={user} />                          {/* 필수 데이터, 경계 밖 */}
  <ErrorBoundary fallback={<MainError />}>
    <Suspense fallback={<MainSkeleton />}>
      <MainContent />                             {/* 핵심 콘텐츠 */}
    </Suspense>
  </ErrorBoundary>
  <ErrorBoundary fallback={null}>                 {/* 실패하면 조용히 숨김 */}
    <Suspense fallback={<RecoSkeleton />}>
      <Recommendations />                         {/* 느리고 부가적 */}
    </Suspense>
  </ErrorBoundary>
</>

const [isPending, startTransition] = useTransition();
 
function selectTab(next: Tab) {
  startTransition(() => setTab(next));
}
 
return (
  <div style={{ opacity: isPending ? 0.6 : 1 }}>
    <Suspense fallback={<TabSkeleton />}>
      <TabContent tab={tab} />
    </Suspense>
  </div>
);

export const productKeys = {
  all: ['products'] as const,
  lists: () => [...productKeys.all, 'list'] as const,
  list: (filters: ProductFilters) => [...productKeys.lists(), filters] as const,
  detail: (id: string) => [...productKeys.all, 'detail', id] as const,
};
 
export const productListQuery = (filters: ProductFilters) => ({
  queryKey: productKeys.list(filters),
  queryFn: ({ signal }: { signal: AbortSignal }) => fetchProducts(filters, { signal }),
  staleTime: 30_000,
});

queryClient.invalidateQueries({ queryKey: productKeys.lists() });   // 모든 목록만
queryClient.invalidateQueries({ queryKey: productKeys.detail(id) }); // 상세 하나만

// app/todos/actions.ts
'use server';
 
import { revalidatePath } from 'next/cache';
import { z } from 'zod';
 
const TodoInput = z.object({ title: z.string().trim().min(1).max(100) });
 
export async function addTodo(prev: { error?: string }, formData: FormData) {
  const session = await getSession();
  if (!session) return { error: '로그인이 필요합니다' };        // 서버 함수는 공개 엔드포인트
 
  const parsed = TodoInput.safeParse({ title: formData.get('title') });
  if (!parsed.success) return { error: '제목을 1~100자로 입력하세요' };
 
  await db.todo.create({ data: { title: parsed.data.title, userId: session.userId } });
  revalidatePath('/todos');
  return {};
}

'use client';
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { addTodo } from './actions';
 
export function AddTodoForm() {
  const [state, formAction] = useActionState(addTodo, {});
  return (
    <form action={formAction}>
      <input name="title" />
      <SubmitButton />
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}
 
function SubmitButton() {
  const { pending } = useFormStatus();           // 가장 가까운 부모 form의 상태
  return <button disabled={pending}>{pending ? '추가 중…' : '추가'}</button>;
}

'use client';
import { useOptimistic, startTransition } from 'react';
 
export function LikeButton({ liked, count, postId }: { liked: boolean; count: number; postId: string }) {
  const [optimistic, setOptimistic] = useOptimistic(
    { liked, count },
    (current, nextLiked: boolean) => ({
      liked: nextLiked,
      count: current.count + (nextLiked ? 1 : -1),
    }),
  );
 
  function toggle() {
    startTransition(async () => {
      setOptimistic(!optimistic.liked);          // 즉시 반영
      await toggleLike(postId, !optimistic.liked); // 서버 함수, 성공 시 revalidate
    });
  }
 
  return (
    <button onClick={toggle} aria-pressed={optimistic.liked}>
      ♥ {optimistic.count}
    </button>
  );
}