SSR
- 네트워크가 느릴 때
(CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다. - 서버 쪽에서 렌더링 준비를 끝내고 클라에게 보냄
- SEO가 필요할 때.
- 최초 로딩이 빨라야 하는 사이트를 개발할 때(초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느리다.)
- 메인 스크립트가 크고 로딩이 매우 느릴 때
- 웹 사이트가 상호작용이 별로 없을 때.
- SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문이다.
- 서버 과부하
CSR
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
(로딩창을 띄울 수 있는 장점이 있다.) - 메인 스크립트가 가벼울 때
- SEO 적용하지않는 경우
- 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때. (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)
- SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문
- 리엑트로 구현할 때는 renderToStrng를 이용하여 React에서 서버사이드 렌더링을 구현하는데 사용되는 메소드다. // 또는 next.js와 같은 프레임워크를 통해서 SSR를 가능케한다.
- 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다.
- 새로고침이 발생하지 않아 사용자 경험에 도움을 준다.
초기 로딩 이후 빠른 웹사이트 렌더링이 가능(웹사이트가 로딩되는 즉시 상호작용 가능
필요한, 변경된 데이터만 받아오므로 트래픽 감소
