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

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

선택 시나리오

위치 기반 실시간 피드

geolocation과 폴링/효과 훅이 핵심이라 클라이언트 로직 비중이 높습니다.

권장 아키텍처: Client Component 중심

브라우저 API와 실시간 상태가 중심인 화면은 Client 주도 설계가 적합합니다.