[SSR vs CSR] CSR(Client Side Rendering)

앞서 작성한 SSR과 비교되는 기법인 Client Side Rendering. 핸들바를 사용하면서 어렴풋이 구분하기 시작했다가, React를 공부하면서 그 차이에 대해 실감하면서 앞으로 내가 새로운 서비스를 기획 및 설계 단계에서 부터 만들 때, CSR를 효율적으로 사용할 수 있게 되길 바라는 마음으로 CSR에 대해서 정리해본다.

그렇다면 CSR이란 무엇일까?

CSR이란?

CSR은 브라우저에 내장된 JavaScript엔진을 사용하여 브라우저에서 콘텐츠를 렌더링하는 기법으로 Single Page Application(SPA)에서 사용한다. HTML문서 자체에서 모든 내용을 가져오지 않고, 첫 로딩에는 JavaScript 파일을 가진 원본 HTML문서가 전송된다. 이후 브라우저에서 사이트의 나머지 부분을 렌더링한다. CSR의 경우 초기 페이지 로드가 느리지만, 그 이후의 새로운 데이터를 렌더링하는 속도는 매우 빠르다. 서버에 대한 호출이 있어도 전체UI를 다시 로드하지 않고 일부분만 다시 렌더링되기 때문에 Client Framwork(React, Vue etc..) 는 특정 DOM 요소만 다시 렌더링하여 변경된 데이터를 UI에 업데이트해준다.

CSR은 응용프로그램의 페이지 또는 기능이 많고 복잡한 경우에 사용하면 좋다. 또한 기능들이 기본적인 write and Read 이상의 action이 발생하는 경우에 사용하게된다.

렌더링 단계

1. 사용자가 웹사이트로 요청
2. 서버가 아닌 CDN(Content Delivery Network)를 사용하여 정적 html, css등의 resource를 사용자에게 제공한다.
3. 브라우저가 HTML를 먼저 다운로드받고, JS를 다운로드 받는 동안 사용자는 loading display를 보게된다.
4. JS의 Ajax를 통해 API요청으로 동적 콘텐츠를 가져와 최종 콘텐츠를 렌더링하도록 처리한다.
5. 서버가 응답한 후 Client 브라우저의 DOM을 업데이트하여 최종 내용을 렌더링한다.

CSR의 이점!

• 초기 로드 후, 빠른 웹사이트 렌더링이 가능하다
• Server입장에서 요청받은 데이터만 제공해주면 되기 때문에 빈번한 Client의 요청이 발생하는 경우에 Server 부담을 줄일 수 있다.
• Web Application에 적합하다.
• 다양한 JavaScript 라이브러리를 사용할 수 있다.

CSR의 단점

• 초기 로드할 때 많은 시간이 필요하다.
• 대부분의 경우 외부 라이브러리를 사용해야만 한다.
• 초기 HTML에는 data가 없기 때문에, SEO가 웹 콘텐츠 정보를 수집하지 못한게 되어서 검색사이트 상위 노출에 불리하다.

---

Reference

1. https://www.clariontech.com/blog/server-side-rendering-vs.-client-side-rendering
2. https://2dubbing.tistory.com/86