React Server Component
리액트 서버 컴포넌트는 리액트 18에서 공개된 기능이다.
간단하게 말하면 서버 컴포넌트란 서버에서 렌더링되는 컴포넌트이다.
서버에서 렌더링 된 컴포넌트는 렌더링이 된 후에 클라이언트로 전달이 되고 사용자에게 보여지는 것이다.
서버 컴포넌트의 특징
- 리렌더링 되지 않는다. -> 서버에서 렌더링이 되고 난 뒤에 클라이언트로 넘어오기 때문에
- 서버 리소스에 접근이 가능하다. (파일 시스템, 데이터베이스 등)
- 자바스크립트 번들에 포함되지 않는다. -> 제로 번들 사이즈
- 코드 스플리팅을 자동으로 지원한다. -> lazy loading, dynamic import 등을 명시해줄 필요가 없다.
- 유저 인터랙티비티 제공 불가능 -> state 관리, effect 관리 등을 사용할 수 가 없다.
서버 컴포넌트 = 서버 사이드 렌더링인가?
결론부터 말하자면 서버 컴포넌트는 서버 사이드 렌더링과는 다른 개념이다.
서버 사이드 렌더링이란 서버에서 리액트 컴포넌트를 HTML로 렌더링한 후 클라이언트에 전달한 방식이다.
클라이언트느 초기 로딩 시 서버에서 완성된 HTML을 받고, 이후에 리액트가 이를 하이드레이션하여 클라이언트 상호작용을 활성화한다,
서버 사이드 렌더링의 흐름은 다음과 같다.
- 클라이언트가 페이지 요청
- 서버가 리액트 컴포넌트를 HTML로 렌더링
- 브라우저가 HTML로 표시
- 클라이언트가 리액트 코드를 하이드레이션하여 상호작용 활성화
리액트 서버 컴포넌트는 일부 리액트 컴포넌트를 서버에서 렌더링하고, 그 결과를 클라이언트로 리액트 요소 트리 자체로 전송한다.
하이드레이션이 필요 없으며 클라이언트와 서버 컴포넌트를 조합하여 최적화된 렌더링이 가능하게 한다,
리액트 서버 컴포넌트의 흐름은 다음과 같다.
- 클라이언트가 페이지 요청
- 서버가 일부 리액트 컴포넌트를 렌더링하고 리액트 요소 트리를 반환
- 클라이언트에서 서버 컴포넌트 결과와 클라이언트 컴포넌트를 통합하여 렌더링
서버 사이드 렌더링에서 백엔드 리소스에 접근을 하려면 최상위 페이지에서 getServerProps()와 같은 함수로 접근을 해야 하는 등, 세부적인 컴포넌트 단위에서는 백엔드 리소스에 접근하기가 힘들지만, 서버 컴포넌트를 사용하면 페이지 레벨에 상관없이 어떤, 어느 위치의 컴포넌트에서든 백엔드 리소스에 접근이 가능하다.
또, 서버 사이드 렌더링은 상태를 저장하고 리페칭을 하면 HTML을 다시 받아오기 때문에 상태의 저장이 불가능하지만, 서버 컴포넌트를 사용하면 리페칭을 하면 RSG payload라는 특별한 방법으로 다시 받아오기 때문에 상태의 저장이 가능하다.
서버 컴포넌트는 서버 사이드 렌더링의 대체제가 아니다.
대체 관계라기보다는 보완 관계라고 보면 될 것 같다.
예를 들어, 서버 사이드 렌더링으로 초기 렌더링 속도를 빠르게 만들어 주고, 서버 컴포넌트를 통해 제로 번들링을 구현하면 더욱 빠른 페이지를 제공해줄 수 있을 것이다.
