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

Posted on | In
SSR과 CSR 의 개념과 차이점 SPA, TTI, TTV의 개념

SSR, CSR 이란?

  • SSR (Server Side Rendering) : 말 그대로 서버에서 HTML 파일을 포함한 JS까지 동적으로 처리한 뒤 클라이언트에 보내주는 방식

    • 장점 : 처음 화면이 담겨 있는 HTML을 우선 바로 보내주기 때문에 클라이언트 측에서 기다리는 시간이 줄어들게 된다.
    • 단점 : 아무래도 서버쪽에서 렌더링까지 도맡아서 처리하기 때문에 서버의 부담이 심해진다. 또한, 새로운 페이지를 이동할 때마다 새로운 HTML을 받아와야 하므로 사용성이 줄어들게 된다.

  • CSR (Client Side Rendering) : SPA (Single Page Application) 이 발달함에 따라 클라이언트측에 단순한 HTML 에 모든 과정이 담긴 JS를 보냄으로써 클라이언트 측에서 렌더링을 처리하게 하는 방식

    • 장점 : 처음 서버에 파일을 요청하는 한번에 모든 데이터를 받아오므로 그다음 상호작용 과정이 빨라진다. 즉, 데이터를 다루는 일 외에는 서버와 상호작용해야하는 일이 줄어들어 사용성이 향상된다.
    • 단점 : 말 그대로 Single Page, 한 페이지에 모든 파일을 받아와서 출력하는 과정이라 사용자가 첫 화면을 보는 시간이 SSR보다 상대적으로 오래걸린다. 추가로, JS에서 모든 데이터를 처리하기 때문에, HTML 의 내용을 기반으로 검색하는 SEO (Search Engine Optimization) 검색 엔진에서 노출 시키기가 어려워진다.

    ※ SPA : 전체적인 컴퓨터의 성능이 좋아지면서, 사용자 개인 컴퓨터로도 충분히 사용성을 이끌어낼만한 성능이 갖춰져있다는 전제하에 나온 개념으로, 서버내에서 여러 페이지(HTML) 를 불러오지 않고, 한 페이지 내에서 동적으로 재작성하며 처리하는 애플리케이션이다. (ex : React, Vue)

TTV, TTI 이란?

  • TTV (Time To View) : 사용자에게 보여지기 위해 걸리는 시간

  • TTI (Time To Interact) : 사용자와 웹페이지와 상호작용 하기 위해 걸리는 시간

  • CSR은 처음 페이지가 나타나는 순간 모든 렌더링이 끝난 상태이므로 TTV와 TTI 가 같다고 볼 수 있다.
  • SSR은 시각적인 페이지는 바로 보여지므로 TTV는 빠르지만 렌더링이 계속 반응마다 이루어지므로 TTI 는 더 늦다고 볼 수 있다.