💡 웹페이지를 로딩하는 시간
- 첫 페이지 로딩시간
CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러옵니다.
반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오기 때문에 평균적으로 SSR이 더 빠르게됩니다.
- 나머지 로딩 시간
첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정한다고 했을 때,
CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 상대적으로 빠릅니다.
반면, SSR은 첫 페이지를 로딩한 과정을 다시 실행하게 됨으로 상대적으로 더 느립니다.
💡 SEO 대응 (serach engine optimization : 검색 엔진 최적화)
검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽습니다.
CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀝니다.
( +) 이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었지만 구글이 그 트렌드를 바꾸고 있다고 합니다.)
SSR은 처음부터 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이합니다.
💡 서버 자원 사용
SSR은 매번 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용합니다. 반면 CSR은 클라이언트에 한번에 요청을 몰아주고 (초기 진입 속도는 느림) 그 후로는 필요한 데이터만 갱신하면 되기 때문에 서버에 부하가 적습니다.
출처
https://velog.io/@vagabondms/기술-스터디-SSR과-CSR의-차이
https://www.sarah-note.com/클론코딩/posting2/
쉬운게 좋은 FE개발자😺