SSR
SSR: 백엔드에서 필요한 데이터를 채워서 미리 HTML로 만들어줌(서버측에서 렌더링이 일어남), 그걸 클라이언트에게 보내줌
CSR
CSR: 클라이언트에서 자바스크립트 파일을 받아서, 필요한 데이터도 백엔드로부터 받아와서 클라이언트에서 최종 HTML을 만듬
(업데이트가 필요한 부분만 요청 후, 뿌려줌)
사용 권장 예시
SSR을 사용하자
- 네트워크가 느릴 때 😓
- (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
- SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
- 최초 로딩이 빨라야하는 사이트를 개발 할 때
- 메인 스크립트가 크고 로딩이 매우 느릴 때CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
- 웹 사이트가 상호작용이 별로 없을 때.
CSR을 사용하자
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
(로딩창을 띄울 수 있는 장점이 있다.) - 메인 스크립트가 가벼울 때
- SEO 따윈 관심 없을 때😤
- 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때. (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)
프론트 요정임