Server Component

서버 컴포넌트 UI 준비

서버 컴포넌트의 의미, 필요한 이유, 작동 원리, 기본 예시를 실행 위치 기준으로 정리합니다.

기본값

App Router의 기본 실행 위치

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

장점

민감한 로직 보호

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

제약

상호작용 불가

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

설계 감각

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

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

서버·클라이언트 경계값

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