[Next.js] Server component vs Client component

서버 컴포넌트 vs 클라이언트 컴포넌트

• 처음 백엔드 서버에서 클라이언트 컴포넌트와 서버 컴포넌트가 모두 렌더링
• 클라인트 컴포넌트만 프론트엔드에서 다시 렌더링, 다시 hydrated(activate)
• 클라이언트 컴포넌트의 자바스크립트는 사용자가 다운로드하여 실행하고, 서버 컴포넌트의 자바스크립트는 사용자가 다운로드 X

 

• 서버 컴포넌트는 딱 한번만 서버에 의해 실행 -> 유저는 HTML 얻음
• 그 다음, 클라이언트 컴포넌트 hydrate -> 상호작용 가능
  • 모든 이벤트 리스너 추가, useState, API, 지리 정보..etc
  • 원하는 경우 클라이언트 컴포넌트를 서버 컴포넌트 내에 포함 가능 (반대의 경우 X)
  • "use client"를 쓰지 않으면, 기본적으로 모두 서버 컴포넌트이다.