CSR(Client Side Rendering), SSR(Server Side Rendering)

2023.08.04 - [Web] - 웹 시스템 구성( Web Server, WAS )

웹 시스템 구성( Web Server, WAS )

CSR, SSR 에 대해서 알아보기 이전에 웹의 기본적인 구성에 대해서 알아보고 오면 좋겠다.

 

CSR, SSR 에 대해 설명하기 이전에 이해에 필요한 부분들을 순차적으로 우선 설명하겠다.

---

정적 리소스

정적 리소스는 고정된 HTML 파일, CSS, JS, Image, 영상 등을 제공하는 리소스를 의미한다.

주로 웹 브라우저가 이에 해당된다.

---

HTML 페이지

동적으로 필요한 HTML 파일을 생성해서 전달한다.

웹 브라우저는 HTML을 해석한다.

WAS가 동적으로 HTML을 생성해서 웹 브라우저로 전송함.

---

HTTP API

HTML이 아니라 데이터를 전달한다. → 데이터만 주고 받기때문에, UI 화면이 필요하면 클라이언트가 별도 처리해야 함.

주로 JSON 형식을 사용한다.

이는 다양한 시스템에서 호출한다. → 앱, 웹 클라이언트, 서버와 서버 등..

 

HTTP API는 위의 그림과 같이 여러 시스템에서 호출해서 사용한다.

웹 클라이언트로 서버로 보낼때, 안드로이드나 아이폰과 같은 앱에서 서버로 보낼 때, 서버와 서버 사이 등등..

다양한 시스템과 연동하는데 API가 필요한데, 이는 주로 JSON 형태로 데이터 통신을 한다.

 

그런데, 위에서 말했듯이 데이터를 주고받는데에만 사용되기 때문에 UI는 별도로 처리를 해야한다고 하는데,

이 UI 클라이언트의 접점에서 SSR, CSR 라는 개념들이 나오게 된다.

---

SSR - 서버 사이드 렌더링

• HTML 최종 결과를 서버에서 만들어서 웹 브라우저(사용자)에게 전달
• 주로 정적인 화면에 사용
• 관련 기술 : JSP, 타임 리프 등

말 그대로, 서버의 사이드에 있으면서 핵심 로직이나 어플리케이션 실행 결과 등을 웹 브라우저가 알아들을 수 있도록 HTML 형태로 만들어서 보내주는 역할을 한다.

이는 보통 복잡한 동적인 화면보단 정적인 화면에서 사용된다.

 

CSR - 클라이언트 사이드 렌더링

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
• 주로 동적인 화면에 사용, 웹 환경을 마치 앱처럼 필요한 부분부분 변경 가능
• Ex) 구글 지도, Gmail, 구글 캘린더
• 관련 기술 : React, Vue.js 등

클라이언트의 옆에서 렌더링을 한다고 생각하면 된다. 서버에서 렌더링하고 변경할 데이터나 내용들을 전달해주면 이를 반영해서 최종 HTML 형태로 변경한 뒤, 사용자는 최종 변경된 웹을 이용하게 된다.

이는 구글 지도나 캘린더와 같이 정적인 형태의 웹 말고 부분부분 변경되고 사람 마다 다르게 볼 수 있는 동적인 화면 등에서 사용된다.

---

정리

SSR은 화면이 정적이고, 복잡하지 않을 때 사용한다.

반면에, CSR은 복잡하고 동적인 UI에 사용된다.

 

사용자가 웹을 이용하면, 서버와 웹 브라우저가 HTML 파일을 주고 받으면서 이를 해석함으로써 볼 수 있게 된다.

여기서, 서버로 요청하는 형태가 웹, 앱 등등 다양하기 때문에 이에 맞는 HTTP API가 필요하다.

이 API는 데이터를 전달할 뿐, 사용자가 알아볼 수 있도록 화면을 구성해주지는 않는다.

화면 구성을 하기 위해선, HTML 파일을 해석해야 하는데, API를 통해 전달된 데이터를 통해 HTML을 알맞게 변경하고 생성해서 사용자가 이를 볼 수 있게끔 해야 한다.

여기서 SSR, CSR이 사용되는데 HTML을 서버 사이드에서 최종 변경해서 웹 브라우저로 전송하는 방식이 SSR,

HTML을 클라이언트 사이드에서 최종 변경해서 사용자가 볼 수 있도록 하는 방식이 CSR 방식이라고 이해하면 된다.

 

SSR이 주로 정적인 화면에 사용되지만, 자바스크립트를 사용해서 화면 일부를 동적으로 변경이 가능하다.

 

HTML을 편리하게 생성해주는 뷰 기능인 자바 뷰 템플릿에는 JSP, 프리마커, 벨로시티, 타임리프 등이 있는데

본인은 스프링 MVC와 찰떡인 타임리프에 대해서 공부하고 있다.

다음에는, 타임 리프 프레임워크에 대해서 설명하는 시간을 갖겠다.