SSR과 RSC의 차이점에 관하여 질문이 있습니다.

손에 익는 Next.js - 공식 문서 훑어보기

해결된 질문

작성

815

기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다.
여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠.

라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!

react typescript next.js next.js13

답변 1

하조은

지식공유자

안녕하세요. 딱 헷갈리기 좋은 부분에 대해 질문해주셨네요! 다른 분들도 궁금해하셨을 거 같습니다. 답변 드릴게요.

서버 컴포넌트는 서버에서 생성된 이후 일종의 JSON 형태로 클라이언트로 전달됩니다. 이렇게 전달된 컴포넌트는 SSR로 생성되는 경우와 달리 하이드레이션 단계가 생략되죠. 하이드레이션은 서버에서 생성된 HTML 코드를 동적으로 바꾸는 단계로 자바스크립트 코드가 필요합니다.

이처럼 서버 컴포넌트(RSC)는 하이드레이션이 없이 리액트 컴포넌트로써 역할을 해낼 수 있기 때문에 상대적인 자바스크립트 코드가 줄어듭니다.

하나의 페이지에서 서버 컴포넌트의 비중이 높으면 전체적으로 클라이언트의 도움을 받아 컴포넌트가 되는 코드(클라이언트 컴포넌트)가 적어지겠죠. 이는 자연스럽게 클라이언트로 전달되는 자바스크립트 코드를 줄이는 결과를 만듭니다.

답변을 보시고 이해가 안가신다면 언제든 추가 질문 남겨주세요! 질문해주셔서 정말 감사합니다.