렌더링은 우리가 작성한 코드를 실제 화면에 나타나는 사용자 인터페이스로 변환하는 작업을 의미합니다. 이러한 렌더링은 서버에서 이뤄질 수도 있고, 클라이언트에서 이뤄질 수도 있습니다. 서버에서 렌더링이 이뤄지는 것을 SSR (Server Side Rendering) 이라고 하며, 반대로 클라이언트에서 렌더링이 이뤄지는 것을 CSR (Client Side Rendering) 이라고 합니다. 렌더링 과정을 잘 이해하기 위해서는 몇 가지 기초 지식이 필요한데, 지금부터 각각에 대해 하나씩 살펴보도록 하겠습니다.

9.1.1 Rendering Environments

먼저 렌더링이 일어나는 환경에 대해 이해할 필요가 있습니다. 여기서 환경이라는 것은 우리가 개발한 웹 애플리케이션이 렌더링 되는 환경을 의미하며, 서버와 클라이언트가 있습니다.

서버는 클라우드 환경 또는 직접 구축한 On-premise 환경에서 작동하는 컴퓨터를 의미하며, 클라이언트의 요청을 받아서 처리하는 역할을 합니다. 그리고 클라이언트는 실제 사용자가 사용하는 컴퓨터 또는 각종 모바일 디바이스를 의미하며, 서버에 요청을 보내는 역할을 합니다. 웹 애플리케이션 관점에서 클라이언트는 우리가 평소에 사용하는 브라우저라고 생각하면 됩니다.

일반적인 회사에서 서비스를 개발할 때는 서버를 담당하는 백엔드와 클라이언트를 담당하는 프론트엔드를 각각 나눠서 개발하게 됩니다. 이러한 경우 서버에서 사용하는 프로그래밍 언어 또는 프레임워크가 프론트엔드에서 사용하는 것과 다른 경우가 생길 수 있습니다. 예를 들면, 서버는 Java와 Spring 프레임워크를 사용해서 개발하고 클라이언트는 JavaScript와 React를 사용해서 개발하는 것이죠. 이런 경우 서버와 클라이언트의 환경이 완전히 다르기 때문에, 서로 통신을 할 때 규약을 잘 정하고 그에 따라 요청을 주고 받아야 합니다.

하지만 React를 사용하면 JavaScript(또는 TypeScript)라는 하나의 프로그래밍 언어를 사용해서 렌더링에 필요한 서버쪽 코드와 클라이언트쪽 코드를 모두 작성할 수 있습니다. 그리고 추가로 React 기반의 프레임워크인 Next.js를 사용하면, 렌더링 뿐만 아니라 서버쪽에서 실행될 코드도 함께 작성해서 배포할 수 있습니다. 이처럼 서버와 클라이언트를 동일한 환경으로 개발하는 것은 인력이 적고 자금이 많지 않은 초기 스타트업에게 특히 유리합니다. 하지만 이러한 방식을 적용하기 전에 서버와 클라이언트 각 환경에 대해 잘 이해하고 개발을 하는 것이 중요합니다. 특히 프론트엔드 개발자의 관점에서는 서버 컴포넌트와 클라이언트 컴포넌트의 렌더링 과정에 대한 이해가 중요하기 때문에 이어지는 내용을 통해 잘 이해하기 바랍니다.

9.1.2 Request-Response Lifecycle

그렇다면 렌더링을 위해서 서버와 클라이언트가 통신하는 과정은 어떻게 될까요? 아래는 일반적인 클라이언트 렌더링 과정을 순서대로 정리한 것입니다.

1. 먼저 사용자가 브라우저를 통해 웹사이트에 접속을 시도하거나, 웹사이트에서 버튼 클릭, 양식 제출 등의 작업을 수행
2. 브라우저는 사용자의 행동에 따라 서버에 HTTP 요청 전송
3. 서버에서는 요청을 받아서 처리하고 클라이언트가 요청한 자원(예: HTML, CSS, JavaScript 등)을 HTTP 응답으로 보냄
4. 클라이언트는 서버로부터 받은 자원을 이용하여 사용자 인터페이스를 렌더링

위와 같이 클라이언트에서 렌더링이 일어나는 경우는 그 과정이 굉장히 단순합니다. 하지만 만약 서버에서 렌더링이 일어나게 된다면 어떻게 될까요? 서버에서 렌더링이 이뤄지는 경우에는 서버에서 완성된 HTML을 만들어서 응답으로 보내게 되고, 클라이언트는 응답으로 받은 HTML을 그대로 화면에 표시하게 됩니다.

하지만 이 과정은 그리 단순하지 않으며, 특히 React Server Components를 사용할 경우에는 렌더링이 되기까지 상당히 복잡한 과정을 거치게 됩니다. 이 과정에 대해서는 뒤에서 자세히 설명할 예정이며, 일단 여기에서는 서버와 클라이언트 각각의 역할과 둘 사이에 네트워크 경계(Network Boundary) 가 존재한다는 점을 잘 이해하기 바랍니다.

NOTE. Network Boundary란?
서버와 클라이언트 환경을 구분하는 것은 단순히 컴퓨터가 설치된 물리적인 위치가 아니라, Network Boundary라고 부르는 가상의 개념적인 경계선입니다. 이 네트워크 경계를 통해 서버와 클라이언트 환경이 구분되며, 각 환경에 따라서 실행할 수 있는 코드도 달라지게 됩니다.
참고로 React에서는 "use client" 지시어를 사용하여 서버와 클라이언트의 경계를 정의할 수 있으며, "use server" 지시어를 사용하여 서버쪽에서 실행될 코드를 지정할 수도 있습니다.