When to use Server and Client Components?

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>
)

상품 상세 관리자 대시보드 위치 피드

선택 시나리오

관리자 대시보드 필터

클라이언트 필터, lifecycle, 브라우저 저장소 접근이 많아 인터랙션 중심 구성이 필요합니다.

권장 아키텍처: Client Component 중심

UI 상태와 이벤트 흐름이 복잡하면 Client 경계를 넓히되, 민감 데이터 접근은 Server action/API로 분리합니다.