React 18v 부터 새롭게 추가된, 새로운 유형의 컴포넌트

서버 측에서만 실행되는 컴포넌트(브라우저에서 실행X)

Page Router의 단점 중에서 상호작용에 필요하지 않은 컴포넌트가 JS Bundle에 포함되는 점이 있습니다.

App Router 에서는 React Server Component로 이를 해결할 수 있게 되었어요.
서버에서만 실행되고, 수화(Hydration)에 필요없기에 브라우저에서는 실행되지 않아요.
즉 상호작용에 필요하지 않은 서버 컴포넌트는 사전 렌더링 시 서버에서 1번만,
상호작용에 필요한 클라이언트 컴포넌트는 (사전 렌더링 시) 서버에서 1번, 브라우저에서 1번 실행될 수 있게 구분될 수 있게 되었어요!
JS Bundle의 크기가 상호작용에 필요한 클라이언트 컴포넌트만 담아 작아질 수 있게 되었습니다!

리액트 서버 컴포넌트 주의사항

1. 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다.
   사전 렌더링 시 서버에서 한 번, Hydration을 위해 브라우저에서 한 번 더 실행돼요.

2. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다.
   서버 컴포넌트는 이미 서버에서 실행되고 JS Bundle에 포함되지 않아요. JS Bundle에 없는 서버 컴포넌트를 import 받는 건 불가능!
   클라이언트 컴포넌트에서 서버 컴포넌트를 import 하게 될 경우, Next에서 서버 컴포넌트를 자동으로 클라이언트 컴포넌트로 전환한다는 점을 유의해야 합니다. 사실, 성능을 위해 서버 컴포넌트로 전환시켰는데 다시 클라이언트 컴포넌트로 전환되는 건 좋지 않은 상황입니다.
   ⭐️ 이럴 경우에는 서버 컴포넌트를 Props로 전달시키면 됩니다! 이 때는 서버 컴포넌트가 클라이언트 컴포넌트로 전환되지 않아요.

3. 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화되지 않는 Props(함수)는 전달 불가하다.
   직렬화되지 않은 Props는 함수를 말합니다. 사전 렌더링 과정 중 페이지를 구성하는 모든 컴포넌트들 중 서버 컴포넌트들만 따로 실행 후 클라이언트 컴포넌트들과 합쳐져 HTML 을 완성합니다. 이 때 직렬화되지 못하는 함수를 클라이언트 컴포넌트에게 전달 시 런타임 에러가 발생해요!

RSC Payload

React Server Component의 순수한 데이터(결과물)
React Server Component를 직렬화한 결과
RSC Payload에는 서버 컴포넌트의 모든 데이터가 포함됨

• 서버 컴포넌트의 렌더링 결과
• 연결된 클라이언트 컴포넌트의 위치
• 클라이언트 컴포넌트에게 전달하는 Props 값