서버사이드 랜더링(SSR)은 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이고 클라이언트 사이드 랜더링(CSR)은 SSR과 달리 렌더링이 클라이언트 쪽에서 일어납니다.
클라이언트 사이드 랜더링의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러오고 반면 서버사이드 렌더링은 필요한 부분의 HTML과 스크립트만 불러옵니다. 따라서 평균적으로 서버사이드 렌더링이 더 빠릅니다.
두번째로 클라이언트 사이드 렌더링은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 데이터가 바뀝니다. 반면 서버 사이드 렌더링은 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이합니다.
SSR을 사용해야할 때
- 네트워크가 느릴 때
(CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문) - SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
- 최초 로딩이 빨라야하는 사이트를 개발할 때
- 메인 스크립트가 크고 로딩이 매우 느릴 때
CSR을 사용해야할 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
(로딩창을 띄울 수 있는 장점이 있다.) - 메인 스크립트가 가벼울 때
