[Web] CSR, SSR의 개념과 차이점

 

렌더링 방식에는 CSR, SSR, SSG, ISR처럼 다양한 방법이 존재한다.

어떻게 렌더링하냐에 따라 웹 사이트의 성능이 달라지기 때문에 각 사이트에 맞는 렌더링 방식을 사용해야 한다.

따라서 이번엔 각 렌더링 방식의 개념과 차이점에 대해 알아보려 한다.

 

우선 CSR과 SSR에 대해서 알아보자. 

 

브라우저 엔진은 html 구문을 해석해 DOM tree를 수정하고, CSSOM 스타일링 객체를 구성한다.

그리고 여러 과정을 통해 화면에 코드를 그려낸다.

 

이때 html 구문을 서버와 클라이언트 중 누가 가져오냐에 따라 CSR과 SSR이 나눠진다.

말 그대로 어느 Side에서 렌더링을 하냐에 따라 나뉜다고 생각하면 된다. 

 

1. CSR

CSR은 Client Side Rendering의 약자로, 렌더링의 주체자가 클라이언트(브라우저)인 것을 의미한다.

초반에 웹서버로부터 HTML을 받은 후, 대부분의 내용을 브라우저가 동적으로 생성한다.

 

즉, 브라우저가 렌더링 하면 Clinet Side Rendering이라고 볼 수 있다. 

대표적으로 React가 CSR 방식으로 구현된다.

 

1) CSR Rendering 방식

CSR이 어떻게 렌더링 되는지에 대해 알아보자.

 

사용자가 페이지에 접속하면, 브라우저에 로딩바가 생성되는 것을 확인할 수 있다.

이때 브라우저는 해당 웹에 필요한 html과 정적 자원(css, js, 이미지 등)을 서버에 요청한다.

 

요청을 받은 서버는 텅 빈 HTML을 클라이언트에 전달한다.

따라서 사용자는 처음에 텅 빈 html을 보게 된다. 

 

그 후 js파일, 리액트라면 react 파일을 서버로부터 다운로드한다.

자바스크립트 엔진에 의해 해당 파일들이 실행되면, 리액트 소스코드를 메모리에 탑재하고 컴포넌트를 연결해 돔 요소로 변환시킨다.

 

위 작업을 모두 완료한 후 페인팅 작업이 끝나면 사용자가 페이지를 보게 된다. 

 

CSR은 쉽게 말해서 클라이언트가 HTML, 라이브러리, 소스코드를 서버에서 모두 받아온 후 렌더링하고

브라우저에 표기하는 것이라고 생각하면 된다.

 

2) 장점

① 한 번 로딩하면 그 후부터는 빠른 UX를 제공

 

CSR은 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 페이지 로딩 시간이 빠르다.

 

② 한 페이지 내에서 앱을 사용할 수 있다.

 

앱에서 페이지를 이동할 때 전체 페이지를 가져오는 것이 아니라 부분적으로 필요한 데이터를 업데이트한다. 

 

③ 서버의 부하가 작다

 

서버 요청 횟수가 적기 때문에 부담이 적다.

 

3) 단점

① 초기 로딩 시간(TimeToView)이 길다

 

브라우저가 javascript 파일까지 모두 다운해야 렌더링이 가능하기 때문에 초기 로딩 속도(TTV)가 느리다. 

 

② 자바스크립트 활성화가 필요하다

 

html에는 ui가 없어서 자바스크립트 코드가 무조건 필요하다.

따라서 사용자가 브라우저 설정에서 js를 비활성화하면, 페이지를 아예 볼 수 없다.

 

③ SEO 최적화가 힘들다.

 

맨 처음 로드되었을 때, 빈 페이지만 보이기 때문에 어떤 콘텐츠가 들어있는지 알 수 없다.

따라서 검색 엔진 최적화에 불리하다.

 

④ 보안에 취약

 

클라이언트에서 모든 코드를 받고 실행하기 때문에 보안에 취약하다.

또한 쿠키나 localstorage에 사용자에 대한 정보를 저장해야 하기 때문에 xxs에 취약하다.

 

⑤ CDN(Content Delivery Network)에 캐시 하기 어려움

 

html이 비어져있기 때문에 CDN에 캐시하기 어렵다.

 

---

2. SSR

SSR은 Server Side Rendering의 약자로, 서버에서 렌더링 하는 것을 의미한다.

렌더링의 주체가 서버가 되며, 완성된 html을 클라이언트에 전달한다.

 

대표적으로 next.js가 SSR 방식을 사용한다.

 

1) SSR Rendring 방식

SSR이 어떻게 렌더링 되는지에 대해 알아보자.

 

사용자가 웹 페이지에 접속하면, 브라우저가 서버에 해당 url 콘텐츠를 요청한다.

이때 서버는 코드를 실행하여 렌더링 하고, html 파일을 만들어 이를 클라이언트에 전달한다.

 

이후에 나오는 SSG나 ISR과 같이 서버에서 렌더링 하지만 미리 렌더링 하는 것이 아니라

클라이언트에게서 요청이 올 때마다 페이지를 새롭게 만들어서 클라이언트에 전달한다.

 

2) 장점 

① 페이지 로딩 시간이 짧다

 

서버에서 html을 만든 다음에 보내주기 때문에 페이지 로딩시간이 빠르다.

 

② 자바스크립트 필요 없음 

 

③ SEO 최적화 좋음

 

맨 처음 로드되었을 때, 빈 페이지만 보이기 때문에 어떤 콘텐츠가 들어있는지 알 수 없다.

따라서 검색 엔진에 걸리기 힘들다. 

 

④ 보안 뛰어남

 

⑤ 실시간 데이터 사용 가능 & 사용자별  필요한 데이터 사용 가능 

 

클라이언트에서 요청이 올 때마다 렌더링 되므로 사용자에게 맞는 데이터를 실시간으로 제공할 수 있다.

 

3) 단점

① 비교적 느릴 수 있음

 

페이지를 요청할 때마다 서버에서 렌더링 하기 때문에 CSR보다 느릴 수 있다. 

또한, 사용자가 많아질수록 웹 사이트 접속 시간이 느려진다.

 

② 서버의 과부하가 걸릴 수 있음

 

페이지 전환 시 매번 서버에 요청을 하기 때문에 서버의 부하가 커짐

 

③ CDN에 캐시가 안됨

 

요청할 때마다 서버를 만들기 때문에 CDN 캐시가 안된다.