CSR
클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식
- 변경된 부분과 관련된 데이터만 가져오므로 SSR보다 빠른 속도
- 변경된 부분만 요청함으로써 서버의 부담을 줄임
- 첫 화면을 볼 때까지 시간이 오래걸림, 처음에 접속하면 빈 화면만 보임
- app.js가 모든 정보를 담고있음
- SEO 검색엔진에 노출되지않음
장점 : 빠른 속도(초기화면 렌더링시x), 서버 부하 감소, 사용자 친화적
단점 : 느린 초기로딩, SEO에 불리
SSR
서버사이드 렌더링의 약자로, 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식
- 모든 데이터가 이미 HTML에 담겨진 채로 브라우저에 전달되기 때문에 검색엔진 최적화에 유리, 빠른 초기 로딩속도
- TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 존재한다. (사용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없을 수 있음)
- 페이지를 요청할 때마다 새로 고침 되기 때문에 사용자 경험이 떨어짐
- 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담 증가
장점 : 검색엔진최적화에 유리, 빠른 초기로딩
단점 : 사용자 친화적이지 않음, 요청응답시 화면 깜빡임, 서버 부하
❓ 렌더링 방식 선택기준
서비스, 프로젝트, 콘텐츠의 성격에 따라 달라진다.
- SSR
- 상위노출 필요
- 페이지마다 데이터가 자주 바뀌는 경우
- 누구에게나 동일한 내용을 노출
- CSR
- 개인정보 데이터를 기준으로 노출
- 보다 나은 사용자 경험 제공
- 상위노출보다 고객의 데이터 보호가 더 중요한 경우
기록하며 공부하기