React Server Component 에 대한 이해 - 1
목적
@gather_here 의 검색 결과 페이지를 새로 구축하면서, 서버 사이드 컴포넌트를 적용해보려고 시도 중이다.
최소한 상황에 따라 더 유리한 선택지가 있을 텐데, 무분별하게 "use client"를 도배하는 행동은 그만해야할 것 같았기 때문이다. 따라서 서버 vs 클라이언트를 선택할 나만의 기준 정도는 세워야하지 않을까 싶어서 도전하기로 했다.
RSC 를 찾아보게 된 이유
Next.js 를 사용할 때, "use client" 를 명시하지 않으면 기본적으로 서버 컴포넌트로 동작한다고 알고 있다.
그런데, 내가 이 상황에서 여러 React hook 을 활용하려고 하니 정작 웬만한 페이지는 "use client" 를 쓰지 않으면 안됐다. hook 을 사용하지 않고, 서버 컴포넌트로서 구현을 하려면 어떻게 해야하는지 먼저 알아보려고 했다.
그래서 Next.js 공식 문서를 살펴보던 중, Next.js 의 서버 컴포넌트는 RSC payload(React Server Component payload)를 기반으로 하고 있다고 되어있었다. 그럼 또 모르고 넘어갈 수 없지… 싶어서 알아보고, 내가 원하는 서버 컴포넌트를 구현해보도록 하기로 결정했다.
아래부터는 내가 참고한 글을 다시 나의 언어로 정리하는 과정이다. 참고한 글은 여기1.
RSC 이전 기존 React 컴포넌트의 동작
RSC 이전의 React 컴포넌트는 모두 CSR 로 동작했다.
CSR 은 기존의 웹 페이지들이 가지는 한계점(동적인 기능 제공 어려움)을 해결하기 위해 등장했다.
내가 이와 관련해 게시글을 작성했었는데, 여기2다. 요점은, 바닐라 JS 를 가지고 웹 사이트 요소들의 변화를 감지하려면 DOM 요소에 접근해 이전과 달라졌는지 직접 비교를 해야한다.
이런 동작원리를 구현해 낸 것이 바로 React 다. 그 유명한 Virtual DOM 을 통해 이 귀찮은 일을 해준 것이다.
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="/src/App.jsx"></script>
</body>
<html>
리액트를 쓰면서 이 형태를 자주 보았을 것이다. 클라이언트 사이드에서 <script> 를 통해 .js 파일을 로드하고, <div> 내에서 컨텐츠가 생성되는 방식이다.
처음에는 빈 html 문서였다가, 자바스크립트 파일을 다운로드 한 다음 부터에야 화면에 내용이 채워지게 된다. 클라이언트가 좋은 사양의 기기를 사용하거나 간단한 페이지의 경우 작업에 시간이 오래 걸리지 않겠지만, 사양이 좋지 않은 기기나 복잡한 앱의 경우 빈 화면이 보이는 시간이 길어지게 된다.
SSR + CSR === RSC
결국 여기에서 발생하는 불편함을 해소하고자, 클라이언트 사이드 렌더링과 서버 사이드 렌더링 방식을 혼합하게 된 것이다.
그래서 간단히는, html 문서에 내용을 미리 채워두는 방식이다. 모든 것을 CSR 로 처리하면 앞서 기술한 문제가 발생하니, “클라이언트가 완전히 빈 문서를 보게하는 것 보다 미리 만들어진 페이지를 조금이라도 보여주자“는 것이다.
이후, Hydration 과정을 통해 클라이언트 측에서 DOM 에 요소를 추가하고 이벤트 핸들러 같은 것들도 추가되면서 동적인 웹 앱이 만들어 지는 것이다.
정리
- CSR 방식으로 웹 사이트를 동적으로 만든 React 의 등장
- 동적인 웹 앱이 만들어지면서, 오히려 CSR 방식에서 UX 를 저해하는 현상이 두드러짐(자바스크립트 파일의 로딩이 길어지는 문제)
- Hydration 기법을 통해 이를 2의 단점을 보완하고, UX 를 개선하는 새로운 방식 등장(CSR + SSR)
다음 내용은 새로운 게시글로 작성해보자.