HTTP/네트워크
CSR과 SSR의 차이점에 대해서 설명해주세요.
SSR은 서버로부터 완전하게 만들어진 HTML 파일을 전달받아 페이지 전체를 랜더링하는 방식으로 전통적인 MPA에서는 SSR 방식으로 사이트를 랜더링합니다. SSR은 완성된 리소스를 전달하기 때문에 첫 화면의 로딩속도가 CSR에 비해 빠르고 요청될 HTML 안에 모든 정보가 담겨있기 때문에 검색엔진이 웹을 크롤링하며 컨텐츠 색인을 생성하는 과정에서 더 많은 정보를 제공할 수 있고 최적화에 유리합니다.
그러나 페이지 이동 시에 요청된 페이지에 대한 리소스를 처음부터 다시 랜더링하기 때문에 TTV(Time To View)와 TTI(Time To Interact) 간의 시간 차가 생기며 사용자가 버튼을 클릭하거나 다른 페이지로 이동하려 해도 상호작용이 일어나지 않을 수 있습니다. 또한 매 요청마다 페이지가 새로고침되기 때문에 사용자 경험에 부정적인 영향을 줄 수 있으며 요청될 리소스를 서버에서 준비해야 하기 때문에 서버측 부하가 증가하게 됩니다.
CSR은 사용자의 요청에 따라 필요한 부분만 응답받아 랜더링하는 방식으로 SPA를 사용하는 REACT, VUE 등에서 채택하고 있습니다. CSR은 초기화면을 로드할 때 완전한 리소스를 다운로드 받아 요청이 변할 때마다 필요한 부분을 이미 다운로드된 데이터 내에서 업데이트시킵니다.
CSR은 요청을 수행하는 모든 JS파일을 다운로드 받아야 하기 때문에 초기 로딩 시간이 SSR 방식에 비해 더 오래 걸립니다. 그러나 하나의 파일 내에서 변경되는 데이터만 서버에 요청하기 때문에 컴포넌트를 업데이트하기 위해 필요한 리소스만 전달하는 과정은 SSR이 요청마다 전체 리소스를 전달하는 과정에 비해 서버 부하가 적습니다. 또한 요청 시 새로고침되지 않고 빠르게 업데이트되기 때문에 사용자 친화적입니다.
하지만 포털사이트의 검색엔진이 JS를 실행하지 않고 크롤링하게 된다면 아무런 정보도 제공할 수 없고 색인화 과정에서 후순위로 밀리게 됩니다. 마케팅적인 관점에서 이러한 가능성은 상당히 악재로 작용할 수 있기 때문에 SEO에 대비하기 위한 대안을 따로 마련해야 합니다.
