Gidhub BE Developer

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

2018-10-26
goodGid

렌더링이란?

  • 어떠한 웹 페이지 접속시 그 페이지를 화면에 그려주는 것이다.

SSR

  • SSR : Server Side Rendering

  • 요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다.


CSR & SPA

  • CSR : Client Side Rendering

  • SPA : Single Page Application

  • 모바일 시대가 도래하면서 모바일 환경에 최적화된 서비스가 필요해졌다.

  • 일반적인 컴퓨터에 비해 성능이 낮은 모바일에 최적화시키기 위해선 기존과는 다른 방법이 필요했다.

  • 그래서 나온 개념이 SPA(Single Page Application)이다.

  • SPA는 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는 것이 아니라
    최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다.

  • 전통적인 웹 방식인 SSR은 SPA에 비해 성능이 뒤떨어졌다.

  • 그 이유는 요청 시 마다 서버로부터 리소스를 받아 해석하고 화면에 렌더링하는 방식이기 때문이다.

  • 이러한 점에 의해 SPA는 트래픽을 감소시키고 사용자에게 최적화된 환경을 제공할 수 있게 되었다.

  • 서버는 단지 JSON 파일만 보내주는 역할을 하며
    html을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행하였다.
    그리고 이것이 클라이언트 사이드 렌더링(Client-side rendering)이다.


주의할 점

  • 전통적인 웹 페이지 방식 != SSR

  • SPA != CSR

  • 전통적인 웹 페이지 방식이 SSR 방식을 사용한 것이고
    SPA가 CSR 방식을 사용한 것이다.


SSR vs CSR

초기 View 로딩 속도

  • SSR의 경우 View를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 매우 짧다.

  • 물론 JS파일을 모두 다운로드하고 적용하기 전까지는
    그 어떤 인터랙션에도 반응하지 않지만 사용자 입장에서는 로딩이 매우 빠르다고 느낄 수 있다.

  • 반면 CSR의 경우 서버에서 View를 렌더하지 않고
    HTML 다운 + JS파일 + 각종 리소스 다운을 받은 후 브라우져에서 렌더링을 하기 때문에
    SSR보다는 초기 View 로딩 속도는 오래걸린다.

  • 그렇지만 CSR의 경우 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에
    서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터랙션이 가능하다.

  • 하지만 문제도 존재한다.

  • CSR은 페이지를 읽어들이는 시간 + JS를 읽어들이는 시간 + 그리고 JS가 화면을 그리는 시간
    위 작업이 완료 후 콘텐츠가 사용자에게 보여진다.

  • 여기에 웹 서버에서 콘텐츠 데이터라도 가져와야 한다면 그 시간은 더욱 길어진다.

  • 초기 구동 속도가 느리다는 단점이 존재하는 것이다.

  • 물론 초기 구동 속도를 제외하면 그 다음부터는 빠른 인터랙션의 성능을 보인다.


SEO 문제

  • SEO(검색 엔진 최적화)의 문제가 존재한다.

  • CSR방식으로 이루어진 사이트에서는 View를 생성하기위해 자바스크립트를 실행시켜야 한다.

  • 하지만 대부분의 웹 크롤러 봇들은 자바스크립트 파일을 실행시키지 못한다.

  • 때문에 HTML 에서만 콘텐츠를 수집하게 되고 CSR 페이지를 빈 페이지로 인식하게 된다.


보안 문제

  • SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 했다.

  • 그러나 CSR일 경우 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.


정리

  • SSR의 경우 초기 로딩속도가 빠르고 SEO에 유리하지만
    View 변경시 서버에 계속 요청을 해야 하므로 서버에 부담이 크다.

  • CSR의 경우 초기 로딩속도는 느리지만
    초기 로딩 후에는 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다.
    하지만 SEO에 대한 문제가 있다.

  • 추가로 SSR과 CSR MVC 구조를 가볍게 눈에 익혀두자.


Reference


Recommend

Index