서버 컴포넌트를 작은 책임으로 분리해 조합합니다.
Server Component도 일반 React 컴포넌트처럼 합성합니다. 데이터 조회, 업무 계산, 표시를 책임별 함수로 나누면 변경과 테스트 범위가 작아집니다.
Client Component를 자식으로 사용할 수 있지만 서버 전용 모듈이 클라이언트 그래프로 넘어가지 않게 합니다.
서버에서 만든 JSX를 children으로 Client Component에 전달하는 합성 패턴도 가능합니다.
편의를 위해 페이지 전체에 use client를 붙이면 서버 전용 이점과 번들 절감이 사라집니다.
로컬 프로젝트에서 확인해보세요Stats 컴포넌트를 추가해 완료율을 표시하세요.
function CourseHeader({ title }) {
return (
<header>
<h1>{title}</h1>
</header>
);
}
function CourseList({ items }) {
return (
<ul>
{items.map((x) => (
<li key={x.id}>{x.title}</li>
))}
</ul>
);
}
export default function Page() {
const items = [
{ id: 1, title: "라우팅" },
{ id: 2, title: "캐시" },
];
return (
<main>
<CourseHeader title="Next.js" />
<CourseList items={items} />
</main>
);
}