SSR vs CSR

[SSR]

- 서버에서 랜더링을 끝내고 데이터를 HTML 파일로 내려주는 방식

- 초기 로딩 속도가 빨라 사용자가 컨텐츠를 빨리 볼 수 있다

- 서버에 매번 요청을 하기 때문에 서버 부담이 커진다

- 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 떨어진다

- SEO(검색엔진 최적화)가 가능하다

[CSR]

- 최초 요청시에 HTML과 CSS, Javascript 등 각종 리소스를 받아와 서버에 데이터만 요청하고 자바스크립트로 뷰를 컨트롤하는 방식

- 초기 요청 때SSR보다 많은 리소스를 요청하기 때문에 빠르게 랜더링하기 하여 사용자 UX가 뛰어나다

- 서버에 요청하는 횟수가 적기 때문에 서버 부담이 덜하다

- 모든 HTML과 CSS, Javascript 등 각종 리소스가 로드될 때까지 기다려야 한다

- 구글은 크롤러 안에 자바스크립트 엔진이 들어 있어서 크게 문제될 것이 없지만 다른 검색 엔진의 경우 그렇지 않기 때문에 SEO(검색엔진 최적화) 문제가 발생할 수 있다

 

 

 

 

unsplash @glenncarstenspeters

참고

- https://velog.io/@ru_bryunak/SPA-%EC%82%AC%EC%9A%A9%EC%97%90%EC%84%9C%EC%9D%98-SSR%EA%B3%BC-CSR

- https://velog.io/@namezin/CSR-SSR