들어가기에 앞서
Next13을 공부를 하는데 Next13에서는 기본적으로 app 폴더를 사용하고 app 폴더 내부에 있는 컴포넌트들은 기본적으로 서버 컴포넌트라는 특징을 가지고 있습니다. 리액트를 사용하면서 SSR 방식으로 렌더링이 된다는 점은 알고있었는데 서버 컴포넌트랑 차이점이 있는건지 또 어째서 서버 컴포넌트가 나온건지 알아보겠습니다.
SSR
전통적인 웹페이지의 경우 사용자의 요청에 맞게 해당 하는 페이지를 보여주었습니다.
하지만 매번 요청을 해야한다는 특징이 있고 이로인해 불러오는 동안 화면이 깜빡이는 상황이 나오게 되었습니다. 다음은 동작과정입니다.
- 클라이언트가 url을 통해 이동을 합니다.
- 서버에서 HTML을 완성한 뒹 곧바로 클라이언트가 보고있는 페이지로 보내줍니다.
- 로드된 요소 (HTML, CSS)가 바로 그려집니다.
- 컴포넌트 내에 동적인 데이터를 채우기 위해 데이터를 서버의 API를 요청해서 받아옵니다.
- Hydration 과정과 데이터를 받아와서 HTML에 넣어주는 등 상호작용이 가능하게 됩니다.
CSR
화면의 깜빡임을 줄이고 매번 호출을 하는 서버 부하를 줄이고자 클라이언트에서 처리를 하는 방법을 생각을 했습니다.
- static file들을 불러옵니다. js, css, image등
- 페이지를 그리는데 필요한 동적인 data들을 fetch해옵니다.
- component를 그려줍니다.
- 동적인 웹 페이지가 완성이 됩니다.
CSR이 좋다고 생각하지만 문제점이 있습니다. 클라이언트에서 전부 처리를 하게하지만 이로인해 처음에 많은 양의 데이터를 받게되는것입니다. 이로인해 초기에 렌더링 속도가 너무 늦어지는 상황도 만들어지게 됩니다.
이를 통해 사람들은 생각을 하게됩니다.
- 매번 컴포넌트에서 api 요청을 하는데 해당 요청의 수를 줄일 수 없을까?
- 리액트 자체의 큰 번들 사이즈로 인해 인터렉션 제공까지의 시간을 줄일수는 없을까?
☝️😲 리액트팀은 서버사이드에서 리액트 렌더링을 할 수는 없을까? 라는 생각을 합니다.
리액트 18버전 이전에 사용한 방법
2018년 React 16 버전에서 Suspense 기능이 코드 분할 및 지연 로딩의 개념으로 등장하였습니다.
const MyComponent = React.lazy( () => import('./MyComponent') );
const WrapComponent = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
};위 Suspense는 초기 구동 시 불필요한 번들 사이즈를 최소화하는 방법으로 웹 최적화가 가능했었지만, CSR에서만 사용이 가능했었고, SSR에서 사용하고자 할 땐 서드파티 라이브러리를 사용해야만 했습니다.
React Server Component의 등장
React 18에서는 "React Server Components"가 되었습니다. 이를 통해 서버컴포넌트를 사용하면 서버와 클라이언트(브라우저)가 협력하여 React 앱을 렌더링 할 수 있습니다.
❓Server Component는 서버 사이드 렌더링 아닌가요?
아닙니다. 둘 다 이름에 Server가 들어가있지만 둘을 별개의 독립된 기능으로 이해하는 것이 좋습니다. RSC를 사용하는데 SSR을 사용할 필요가 없으며 그 반대도 마찬가지입니다.
SSR은 React 트리를 html 그 자체로 렌더링을 하기 위한 환경을 만들어 왔습니다. 서버와 클라이언트 컴포넌트를 구분하지 않으며 동일한 방식으로 렌더링을 해왔습니다.
하지만 SSR과 RSC를 결합해 서버 컴포넌트를 사용해 서버 사이드 렌더링을 수행하며 브라우저에서 적절하게 hydrate 될 수 있도록 할 수 있습니다.
💡 Hydrate : 렌더링된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트단에서 HTML 코드와 React인 JS 코드를 서로 매칭시키는 과정
Server Component가 필요한 이유
서버에서 렌더링을 수행할 경우 다음과 같은 장점이 있습니다.
- 서버는 무거운 모듈을 더욱 가볍게 이용할 수 있습니다. 예를 들어 브라우저에서 마크다운을 html로 렌더링을 하기위해선 무거운 npm 패키지를 이용해 바꿔주는 것을 하지않고도 서버에서 처리해서 보내줄 수 있습니다.
- 서버는 데이터베이스, GraphQL 앤드 포인트 혹은 파일 시스템 같은 데이터 소스에 더욱 직접적으로 접근할 수 있습니다. 서버는 API 엔드 포인트를 거치지 않고도 필요한 데이터를 직접 가져올 수 있습니다. (# fs 모듈을 통해 서버에 있는 파일 접근도 가능합니다.)
요약
서버 컴포넌트와 클라이언트 컴포넌트의 각각의 장점을 살려서 프로젝트를 만들 수 있습니다. 서버 컴포넌트는 데이터를 가져오는 것을 담당할 수 있고 클라이언트 컴포넌트는 상태저장을 하는 식으로 각각의 장점만을 살려 담당하게 할 수 있습니다.
