React Server Component

먼저, Server Side Rendering에(= SSR) 대해서 먼저 알아야하는데, 이 SSR은 JSP와 같이 서버에서 html, js, css를 만들어서 클라이언트에게 전달하는 방식이다. 이렇게 하면, 클라이언트는 서버에서 받은 html, js, css를 그대로 렌더링하면 되기 때문에, 전체적인 로딩 속도가 빠르다는 장점이 있다. 하지만, SSR은 서버에 부하가 많이 걸리고, 서버에서 만들어진 html, js, css를 클라이언트에게 전달하는 과정에서 네트워크 비용이 발생하기 때문에, 전체적인 속도는 빠르지만, 서버에 부하가 많이 걸리고, 네트워크 비용이 발생한다는 단점이 있다.

그렇다면, 기존에 주로 사용하였던 Cient Side Rendering(= CSR)은 어떤 방식일까? CSR은 서버에서 html, js, css를 만들어서 클라이언트에게 전달하는 방식이 아니라, 서버에서는 html만 전달하고, js, css는 클라이언트에서 렌더링하는 방식이다. 이렇게 하면, 서버에 부하가 적고, 네트워크 비용도 적게 발생하지만, 클라이언트에서 js, css를 렌더링하는 과정에서 전체적인 로딩 속도가 느리다는 단점이 있다.

지금 보면 SSR과 CSR이 많은 차이가 있어 보이지만, 사실 첫 로딩만 차이가 있었고, 이후에는 클라이언트 입장에서 큰 차이를 느낄 수 없었을 것입니다.

React는 이점에서 개선점을 발견하여 Component라는 역할은 그대로 남겨두고, 이를 서버에서 렌더링하는 방식을 제공하는 방법을 제공하게 되었습니다. 이것이 바로 React Server Component입니다. (tsx, jsx파일의 가장 위에 ‘use strict’라고 작성하면 서버 컴포넌트, ‘use client’라고 작성하면 클라이언트 컴포넌트로 인식합니다.)

React Server Component와 기존의 React Client Component는 어떤 점이 다를까요? React Server Component는 서버에서 렌더링되기 때문에, 서버에서만 사용할 수 있는 기능들이 있습니다. 예를 들어, 서버에서는 window, document같은 객체를 사용할 수 없습니다. 그리고 server에서 client의 State를 모두 가지고 있을 수 없기 때문에 React Server Component는 State를 가질 수 없습니다.