Client-side Rendering

Client-side Rendering - CSR

---

CSR은 웹 페이지의 콘텐츠를 사용자의 웹 브라우저(클라이언트)에서 직접 렌더링하는 방식을 의미합니다.  

즉, 서버는 페이지에 필요한 최소한의 HTML 파일과 함께 CSS, JavaScript 파일을 클라이언트에게 전달하며, 실제 웹 페이지의 모든 내용을 구성하고 화면에 표시하는 작업은 사용자의 브라우저에서 JavaScript를 통해 이루어집니다.

---

---

핵심적인 작동 원리는 다음과 같습니다:

---

클라이언트의 요청:

사용자가 웹사이트 접속을 요청합니다.

최소한의 파일 전송: 

서버는 요청에 따라 빈 HTML 구조(뼈대)와 웹 페이지를 구성하는 데 필요한 JavaScript 파일을 클라이언트 브라우저로 전송합니다.

브라우저의 렌더링: 

브라우저는 전송받은 JavaScript 파일을 다운로드하고 실행하여, 서버로부터 필요한 데이터를 비동기적으로 가져와 웹 페이지의 콘텐츠를 동적으로 생성하고 화면에 표시합니다. 

빠른 인터랙션: 

페이지가 일단 로드되면, 이후의 사용자 요청에 따라 필요한 부분만 다시 읽어들여 빠르게 화면을 갱신합니다.  

따라서 페이지 전체를 다시 로드하지 않아도 되므로 사용자 인터랙션이 더 빠르고 부드럽게 느껴질 수 있습니다. 

이러한 CSR 방식은 React, Vue, Angular와 같은 현대적인 JavaScript 프레임워크 및 라이브러리에서 주로 사용됩니다.

---