SPA(Single Page Application)는 현재 널리 쓰이고 있습니다. 사용자가 한 페이지 내에 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로만 업데이트 하게 됩니다. 이런 방식으로 웹사이트의 사용성이 좋아지게 되면서 React, Angular, Vue 같은 프레임워크가 나와 CSR(Client Side Rendering)을 사용하게 됩니다.
CSR이란?
데이터를 제외한 화면을 그리는 코드들이 프론트 서버에서 다운받아 진다.
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>CSR은 쉽게 말하면 클라이언트 측에서 모든 것을 다 한다고 생각하면 되는데요.
CSR에서는 보통 HTML body를 위처럼 작성되어 있습니다.
즉 HTML은 텅텅 비어져 있기 때문에 처음에 접속하면 빈 화면만 보이게 됩니다.
링크된 자바스크립트를 서버로부터 다운 받게 되고 여기 자바스크립트에는 어플리케이션에 필요한 로직과 프레임워크, 라이브러리의 소스 코드까지 포함 되어있기 때문에 크기가 크면 다운로드 받는데에 시간이 많이 소요될 수도 있습니다.
추가로 필요한 데이터가 있다면 서버에 요청해 데이터를 받아온 다음 동적으로 HTML을 생성해 사용자에게 최종적인 화면을 보여 주게 됩니다.
또, HTML이 비어져 있기 때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 좋지 않습니다.
이런 CSR의 문제점들 때문에 Static Sites에서 영감을 받은 SSR(Server Side Rendering)이 도입됩니다.
SSR이란?
서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달됩니다.
사용자가 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고 만들어진 HTML파일을 동적으로 제어할 수 있는 소스코드(js파일 등)와 함께 클라이언트에게 보내 주게 됩니다. 클라이언트측에서는 만들어진 HTML 문서를 받아와 바로 사용자에게 보여주게 됩니다.
이렇게되면 처음 접속시 보이는 페이지 로딩이 빨라지게 되고, 모든 콘텐츠가 HTML에 담겨져 있기 때문에 효율적인 SEO를 할 수 있습니다.
CSR의 문제점은 어느정도 해결이 되지만 SSR도 문제점이 존재합니다.
1. Static Sites처럼 깜박임 이슈가 존재합니다.
이는 사용자가 클릭하면 전체적인 웹 사이트를 다시 서버에서 받아오기 때문입니다.
2. 서버에 과부하가 걸리기 쉽습니다.
특히 사용자가 많은 제품 일수록 사용자가 클릭을 할 때마다 서버에 요청해서 필요한 데이터를 받아와 HTML을 만들어야 하므로 서버에 과부하가 걸리기가 쉽습니다.
3. 클릭했는데 반응이 없는 경우가 발생할 수 있습니다.
SSR을 사용하면서 사용자가 빠르게 웹사이트를 확인할 수 있게 되었지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못했을 때 발생하게 됩니다.
CSR은 사이트 접속 ⇒ 서버에서 인덱스 파일 받아 옴(텅텅 비어있음) ⇒ 빈 화면 ⇒ 링크된 javascript파일(필요한 모든 로직 포함) 요청하여 받아옴 ⇒ 화면이 보여짐
SSR은 사이트 접속 ⇒ 서버에서 인덱스 파일 받아 옴 ⇒ 화면이 보여짐 ⇒ 클릭 함(인터렉션) => javascript(동적 제어) 요청하여 받아옴
즉, CSR은 화면이 보여짐과 동시에 인터랙션이 가능하지만 SSR은 그 사이의 공백 시간이 존재하기 때문에 사용자가 클릭 시 반응이 없는 경우가 발생하게 됩니다.
💡 정리
이제 CSR과 SSR의 렌더링방식과 장,단점을 설명할 수 있다.
CSR
데이터를 제외한 화면을 그리는 코드들이 프론트 서버에서 다운받아 진다. 클라이언트의 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터만 받아온다.
SSR
서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달된다.
✨CSR 장점과 단점
(장점) 필요한 데이터만 백엔드에서 가져와 서버 부하가 덜하다.
(단점) 번들된 js파일 다운로드로 첫 화면을 보기까지 시간이 오래 걸릴 수 있다.
(단점) SSR에 비해 SEO에 약한편이다.(구글 제외)
✨SSR 장점과 단점
(장점) CSR의 단점을 개선하였다.
(단점) 불필요한 부분까지 다시 렌더링하게 된다.
(단점) 서버에 과부하가 걸리기 쉽습니다.
(단점) 인터랙션시 반응이 없는 경우가 발생할 수 있습니다.
