CSR이란?
Client Side Rendering
렌더링 하는 주체자가 클라이언트(브라우저)라는 의미이다.
클라이언트에서 서버로 요청하면
서버에서 HTML, 리액트 라이브러리 자체, 우리가 작성한 소스코드를 보내준다.
보내준 것들을 클라이언트 측에서 다운로드한 뒤
소스코드로 DOM트리를 만든 후에 클라이언트가 볼 수 있는 페이지가 나타나는 것이다.
CSR의 장점
처음 한번만 로딩이 되면, 그 이후에는 빠른 UX를 제공할 수 있다.
어플리케이션에서 링크를 클리가하거나 하는 요청을 보내면
전체적으로 다시 렌더링할 필요 없이
필요한 부분만 업데이트할 수 있기 때문이다.
서버의 부하가 적음
앞선 장점과 이어지는 부분
필요한 부분만 업데이트하면 되기 때문에 서버에 무리가 가지 않는다
CSR의 단점
페이지 로딩 시간이 길다
TTV(time to view) 또는 FCP(First Contentful Paint)가 길다고도 한다.
처음에 리액트 라이브러리와 모든 소스코드를 다 다운로드하고 compute(계산)해야하기 때문이다.
자바스크립트 활성화가 필수이다
HTML이 비어있기 때문에 리액트 라이브러리와 자바스크립트 코드가 필수이다.
만약 사용자가 브라우저에서 자바스크립트를 비활성화시키면 우리가 만들 어플리케이션을 사용할 수 없다.
SEO 최적화가 힘들다
이 또한 HTML이 비어있기 때문에 발생하는 문제이다.
웹크롤러가 어떤 정보가 있는지 확인하기 어렵기 때문에 최적화가 어렵다.
보안에 취약하다
모든 소스코드를 브라우저에서 다운받아야하기 때문에
이 페이지를 실행하기 위해 어떤 서버에서 어떤 데이터를 받아오는지
서버에서 데이터를 접근하기 위해 획득하는 키라던지
이런 모든 코드 요소가 다 클라이언트에 가야하기 때문에 보안에 취약할 수 밖에 없다.
CDN에 캐시가 안됨
CDN이란 Content Delivery Network의 약자로
한국에서 미국사이트에 접속하는 경우 미국 서버에 데이터를 요청하고 받아오는 과정이 오래 걸리기 때문에 두 국가의 중간 지점에 있는 국가의 서버에 접속하고자하는 사이트의 데이터가 있는지 물어본다.
만약 데이터가 없으면 미국 서버에 데이터를 요청해 받은 후 캐싱해두고 이후에 다른 사용자가 또 같은 데이터를 요청하면 미국 서버에 요청할 필요 없이 캐싱해둔 데이터를 보내줄 수 있는 것이다.
CSR의 경우 HTML이 비어 있어서 소스코드가 필요하기 때문에 CDN에 캐싱하기가 어렵다.
