클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)

* 해당 내용 학습에 앞서 랜더링에 대한 내용을 익히는 것을 권합니다. 

 

 

 

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)은 웹 애플리케이션을 구성하는 방법 중 두 가지입니다.

 

 

1. 클라이언트 사이드 렌더링(CSR):

클라이언트 사이드 렌더링은 웹 페이지의 렌더링을 클라이언트 측에서 처리하는 방식입니다. 여기서 클라이언트는 사용자가 웹 페이지를 열어서 보는 웹 브라우저를 말합니다.

- 동작 방식: 사용자가 웹 페이지에 접속하면 먼저 기본 HTML, CSS 및 JavaScript 파일이 다운로드됩니다. 그런 다음 JavaScript 파일이 실행되어 필요한 데이터를 서버로부터 비동기적으로 요청합니다. 데이터가 도착하면 JavaScript가 데이터를 가지고 HTML을 동적으로 생성하고, 이를 브라우저에 렌더링하여 사용자에게 보여줍니다.

- 특징: CSR은 초기 로딩 시간이 길 수 있지만, 한 번 로딩된 이후에는 사용자와의 상호작용이 부드럽게 이루어집니다. 

또한, 클라이언트 측에서 렌더링하기 때문에 서버의 부하가 상대적으로 적어집니다.

 

 

 

---

2. 서버 사이드 렌더링(SSR):

서버 사이드 렌더링은 웹 페이지의 렌더링을 서버 측에서 처리하는 방식입니다.

- 동작 방식: 사용자가 웹 페이지에 접속하면 서버에서 필요한 데이터를 가져와 HTML을 생성합니다. 이후 완성된 HTML이 사용자의 웹 브라우저로 전달되어 화면에 보여집니다.

- 특징: SSR은 초기 로딩 시간이 비교적 빠르지만, 사용자와의 상호작용이 느릴 수 있습니다. 또한, 매번 페이지 요청마다 서버에서 HTML을 생성하기 때문에 서버의 부하가 상대적으로 높을 수 있습니다.

요약하자면, CSR은 초기 로딩 시간이 오래 걸리지만 사용자와의 상호작용이 빠르며 서버 부하가 적습니다. 반면에 SSR은 초기 로딩 시간이 비교적 빠르지만 사용자와의 상호작용이 느리며 서버 부하가 높을 수 있습니다.