클라이언트 사이드 렌더링(CSR)
텅 빈 html페이지가 먼저 브라우저에 보내지고 브라우저가 자바스크립트를 받아와 동적으로 렌더링하는 것을 말한다.
CSR의 장점
- 필요한 데이터만 받아서 보여주므로 트래픽이 감소된다.
- 바뀐 부분만 렌더링하므로 빠른 화면전환이 가능하다.
CSR의 단점
- 사용자가 첫화면을 보기까지 시간이 오래걸린다.
<html>
<head>
<title>Single Page Application</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>- 해당 코드처럼 html의 body가 해당 js파일만 불러올 뿐 텅 비어있어 검색엔진이 분석하기 어려워 SEO가 낮다.
서버 사이드 렌더링(SSR)
서버로부터 완전한(js포함된) html 파일을 받아와 페이지 전체를 정적인 페이지로 렌더링하는 것을 말한다.
SSR의 장점
- 모든 컨텐츠가 html에 담겨져있어 SEO가 효율적이다.
SSR의 단점
- 깜박임이슈 생성
- 사용자가 많을 수록 클릭 시 서버에서 데이터를 가지고와서 html을 만들어야 함으로 서버에 과부화가 걸리기 쉽다.
- 사용자가 여기저기 클릭 시 동적 자바스크립트를 받아오지 못해 사용자가 페이지를 볼 수 있는 타이밍인 TTV(time-to-view)와 해당 페이지에서 클릭이나 어떠한 행동을 취하는 TTI(time-to-interact)의 공백기가 발생하여 페이지를 볼 수는 있지만 반응이 없는 경우가 생긴다.
싱글 페이지 어플리케이션(SPA)
CSR을 바탕으로 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신한다. 정리하자면 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식이다.
✔️ SPA로 구성된 웹 앱에서 SSR이 필요한 이유
: SPA에서도 CSR을 기반으로 하기 때문에 텅빈 html페이지를 불러오기 때문에 마찬가지로 검색엔진 최적화가 어려우므로 SSR로 해결할 수 있다.
참고 : CSR/SSR SPA 드림코딩
Front-End Developer