[Next.js 14] 서버 컴포넌트 / 클라이언트 컴포넌트
1. 서버 컴포넌트
- 서버에서 동작하는 컴포넌트로 useEffect, useState 등의 훅을 사용할 수 없다.
- 서버에서 API 호출이 이루어지고 렌더링할 정보를
트리 객체 로 가져온다
- 이는 기존에 서버에서 완성된 HTML을 가져와 브라우저에 표시하는
SSR(Server-side Rendering)과는 구별된다.
- 백엔드 API 로직이 필요없으며, 바로 DB에 접근하여 CRUD 작업을 수행할 수 있다.
- Next 13, 14버전에서 프로젝트 내부에 위치한 컴포넌트는 기본적으로 서버 컴포넌트로 동작.
2. 클라이언트 컴포넌트
- 컴포넌트 최상단에 "use client"로 선언해야 한다.
(선언하지 않을 시 개발화면에 메시지 출력)
- 클라이언트 컴포넌트 내부에서는 서버 컴포넌트를 사용할 수 없다. (import로 사용 불가)
(단, children의 형태로 서버 컴포넌트를 사용할 수 있다.)
- "use client" 선언의 의미는 서버에서 렌더링되고, 클라이언트에서 hydration 작업이 수행됨을 의미한다.