두 가지 종류의 컴포넌트

이 섹션에서 지금까지 작성한 모든 컴포넌트는 여러분이 미처 인지하지 못했을 수도 있는 곳, 즉 서버에서 실행되었습니다. 이는 별도로 설정한 특별한 모드가 아니라 기본값이며, Next.js에서 가장 핵심이 되는 개념입니다.

컴포넌트에는 정확히 두 가지 종류가 있으며, 각각은 다른 컴포넌트가 제공할 수 없는 이점을 제공합니다.

서버 컴포넌트: 기본값

• 페이지가 전송되기 전, 서버에서 한 번 실행됩니다
• async일 수 있으므로 컴포넌트 내부에서 바로 데이터를 await할 수 있습니다
• 브라우저로 JavaScript를 전송하지 않습니다: 사용자는 코드가 아닌 결과물을 다운로드합니다

문제점: 페이지가 브라우저에 도달할 때쯤이면 서버 컴포넌트는 이미 완료된 상태입니다. 그것은 스냅샷입니다. 아무것도 기억할 수 없고, 클릭에 반응하거나 변경될 수 없습니다.

Client 컴포넌트: 선택 적용 (opt in)

페이지가 반응하도록 하려면 파일 최상단에 다음 한 줄을 추가하여 브라우저용으로 지정합니다:

'use client';

이렇게 하면 해당 파일이 클라이언트 컴포넌트로 표시되며, 클라이언트 컴포넌트만 다음 항목을 사용할 수 있습니다:

• Hooks: useState, useEffect 등
• 이벤트 핸들러: onClick, onChange 등
• 브라우저 API: window, localStorage

이러한 트레이드오프(trade-off)를 살펴보세요. 서버 컴포넌트는 빠르고 조용하지만 고정되어 있습니다. 클라이언트 컴포넌트는 살아있지만 해당 코드를 브라우저로 다운로드하여 실행해야 합니다.

따라서 이제부터 모든 컴포넌트에 대해 던져야 할 질문은 "어느 것이 마음에 드는가?"가 아니라 "이 특정 부분에 사용자에 대한 반응성(respond)이 필요한가?"입니다. 대답이 아니오라면(대개 그렇습니다), 서버에 그대로 두세요.