[NEXT] React Server Component

✅ React Server Component란?

서버 컴포넌트는 브라우저에 JS 코드가 전송되지 않고, 서버에서 실행된 결과(HTML)만 전달되는 컴포넌트

---

⚠️ Page Router 버전의 Next.js에는 어떤 문제가 있을까?

Page Router에서는 상호작용이 필요 없는 컴포넌트까지 JS 번들에 포함되기 때문에,

• 번들 크기가 불필요하게 커지고
• 그 결과 하이드레이션과 TTI(Time to Interactive)가 지연되는 문제가 발생합니다.

해결 방법

상호작용이 없는 컴포넌트들, 즉 브라우저에서 하이드레이션이 될 필요 없는 컴포넌들을 JS 번들에서 제외 시키는 것입니다.

💡 이를 해결하기 위해서 나온것이 React Server Component입니다!

React Server Component는 서버에서 HTML로 렌더링되어 클라이언트에 전달되고, 클라이언트에는 상호작용이 필요한 컴포넌트만 JS 번들에 포함되어 전송됩니다.

---

⚠️ 사용할 때 주의할 점들

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

• 예를 들어, React Hooks나 이벤트 핸들러(onClick 등)처럼 클라이언트에서 실행되어야 하는 코드는 사용할 수 없습니다.
• 또한, 브라우저에서 동작하는 기능을 포함한 라이브러리(e.g. window, document 사용 라이브러리)도 서버 컴포넌트에서는 호출할 수 없습니다.

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

• 서버 컴포넌트 : 서버측에서만 실행되는 컴포넌트
• 클라이언트 컴포넌트 : 서버와 클라이언트에서 모두 실행됨

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

서버에서 실행될 때는 클라이언트 컴포넌트와 서버 컴포넌트 모두의 코드가 존재하지만, 브라우저에서 하이드레이션이 진행될 때는 클라이언트 컴포넌트의 코드만 존재하고, 서버 컴포넌트의 코드는 브라우저에 전달되지 않기 때문에 import할 수 없습니다.

즉, 브라우저 입장에서는 존재하지 않는 서버 컴포넌트를 불러오려는 셈이기 때문에 에러가 발생합니다.

이러한 문제를 방지하기 위해, Next.js는 클라이언트 컴포넌트에서 서버 컴포넌트를 import하면 자동으로 해당 서버 컴포넌트를 클라이언트 컴포넌트로 전환시켜 처리합니다.

💡 만약 정말 클라이언트 컴포넌트에서 서버 컴포넌트를 사용해야 한다면, 어떻게 해야 할까?

// 서버 컴포넌트
export default function ServerComponent() {
  console.log("서버컴포넌트!");
  return <div></div>;
}

// 클라이언트 컴포넌트
"use client";
import { ReactNode } from "react";
export default function ClientComponent({
  children,
}: {
  children: ReactNode;
}) {
  console.log("클라이언트 컴포넌트!");
  return <div>{children}</div>;
}

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

• 따라서, 이처럼 서버 컴포넌트를 children으로 전달하면 문제 없이 사용할 수 있습니다.
• 이 방식은 서버 컴포넌트 → 클라이언트 컴포넌트 흐름을 유지하면서 컴포넌트를 안전하게 구성하는 방법입니다.

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

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

함수는 직렬화가 불가능하기 때문에, 서버 컴포넌트에서 클라이언트 컴포넌트로 props로 전달할 수 없습니다.

---

🔄 서버 컴포넌트의 동작방식

1. 서버 컴포넌트 선실행

• 페이지를 렌더링할 때, 서버 컴포넌트들이 먼저 실행됩니다.
• 이 과정은 브라우저가 아닌 서버에서 수행됩니다.

2. 별도의 서버 컴포넌트 실행 과정 존재

• 클라이언트 컴포넌트와는 별도로, 서버 컴포넌트만 먼저 실행시키는 과정이 추가로 존재합니다.

3. RSC Payload 생성

• 서버 컴포넌트 실행 결과는 HTML이 아닌, RSC(RSC Payload)라고 불리는 JSON 유사 문자열 형태로 생성됩니다.
• RSC Payload에는 서버 컴포넌트의 모든 데이터가 포함됩니다.
  • 서버 컴포넌트의 렌더링 결과
  • 연결된 클라이언트 컴포넌트의 위치
  • 클라이언트 컴포넌트에게 전달하는 Props 값
• 이 페이로드는 React가 클라이언트에서 해석한 뒤, 그 결과를 바탕으로 DOM을 생성해 실제 화면(UI)을 구성합니다.