리액트 서버 컴포넌트 이해하기

React Server Component란?
React 18v 부터 새롭게 추가된, 새로운 유형의 컴포넌트라서 서버측에서만 실행되는 컴포넌트입니다.(브라우저에서 실행은 X)

리액트 서버 컴포넌트는 상호 작용이 없어 서버 측에서만 실행되면 되는 컴포넌트들을 서버 컴포넌트들로 분류하고
반대로 상호작용이 있어서 하이드레이션이 필요하기 때문에 서버와 브라우저에서 모두 실행이 되어야 하는 클라이언트 컴포넌트라고 분류를 합니다.

그러면 Next.js에서 사전 렌더링 하는 과정 중 자바스크립트 번들로 전달하는 과정에서 서버 컴포넌트는 제외시키고 클라이언트 컴포넌트들만 JS Bundle에 포함이 되어서 브라우저에게 전달이 됩니다.

Next.js 공식 문서에서는 페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장하며, 클라이언트 컴포넌트는 꼭 필요한 경우에만 사용하라고 권장하고 있습니다.

기본적인 컴포넌트들을 서버 컴포넌트로 구성이 됩니다.
하지만 클라이언트 컴포넌트로 바꾸기 위해서는 "use client"를 컴포넌트 최상단에 적으면 됩니다.
예를들어

"use client";

import styles from "./page.module.css";

export default function Home() {
  return <div className={styles.page}>인덱스 페이지</div>;
}

그러면 Home 컴포넌트는 클라이언트 컴포넌트가 되서 브라우저에서 실행되는 React Hook 같은 것들이 실행 가능합니다.

서버 컴포넌트와 클라이언트 컴포넌트 구분

서버 컴포넌트와 클라이언트 컴포넌트의 구분으로는 간단하게
상호작용이 있어야 하면 클라이언트 컴포넌트로 만들고,
상호작용이 필요 없다면 서버 컴포넌트로 만들면 됩니다.

주의사항

서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안됨

서버측에서만 실행되는 컴포넌트이기 때문에 브라우저에서만 실행되는 Reach Hook이나 Event handler또한 사용이 불가능하고
라이브러리의 코드로 인해서도 오류가 발생할 수 있습니다.

클라이언트 컴포넌트는 클라이언트에서만 실행되지 않음

서버 컴포넌트는 서버측에서만 실행이 되니깐 그 반대인 클라이언트는 클라이언트 측에서만 실행되는거라고 오해하기 쉽습니다.
클라이언트 컴포넌트는 일반적인 컴포넌트처럼 사전 렌더링을 위해 서버에서 1번 실행하고 하이드레이션을 위해 브라우저에서 1번 실행해 서버와 클라이언트에서 모두 실행됩니다.

클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없음

클라이언트 컴포넌트에서 서버 컴포넌트를 import를 할 수 없습니다.
클라이언트 컴포넌트의 코드는 서버와 브라우저에서 모두 실행이 되는데 서버 컴포넌트의 코드는 오직 서버에서만 실행이 되기에 import를 하면 오류가 발생합니다.
클라이언트 컴포넌트에서 서버 컴포넌트를 import할 때 서버 컴포넌트는 클라이언트 컴포넌트로써 작동이 되게 됩니다.
이런 경우 클라이언트 컴포넌트의 개수가 많아져 브라우저에게 전달되는 자바스크립트 번들의 용량도 커지기에 하이드레이션까지 걸리는 시간이 오래 걸리는 단점이 존재해 주의하셔야 합니다.

만약 전달을 해야 한다면 children props를 통해서 전달하는 방법이 존재 합니다.

서버 컴포넌트에서 클라이언트에게 직렬화 되지 않는 Props는 전달 불가하다.

직렬화란(Serialization)? 객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해 아주 단순한 형태(문자열, Byte)로 변환하는 것입니다.

자바스크립트의 함수는 직렬화가 불가능합니다.
왜냐하면 자바스크립트의 함수는 어떠한 값이 아닌 코드블럭들을 포함하고 있는 특수한 형태를 가지고 있고, 다양한 환경에 의존하고 있는 경우가 많기에 직렬화로 표현하기 어렵기 때문입니다.
따라서 서버 컴포넌트에서 클라이언트 컴포넌트로 함수를 props로 전달이 불가 합니다.