서버에서 렌더되는 컴포넌트의 책임과 제약을 이해합니다.
App Router 컴포넌트는 기본적으로 Server Component입니다. 서버에서 데이터와 비밀 값에 가까이 접근하고 클라이언트로 보내는 JavaScript를 줄일 수 있습니다.
Server Component에서는 useState, 이벤트 핸들러, window 같은 브라우저 API를 사용할 수 없습니다.
DB와 외부 API 접근은 서버에 두되 반환 JSX와 Client Component props에 비밀 값을 포함하지 않습니다.
서버에서 읽은 환경변수를 JSX에 출력하면 브라우저 응답으로 노출됩니다.
로컬 프로젝트에서 확인해보세요서버에서 계산한 완료율을 표시하되 원본 배열은 클라이언트로 보내지 마세요.
function getServerSummary() {
const records = [true, true, false];
return { total: records.length, completed: records.filter(Boolean).length };
}
export default function Page() {
const summary = getServerSummary();
return (
<main>
<h1>서버 요약</h1>
<p>
{summary.completed}/{summary.total} 완료
</p>
</main>
);
}