서버사이드랜더링(SSR)과 클라이언트사이드랜더링(CSR)
일단,
랜더링이란 무엇인가?
=> 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것
SSR과 CSR의 차이는 표시해줄 화면을 어디서, 어떻게 그리는지의 차이
CSR은 페이지의 내용을 브라우저에서, SSR은 서버에서 페이지의 내용을 다 그려서 브라우저로 전달해준다.
작동원리는 어떻게될까?
1) 클라이언트 사이드 랜더링 (CSR)
CSR은 SPA 트랜드와 CPU 성능 상승 +JS 표준화(리액트, 뷰, 앵귤러 등 프레임워크의 발전)와 함께 본격적으로 시작되었다. CSR은 클라이언트에서 모두 처리하는 것인데, 서버에서 전체 페이지를 한번 렌더링하여 보여주고 사용자가 요청할때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식이다. SSR과 다르게 서버에 HTML 문서를 요청하는것이 아니라, 브라우저에서 자바스크립트로 컨텐츠를 렌더링 하는 것이다.
<body>
<div id='root'></div>
<script src='app.js'></script>
</body>CSR의 간단한 예제. body 안에는 id='root'만 들어있고 자바스크립트 링크만 들어있다.
HTML이 텅텅 비어있기 때문에 처음 접속하게 되면 빈 화면만 보이게 되고, 링크된 자바스크립트를 다운받게 된다. 여기에는 구동하기위한 프레임워크나 라이브러리의 소스코드 등 많은 내용들이 포함되어있고, 이로 인해 처음 다운로드 받을때 꽤나 시간이 소요될 수 있다.
또한 추가적으로 데이터가 필요하면 서버로부터 데이터를 받아와서 클라이언트 쪽에서 자바스크립트와 함께 동적으로 화면을 구성하여 사용자에게 최종적으로 화면을 보여주게 된다.
CSR의 장점
1) 사이트 상호 작용 활발
2) 초기 로딩 이후 빠른 웹사이트 렌더링
3) 웹 애플리케이션에 좋음
CSR의 단점으로는
1) 로딩시간이 긴 것
2) 검색엔진 최적화 문제 => SEO (Search Engine Optimization)
SEO?
구글 등의 검색 엔진들은 서버에 등록된 웹사이트를 돌아다니면서 웹사이트의 HTML 문서를 분석해서 우리가 검색할 때 웹사이트를 빠르게 검색할 수 있도록 도와준다. 하지만 CSR에서 사용되어지는 HTML의 body는 앞선 예제처럼 대부분 텅 비어있기 때문에 검색엔진들이 CSR로 작성된 웹페이지를 분석하는데 많은 어려움을 겪고 있다.
이러한 문제점들 때문에 SSR이 도입되게 된다.
2) 서버 사이드 렌더링(SSR)
SSR은 클라이언트에서 모든 것을 처리하지 않고, 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고, 만들어진 HTML과 HTML 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. 클라이언트는 잘 만들어진 HTML 문서를 사용자에게 바로 보여주게 된다.
장점으로
1) 페이지 로딩이 빨라지게 되고,
2) CSR과 달리 모든 컨텐츠가 HTML에 담겨있기 때문에 효율적인 SEO가 가능하다.
하지만,
1) 깜빡임 이슈 (Blinking Issue)
2) 서버 과부하
3) TTV(Time To View) 와 TTI(Time To Interact) 의 공백시간
등의 단점이 있다.
사용자가 새로고침을 하게 되면 전체 웹사이트를 다시 서버에서 받아와야하기때문에, 화면이 없어졌다가 나타난다. 이것은 UX 관점에서 썩 좋지 않은 현상이다.
두번째로는 서버에 과부하가 걸리기 쉽다.서버에 데이터를 요청하는 횟수가 많아지기 때문이다.
가장 치명적인 단점은 세번째다.
SSR 방식에서는 서버에서 만들어진 HTML 파일을 가져오게 되고, 사용자는 바로 웹사이트를 확인할 수 있다. 하지만 웹사이트를 동적으로 제어할 수 있는 자바스크립트 파일은 아직 받아오지 않았기 때문에, 사용자는 클릭을 해도 아무것도 처리할 수 없는 상태가 된다. 최종적으로 자바스크립트 파일을 가져와야지만 사용자가 원하는 것을 처리할 수 있는 인터렉션이 가능해진다.
그래서 SSR은, 사용자가 사이트를 볼 수 있는 시간 (TTV)과 실제로 인터렉션이 가능한 시간 (TTI)의 공백시간이 꽤 길다는 단점이 존재한다.
반대로 CSR은 HTML만 받아왔을때는 아무것도 보여지지 않고 링크되어 있는 모든 로직을 처리하는 자바스크립트 파일을 받아오게 되면 웹사이트가 보여지는 동시에 인터렉션이 가능해진다. TTV와 TTI의 공백시간이 없는 것이다.
좋은 CSR , SSR 개발자가 되기 위해서는?
CSR을 잘 사용하기 위해서는 최종적으로 번들링해서 사용자에게 보내주는 자바스크립트 파일을 어떻게 하면 효율적으로 많이 분할해서 첫번째로 사용자가 사이틀르 보기 위해서 필요한 필수적인 요소들만 보낼 수 있을지 고민해봐야한다.
SSR같은 경우는 세번째 단점을 보완하기 위해서 TTV와 TTI의 공백시간을 줄이기 위해 어떤 노력을 할 수 있을지와, 어떻게 조금 더 매끄러운 UI와 UX를 제공할 수 있을지를 고민해봐야한다.
