Server Component

서버 컴포넌트 UI 준비

서버 컴포넌트의 의미와 제약을 실행 위치 기준으로 정리한다. 먼저 서버에 두고, 꼭 필요한 부분만 클라이언트로 내린다.

기본값App Router의 기본 실행 위치

use client가 없으면 컴포넌트는 서버 컴포넌트로 동작한다.

장점민감한 로직 보호

서버에서만 필요한 데이터 접근 코드와 비밀 값을 브라우저로 보내지 않는다.

제약상호작용 불가

useState, onClick, window 같은 브라우저 기능은 직접 사용할 수 없다.

설계 감각 먼저 서버에 두고 필요한 부분만 클라이언트로 내린다

초기 화면과 데이터 조회는 서버에서 처리하고, 사용자의 입력과 즉시 반응이 필요한 부분만 클라이언트 경계로 분리한다.

서버·클라이언트 경계값

데이터컴포넌트가 서버 데이터에 직접 접근해야 하는지 본다.
상호작용클릭, 입력, 로컬 상태가 필요한지 확인한다.
전달서버에서 준비한 값을 props로 클라이언트 컴포넌트에 넘긴다.

핵심: 서버 컴포넌트는 React 컴포넌트를 어디에서 실행할지 선택하게 해 주는 App Router의 기준이다.