Front-End | 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)

등장배경

모바일 기기들의 등장으로 인해 웹은 변화가 필요하였다.

데스크탑, 노트북과 비교했을 때 상대적으로 성능이 낮은 모바일 기기에서는 성능에 관한 이슈들이 거론되기 시작했고 그에 따라 SPA(Single Page web Application) 기법이 등장하게 되었으며 SPA는 클라이언트 사이드 렌더링 방식이라고 할 수 있다.

---

Server Side Rendering

서버 사이드 렌더링 방식은 전통적인 방식으로 사용자의 행동에 의해 요청이 발생할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문에 표시해야 할 데이터가 많거나 성능이 좋지 않은 기기의 경우 많은 성능 이슈가 발생할 수 있다.

장점

• 검색엔진에 최적화되어있다. (웹 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못하는 경향이 있기 때문이다)
• 초기 로딩 속도가 빠르다. (모든 작업이 완료되기 이전에도 사용자들은 사이트의 콘텐츠를 이용할 수 있다.)

단점

• 요청이 발생할 때마다 전체 페이지를 다시 읽어 들임으로써 성능 저하라는 이슈가 발생할 가능성이 크다.
• 탐색비용까지 늘어난다.

서버 사이드 렌더링 방식을 염두한 라이브러리, 프레임워크

• React

---

Client Side Rendering

클라이언트 사이드 렌더링 방식은 서버는 단지 JSON파일(data)만 보내주는 역할을 하게 되고

클라이언트 측에서 JavaScript가 나머지 역활을 수행하게 된다.
이렇게 되면 서버 측의 트래픽을 감소시키고 더 나은 사용자 경험을 제공해준다.

장점

• 데이터적으로 변화가 필요한 부분만 읽어 들이기 때문에 빠른 로딩 속도를 기대할 수 있고 사용자에게 더 나은 경험을 제공한다.

단점

• 비어있는 파일로 인식을 하는 경우가 존재하기 때문에 검색엔진에 최적화되어있지 않다.
• 보안 문제가 발생할 가능성이 있다. 사용자의 정보에 대한 부분을 서버 쪽의 세션이 아닌 클라이언트 측의 쿠키에서 보관을 하기 때문이다.

클라이언트 사이드 렌더링 방식을 염두한 라이브러리, 프레임워크

• Angular JS
• Backbone JS
• Vue