RSC vs SSR, 비슷해 보이지만 다르다!

RSC와 SSR은 겉으로 보기에는 둘 다 서버에서 발생하고 콘텐츠를 더 빠르게 렌더링하는 것을 목표로 하기 때문에 비슷해 보이여요. 하지만 이 둘은 서로 다른 목적을 가지고 있습니다.

1. 서버 사이드 렌더링 (SSR)

SSR은 서버에서 클라이언트 측 React의 전체 버전을 실행하여 전체 컴포넌트 트리를 HTML로 렌더링한 후 클라이언트에 전송합니다.

작동 과정

1.서버가 완전한 HTML을 생성하여 전송
2.브라우저가 HTML을 즉시 표시 (이때 보이지만 클릭 안됨)
3.JavaScript 다운로드 및 실행
4.React가 HTML을 "Hydration"
5.이제 인터랙티브하게 동작

💡

Hydration이란?
SSR로 받은 HTML은 처음에는 죽어있는상태에요. 이후 JavaScript가 로드되면서 이벤트 리스너를 연결하고 상태 관리를 시작하는데 이 과정을 "Hydration"이라고 합니다. 즉, 살아나는 과정인거죠 Hydration이 완료되어야 버튼 클릭, 입력 등이 작동하고 코드가 살아나게 됩니다

장점

더 빠른 초기 로드: 클라이언트가 완전히 렌더링된 HTML을 받기 때문에 페이지를 더 빨리 볼 수 있습니다.
SEO 친화적: 검색 엔진이 페이지를 쉽게 크롤링할 수 있습니다.
클라이언트 측 부하 감소: 서버가 무거운 작업을 처리합니다.

단점

초기 렌더링 후 상호작용을 위해서는 여전히 클라이언트 측 자바스크립트에 의존해야 합니다.
전체 Hydration 필요: 모든 컴포넌트가 인터랙티브하게 되려면 모든 JavaScript를 다운로드해야 합니다.
큰 JavaScript 번들: 모든 컴포넌트 코드가 클라이언트로 전송됩니다.
높은 서버 부하: 매 요청마다 전체 페이지를 렌더링해야 합니다.

2. 서버 컴포넌트 (RSC)

서버 컴포넌트의 핵심은 컴포넌트입니다. 각 컴포넌트가 개별적으로 렌더링될 수 있어, 전체 페이지를 다시 로드하지 않고 서버에서 UI의 특정 부분을 동적으로 업데이트가 가능합니다.

To-do 앱을 예시로 들어볼게요. 헤더, 사이드 메뉴, 푸터는 정적이지만, 중앙의 할 일 목록은 동적입니다. 이때, 서버 컴포넌트를 사용하면 할 일 항목을 추가하거나 제거할 때 변경된 해당 컴포넌트 부분만 업데이트하고 정적인 부분은 업데이트 되지 않습니다.

서버 컴포넌트의 출력 형식은 기본적으로 HTML을 출력하지 않으며, 스트림 가능한 텍스트 형식(JSON 조각과 유사)으로 출력됩니다. 클라이언트 측의 가벼운 범용 자바스크립트가 이 형식을 HTML로 역직렬화하여 업데이트를 처리합니다.

장점

세밀한 업데이트: 변경이 필요한 컴포넌트만 업데이트하여 데이터 전송량과 클라이언트 측 자바스크립트 코드가 줄어듭니다.
간결한 데이터 패치: 각 서버 컴포넌트가 자신의 데이터를 개별적으로 가져올 책임이 있어 데이터 관리가 단순해집니다.
Streaming 지원: 준비된 부분부터 점진적으로 전송하여 더 빠른 초기 렌더링을 제공합니다.
Partial Hydration: 인터랙션이 필요한 부분만 Hydration하여 성능을 향상시킵니다.

💡

Streaming이란?
RSC의 핵심 기능 중 하나입니다. 전체 페이지가 준비될 때까지 기다리지 않rh, 준비된 컴포넌트부터 순차적으로 전송됩니다. 이로 인해 느린 데이터 소스가 있어도 빠른 부분은 먼저 표시되어 사용자 경험 크게 향상하게됩니다.

언제 무엇을 사용할까?

SSR이 적합한 경우

블로그, 뉴스 사이트
마케팅 랜딩 페이지
SEO가 최우선인 경우
콘텐츠가 정적이고 자주 변하지 않는 경우

RSC가 적합한 경우

대시보드 애플리케이션
소셜 미디어 피드
전자상거래 사이트
정적 콘텐츠와 동적 인터랙션이 혼재된 경우
JavaScript 번들 크기를 최소화해야 하는 경우

요약

구분	서버 사이드 렌더링 (SSR)	서버 컴포넌트 (RSC)
주요 대상	전체 페이지	특정 UI 부분
주요 목적	초기 페이지 로드	동적인 부분 업데이트
작동 원리	전체 컴포넌트 트리를 HTML로 렌더링	개별 컴포넌트를 스트림 가능한 형식으로 렌더링 및 업데이트
데이터 패치	보통 페이지 컴포넌트에서 모든 데이터를 가져와 하위 컴포넌트로 전달	각 컴포넌트가 필요한 데이터를 자체적으로 가져옴

참고

https://www.youtube.com/watch?v=jEJEFAc8tSI

https://www.angularminds.com/blog/the-difference-between-rsc-and-ssr-in-react