URL을 바꿔 시나리오를 전환해보세요. 같은 기능이라도 요구사항에 따라 권장 경계가 달라지는 실전 판단 흐름을 보여줍니다.
파일 구조
when-to-use-server-and-client-components/
└── page.tsx
?scenario=product-detail|admin-dashboard|location-feed핵심 파일 코드
const { scenario } = await searchParams
const selected = SCENARIOS[scenario ?? 'product-detail']
return (
<main>
<h2>{selected.title}</h2>
<p>{selected.architecture}</p>
</main>
)선택 시나리오
콘텐츠는 서버에서 빠르게 렌더하고, 좋아요 버튼만 클라이언트 상태를 사용합니다.
권장 아키텍처: Server + Client Composition
데이터/보안/초기 성능은 Server에서 처리하고, 최소 상호작용 조각만 Client로 분리하는 전형적 패턴입니다.