RSC(React ServerComponent)

🤔 React 19v에서 안정화되는 RSC에 대해 알아보자!

React Server Component

번들링 전에 클라이언트 앱이나 SSR 서버와는 분리된 환경에서 렌더링 되는 새로운 유형의 컴포넌트

서버 컴포넌트는
1. 빌드 시간에 CI 서버에서 한번 실행되거나
2. 각 요청마다 웹 서버를 통해 실행 가능

* 번들링 = 하나의 순수 JS 코드로 묶기 전
* 분리된 환경 = React 서버 컴포넌트의 서버

서버 컴포넌트(Server Component) vs SSR(Server-Side Rendering)

SSR은 "브라우저 대신 서버에서 HTML을 만들어주는 기술"이고,
Server Component는 "React 컴포넌트를 서버에서 실행할 수 있게 한 React의 새로운 아키텍처"

구분	React Server Components	Server-Side Rendering
무엇인가	React의 컴포넌트를 서버에서 실행하는 새로운 개념	클라이언트용 React 앱을 서버에서 미리 렌더링하는 기술
출력물	React 내부 구조(트리)를 RSC payload(JSON 스트림)로 직렬화	완성된 HTML 문자열
실행 위치	서버 (Node/Edge 등)	서버 (Node/Edge 등)
클라이언트로 전송되는 것	RSC 결과(JSON-like 데이터) + 일부 HTML	전체 HTML + hydration용 JS
hydrate 되는 대상	Client Component만	전체 React 트리
Next.js에서 구현한 형태	App Router	Pages Router
데이터 페칭 위치	RSC 내부 (await fetch())	getServerSideProps() 같은 SSR 함수 내부

* hydration = 서버에서 렌더링된 정적인 HTML에, 브라우저에서 React의 이벤트 핸들러와 상태를 연결하는 것

---

왜 Server Component는 async 함수여도 되는가

React Server Component는 서버 환경에서 실행되기 때문에
브라우저에서 못하는 일을 할 수 있음:
예를 들어 DB 쿼리, 파일 읽기, 외부 API 호출, ...

export default async function Page() {
	const data = await fetch("https://api.example.com/products").then(r => r.json());
    return <ProductList products={data} />;
}

이게 가능한 이유는

• RSC는 브라우저가 아니라 서버에서 실행되기 때문에 await을 써도 문제 없음
• React는 이걸 감싸서 "비동기적 렌더링 가능한 컴포넌트"로 처리
• 내부적으로 React 서버 렌더러가 await가 끝날 때까지 기다렸다가 결과를 스트리밍

⚠️ 반대로 클라이언트 컴포넌트는 async일 수 없음

브라우저에서 실행되는 컴포넌트는 렌더링이 동기적이어야 하기 때문
React의 렌더러는 클라이언트 쪽에서 async 컴포넌트를 지원하지 않음
(데이터는 useEffect나 use 훅 등을 통해 별도로 불러와야 함)

---

SSR과 RSC가 같이 쓰일 때

Next.js App Router에서는 이 둘이 같이 작동
1. Next.js 서버가 요청을 받음
2. 서버 컴포넌트(RSC) 실행 -> 데이터 fetch -> React 트리 생성
3. 서버가 그걸 SSR 형태로 HTML로 "초기 스트림" 전송
4. 동시에 브라우저로 RSC payload(JSON 스트림)도 전송
5. 브라우저에서 Client Component hydrate
즉,

App Router는 RSC로 구성된 React 트리를 SSR 방식으로 스트리밍

---

정리

SSR은 HTML을 미리 만들어주는 기술
RSC는 React의 일부를 서버에서만 실행하게 해주는 새로운 설계