해결된 질문
24.01.12 12:12 작성
·
781
1
기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다.
여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠.
라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!
답변 1
3
2024. 01. 13. 10:44
안녕하세요. 딱 헷갈리기 좋은 부분에 대해 질문해주셨네요! 다른 분들도 궁금해하셨을 거 같습니다. 답변 드릴게요.
서버 컴포넌트는 서버에서 생성된 이후 일종의 JSON 형태로 클라이언트로 전달됩니다. 이렇게 전달된 컴포넌트는 SSR로 생성되는 경우와 달리 하이드레이션 단계가 생략되죠. 하이드레이션은 서버에서 생성된 HTML 코드를 동적으로 바꾸는 단계로 자바스크립트 코드가 필요합니다.
이처럼 서버 컴포넌트(RSC)는 하이드레이션이 없이 리액트 컴포넌트로써 역할을 해낼 수 있기 때문에 상대적인 자바스크립트 코드가 줄어듭니다.
하나의 페이지에서 서버 컴포넌트의 비중이 높으면 전체적으로 클라이언트의 도움을 받아 컴포넌트가 되는 코드(클라이언트 컴포넌트)가 적어지겠죠. 이는 자연스럽게 클라이언트로 전달되는 자바스크립트 코드를 줄이는 결과를 만듭니다.
답변을 보시고 이해가 안가신다면 언제든 추가 질문 남겨주세요! 질문해주셔서 정말 감사합니다.
2024. 01. 13. 13:17
아, 추가적으로 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!
2024. 01. 15. 22:32
다른 곳에 질문으로 남겨주셔서 답변 달아뒀습니다! 다른 분들도 궁금해하실까봐 링크 남겨둡니다.
https://www.inflearn.com/questions/1138436/comment/310926
2024. 01. 13. 13:05
아하 RSC는 Hydration 단계가 생략되는군요! 답답했는데 한번에 이해가 됐습니다. 감사합니다 😀