1관문. Server-Client Composition

관문 1 / 7

RSC에서 DB 데이터를 fetch하고 그 데이터를 RCC로 전달하는 조합 패턴을 구현하라.

📖 이론 비급

Server-Client Composition: 경계 설계

RSC는 서버에서만 실행되어 DB, 파일 시스템에 직접 접근할 수 있다. RCC는 useState, 이벤트 핸들러 등 인터랙티브 기능을 사용할 수 있다.

핵심 규칙:

RSC는 RCC를 import할 수 있다 (데이터를 props로 전달)
RCC는 RSC를 import할 수 없다 (children으로 전달은 가능)
RCC 안에 RSC를 import하면 해당 RSC도 클라이언트 번들에 포함된다

⚔️ 수련 코드

// app/posts/page.js (RSC - 서버 컴포넌트)
import { LikeButton } from './LikeButton'; // RCC

async function getPosts() {
  // 서버에서 직접 DB 접근 또는 내부 API 호출
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5', {
    cache: 'force-cache', // 정적 캐싱
  });
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts(); // await 직접 사용 가능 (RSC)

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <span>{post.title}</span>
          {/* RSC가 RCC에 서버 데이터를 props로 전달 */}
          <LikeButton postId={post.id} />
        </li>
      ))}
    </ul>
  );
}

// app/posts/LikeButton.js (RCC - 클라이언트 컴포넌트)
// TODO: 'use client' 선언 후 useState로 좋아요 수를 관리하라

Open Sandbox