1. CSR이란?

CSR이란 Client Side Rendering의 약자로, 사용자가 웹사이트에 방문하면 *****브라우저에서 서버에 콘텐츠를 요청하고, 서버로부터 받은 HTML, CSS, JavaScript 등의 페이지 리소스를 클라이언트 측에서 렌더링하는 방식입니다.

<aside> 🔍 브라우저(Browser) vs 클라이언트(Client)

브라우저는 인터넷상에서 웹 페이지를 볼 수 있는 소프트웨어를 말하며, 대표적인 브라우저로는 크롬, 파이어폭스, 사파리, 익스플로러, 엣지 등이 있습니다. 클라이언트는 서비스를 사용하는 사용자 또는 사용자가 사용하는 디바이스를 말합니다. 예를 들어, 브라우저, 스마트폰, 태블릿 PC, 데스크탑 PC 등이 모두 클라이언트입니다.

</aside>

[그림 2-1] CSR의 기본적인 HTML 코드

[그림 2-1] CSR의 기본적인 HTML 코드

[그림 2-1]에서 CSR의 기본적인 HTML 코드를 보면, body 안에 id=”root”인 <div> 태그 하나만 존재합니다. HTML 파일이 비어 있는데 사용자는 어떻게 화면을 볼 수 있는 것일까요? 브라우저가 HTML에 연결된 JavaScript 링크를 읽고 화면을 그려주는 것입니다. HTML 마크업 자체가 화면을 그리는 역할을 하는 것이 아니라, JavaScript 코드를 통해 DOM을 생성하여 화면을 렌더링합니다. 이처럼 CSR에서의 서버는 단지 빈 HTML과 JavaScript 링크를 보내주는 역할만 하며 태그나 스타일 등 구체적인 HTML을 동적으로 그리는 역할은 모두 클라이언트의 JavaScript에서 수행합니다.

Chapter 1. 렌더링과 웹의 역사 및 사전지식에서 설명해 드렸듯이 SPA(Single Page Application)를 개발하는 대표적인 방법이 바로 CSR입니다. SPA는 초기 요청 시에 서버에서 필요한 HTML, CSS, JavaScript 등의 리소스를 받아와 단일 페이지를 구성합니다. 이후에는 서버에 데이터만 요청하고 클라이언트 측 JavaScript 코드를 사용하여 화면을 동적으로 업데이트합니다. 이는 클라이언트 측 렌더링(CSR)의 원리입니다. 즉, 첫 요청 시에 전체 페이지를 로드하고, 페이지 이동 시에는 클라이언트에서 기존 페이지의 일부만 업데이트하는 방식입니다. React, Vue, Angular와 같은 JavaScript 기반 *프레임워크를 쓰면 기본적으로 HTML, CSS, JavaScript 파일이 각각의 하나의 번들로 구성되어 자연스럽게 SPA를 형성하고, CSR을 사용하는 특징을 가지게 됩니다.[1]

하지만, SPA가 CSR과 완전히 동일한 개념은 아닙니다. 페이지의 구성 방식에 따라 SPA와 MPA를 구분하고 렌더링이 발생하는 곳에 따라 CSR과 SSR을 구분하기 때문에 다른 개념이라고 할 수 있습니다. 따라서 React로 SSR을 구현한다면 페이지별로 따로 렌더링 하기 때문에 MPA가 될 수도 있는 것입니다. 참고로 위의 프레임워크 모두 SSR을 지원합니다.

<aside> 🔍 프레임워크(Framework) vs 라이브러리(Library)

프레임워크는 애플리케이션의 구조와 동작을 정의하여 개발자에게 기본적인 틀을 제공합니다. 개발자는 프레임워크가 정한 규칙을 따라 개발을 진행해야 합니다. 반면에 라이브러리는 개발자가 필요에 따라 선택적으로 사용할 수 있는 기능을 제공합니다. 개발자는 자유롭게 라이브러리를 선택하고 사용할 수 있으며 다른 라이브러리, 프레임워크, 도구와 함께 사용할 수 있습니다. Angular, Vue와 달리 React는 많은 개발자가 사용하면서 프레임워크처럼 활용되고 있지만 사실은 라이브러리입니다. React는 자바스크립트 UI 라이브러리로서 UI를 작성하는 데 필요한 기능을 제공하며 다른 라이브러리, 프레임워크, 도구를 조합하여 필요한 기능을 구현할 수 있습니다. 이 글에서는 편의상 프레임워크라고 통일하겠습니다.

</aside>

2. CSR의 동작 과정

2.1. 기본 동작 과정

앞서 언급했듯이 CSR은 웹 페이지가 클라이언트 측에서 렌더링 되는 것입니다. 그럼, CSR이 어떻게 동작하는지 함께 자세히 살펴보도록 하겠습니다.

[그림 2-2] CSR의 동작 과정

[그림 2-2] CSR의 동작 과정

사용자가 브라우저를 통해 웹 사이트에 방문하면 브라우저는 서버로 해당 페이지를 요청합니다. 서버는 요청을 받아들이고, 클라이언트에 HTML, CSS, JavaScript 등의 리소스를 전달해 줍니다. 이때 빈 뼈대만 있는 HTML을 클라이언트로 넘겨주는데, 이 HTML 파일에는 JavaScript 링크가 연결되어 있습니다.