React Server Components 실전 가이드: 번들 크기를 줄이고 useEffect 없이 데이터 페칭하기

// 서버 컴포넌트 (별도 지시어 없음 — 기본값)
async function ProductList() {
  const products = await db.products.findMany(); // DB 직접 접근 가능
  return (
    <ul>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </ul>
  );
}

// 클라이언트 컴포넌트
"use client";
 
import { useState } from "react";
 
function AddToCartButton({ productId }: { productId: string }) {
  const [loading, setLoading] = useState(false);
 
  const handleAdd = async () => {
    setLoading(true);
    await addToCart(productId);
    setLoading(false);
  };
 
  return (
    <button onClick={handleAdd} disabled={loading}>
      {loading ? "추가 중..." : "장바구니 추가"}
    </button>
  );
}

// ✅ children props 패턴 — 클라이언트 컴포넌트가 서버 컴포넌트를 감쌀 수 있음
"use client";
 
import { useState } from "react";
 
function Collapsible({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(true);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "접기" : "펼치기"}
      </button>
      {isOpen && children}
    </div>
  );
}
 
// app/page.tsx — 서버 컴포넌트에서 조합
async function Page() {
  return (
    <Collapsible>
      <ServerDataList /> {/* 서버 컴포넌트로 유지됨 */}
    </Collapsible>
  );
}

// app/dashboard/page.tsx
import { Suspense } from "react";
import { UserStats } from "./UserStats";
import { RecentOrders } from "./RecentOrders";
 
export default function DashboardPage() {
  return (
    <div>
      <h1>대시보드</h1>
      {/* 빠른 데이터: 먼저 표시 */}
      <Suspense fallback={<StatsSkeleton />}>
        <UserStats /> {/* 서버 컴포넌트 */}
      </Suspense>
      {/* 느린 데이터: 독립적으로 로딩 */}
      <Suspense fallback={<OrdersSkeleton />}>
        <RecentOrders /> {/* 서버 컴포넌트 */}
      </Suspense>
    </div>
  );
}

// app/dashboard/loading.tsx
export default function Loading() {
  return <DashboardSkeleton />; // 데이터 로딩 중 표시할 UI
}

// app/blog/[slug]/page.tsx — 서버 컴포넌트
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeSanitize from "rehype-sanitize"; // XSS 방지 필수
import rehypeStringify from "rehype-stringify";
import { notFound } from "next/navigation";
 
async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params; // Next.js 15: params는 Promise 타입
 
  const post = await prisma.post.findUnique({ where: { slug } });
  if (!post) notFound();
 
  // unified, rehype-* 모두 서버에서만 실행 — 클라이언트 번들에 포함되지 않음
  const result = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeSanitize) // 외부 입력(DB, CMS)의 XSS 위험 제거
    .use(rehypeStringify)
    .process(post.content);
 
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: String(result) }} />
    </article>
  );
}

// app/profile/[userId]/page.tsx — 서버 컴포넌트가 레이아웃 담당
async function ProfilePage({ params }: { params: Promise<{ userId: string }> }) {
  const { userId } = await params; // Next.js 15 기준
 
  try {
    // 서버에서 병렬로 데이터 페칭
    const [user, posts] = await Promise.all([
      getUser(userId),
      getPosts(userId),
    ]);
 
    return (
      <div className="profile">
        <UserInfo user={user} />          {/* 서버 컴포넌트: 정적 정보 표시 */}
        <FollowButton userId={user.id} /> {/* 클라이언트 컴포넌트: 팔로우 인터랙션 */}
        <PostList posts={posts} />        {/* 서버 컴포넌트: 게시물 목록 */}
      </div>
    );
  } catch (error) {
    throw error; // Next.js error boundary(error.tsx)로 위임
  }
}

// components/FollowButton.tsx — 클라이언트 컴포넌트
"use client";
 
import { useState, useTransition } from "react";
import { followUser } from "@/actions/user"; // Server Action
 
function FollowButton({ userId }: { userId: string }) {
  const [isFollowing, setIsFollowing] = useState(false);
  const [isPending, startTransition] = useTransition();
 
  const handleFollow = () => {
    startTransition(async () => {
      await followUser(userId);
      setIsFollowing(true);
    });
  };
 
  return (
    <button onClick={handleFollow} disabled={isPending}>
      {isPending ? "처리 중..." : isFollowing ? "팔로잉" : "팔로우"}
    </button>
  );
}

// lib/dashboard.server.ts — 서버 전용 데이터 접근 함수 (DB 직접 쿼리)
export async function getDashboardStats() {
  return prisma.dashboardStats.findFirst({ orderBy: { createdAt: "desc" } });
}
 
// lib/dashboard.client.ts — 클라이언트에서 사용하는 API 함수
export async function fetchDashboardStats() {
  const res = await fetch("/api/dashboard/stats");
  if (!res.ok) throw new Error("대시보드 데이터 로딩 실패");
  return res.json();
}

// app/dashboard/page.tsx — 서버 컴포넌트
import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
import { getDashboardStats } from "@/lib/dashboard.server";
import { DashboardClient } from "./DashboardClient";
 
async function DashboardPage() {
  const queryClient = new QueryClient();
 
  // 서버에서 미리 데이터 페칭 (초기 HTML에 포함)
  await queryClient.prefetchQuery({
    queryKey: ["dashboard-stats"],
    queryFn: getDashboardStats, // 서버 전용 DB 접근 함수
  });
 
  return (
    // 서버 데이터를 클라이언트 QueryClient로 전달
    <HydrationBoundary state={dehydrate(queryClient)}>
      <DashboardClient />
    </HydrationBoundary>
  );
}

// app/dashboard/DashboardClient.tsx — 클라이언트 컴포넌트
"use client";
 
import { useQuery } from "@tanstack/react-query";
import { fetchDashboardStats } from "@/lib/dashboard.client";
 
function DashboardClient() {
  // 서버에서 prefetch된 데이터를 즉시 사용 (초기 네트워크 요청 없음)
  // staleTime이 지나면 fetchDashboardStats()로 자동 재검증
  const { data, error } = useQuery({
    queryKey: ["dashboard-stats"],
    queryFn: fetchDashboardStats, // 클라이언트 API 함수
    staleTime: 30 * 1000, // 30초
  });
 
  if (error) return <ErrorDisplay message={error.message} />;
  return <StatsDisplay stats={data} />;
}