# Section3
4. 리액트 서버 컴포넌트 이해하기
React Server Component란?
- 상호작용이 없고 서버측에서만 실행되는 컴포넌트
- JS Bundle을 전달하는 과정에서 서버 컴포넌트를 제외하고 클라이언트 컴포넌트를 포함한다
⇒ JS Bundle 경량화 + 하이드레이션 시간 단축
서버 컴포넌트
상호작용 X, 서버측에서 사전 렌더링 진행시 딱 1번만 실행
클라이언트 컴포넌트
상호작용 O, 사전 렌더링 진행시 1번 + 하이드레이션 진행시 1번 ⇒ 총 2번 실행
공식 문서에서
대부분을 서버 컴포넌트로 구성하고
클라이언트 컴포넌트는 꼭 필요한 경우에만 사용하라고 권장하고 있다
(App Router에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 작동한다)
클라이언트 컴포넌트로 변경하기
클라이언트 컴포넌트로 변경하고 싶다면 파일 상단에 "use client" 를 작성한다
현재 page.tsx는 서버 컴포넌트 상태이다
그런데 브라우저상에서 작동하는 useEffect가 작성되어 있어 에러가 나타난다
브라우저에서 작동할 수 있도록 클라이언트 컴포넌트로 변경해줘야 한다
수정
Link 태그 ≠ 상호작용
Link는 HTML 고유의 기능이다
자바스크립트의 기능을 사용하는 상호작용이 아니기 때문에
App Router에서 상호작용이라고 볼 수 없다
5. 리액트 서버 컴포넌트 주의사항
1. 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다
서버측에서만 실행되기 때문에 브라우저에서는 아예 실행되지 않는다
2. 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다
서버 컴포넌트 실행 → 서버에서 1번
클라이언트 컴포넌트 실행 → 사전 렌더링을 위해 서버에서 1번 + 하이드레이션을 위해 브라우저에서 1번
3. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다
클라이언트 컴포넌트에서 서버 컴포넌트를 직접 import하여 실행하면
서버측에서는 클라이언트 컴포넌트와 서버 컴포넌트가 둘 다 실행되지만
브라우저측에서는 서버 컴포넌트가 JS Bundle로 포함되지 않았기 때문에 실행이 되지 않는다
⇒ 위와 같은 상황이 생기면 Next.js는 자동으로 서버 컴포넌트를 클라이언트 컴포넌트로 변경한다
서버 컴포넌트가 클라이언트 컴포넌트로 변경되지 않게 하려면?
클라이언트 컴포넌트에서 children이라는 props로 서버 컴포넌트를 넘겨 받아 사용해야한다
(서버 컴포넌트의 결과물만 children이라는 props로 전달)
4. 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가
직렬화
객체, 배열, 클래스 등의 복잡한 구조의 데이터를
네트워크 상으로 전송하기 위해 아주 단순한 형태로 변환하는 것자바스크립트의 함수는 직렬화가 불가능하다
때문에 함수 값은 서버 컴포넌트에서 클라이언트 컴포넌트로 향하는 Props가 될 수 없다
