리액트 서버 컴포넌트(RSC)란 무엇일까?

개요

서버 사이드 렌더링을 공부하던 필자는 리액트 서버 컴포넌트도 서버에서 렌더링 되는 건 똑같은데 뭐가 다른 건지

궁금했다!

 

서버 사이드 렌더링이 뭔데?

서버 사이드 렌더링에 대해 개념이 부족하다면 먼저 이 글을 읽고 오늘걸 추천한다.

https://azaz-jeongwoo.tistory.com/4

SSR과CSR개념 확실히 잡기

서버 컴포넌트란?

리액트 서버 컴포넌트는 서버 측에서 컴포넌트를 미리 렌더링 된 마크업을 생성후 클라이언트에게 전달되어

사용자에게 그려지는 방식이다.

 

서버에서 렌더링된 컴포넌트는 직렬화 가능한 상태로 클라이언트에게 데이터가 전달된다.

함수, 날짜등의 데이터는 직렬화 불가능한 데이터로 취급되므로 서버 컴포넌트에서 작성할 수 없다.

따라서 useState, useEffect 등의 State Hooks는 사용할 수 없다.

 

사용자 이벤트 등의 코드를 작성할 수 없기 때문에 data fetching에 적절할 거 같다는 생각이 든다!

 

서버 컴포넌트의 이점

제로 번들 컴포넌트

기존에 리액트의 모든 컴포넌트는 브라우저에서 다운로드된다. 그래서 컴포넌트 코드의 수가 많거나 외부 라이브러리를 많이 사용한다면

컴포넌트의 번들 사이즈가 커져서 사용자에게 보이는 시간이 더 길수밖에 없다.

 

하지만 서버 컴포넌트의 경우 위에 문제점들을 해결할 수 있다. 해당 컴포넌트의 코드 및 번들이 서버에서 다운되고 브라우저에서는 전송되지 않는다. 직렬화 가능한 상태 즉 JSON으로 클라이언트에게 전달돼서 렌더링 되기 때문에 제로 번들 사이즈의 특징을 가졌기 때문에 사용자에게 훨씬 빠르게 컴포넌트를 보여줄 수 있다.

 

SSR과 다른 점

둘 다 서버에서 렌더링이 된다는 공통점이 있는데 어떤 부분이 다른 걸까?

첫 번째로는 기본적으로 서버 사이드 렌더링은 JS번들이 클라이언트에게 전달되지만, 서버컴포넌트는 JS번들이 전달되지 않는다.

위에서 말한 제로 번들 사이즈의 특징 때문이다! (UX향상)

 

두 번째는 리액트 서버 컴포넌트는 클라이언트의 state를 유지하면서 리렌더링 할 수 있지만. SSR의 경우 서버에서 HTML을 보내서 렌더링 되기 때문에 refresh시 HTML문서 자체를 업데이트해야 렌더링이 된다.

 

마치며

내 생각은 서버 컴포넌트를 사용하기 위해선 SSR의 환경이 필요해야 할거 같다.

블로그를 적으면서도 아직도 SSR과 CSR의 개념이 헷갈린다.. 여러 블로그를 계속계속 찾아봐야겠다.

 

참고

https://yiyb-blog.vercel.app/posts/look-around-server-components

리액트 서버 컴포넌트, 간단하게 알아보기

https://frorong.tistory.com/entry/RSC-%EA%B0%9C%EB%85%90-%EB%B0%94%EB%A1%9C%EC%9E%A1%EA%B8%B0-RSC%EC%99%80-css-in-js-React-Server-Component

[React] RSC 개념 바로잡기! RSC와 css in js. (React Server Component)