CSR과 SSR

 

SSR이란?

Server-Side Rendering이라는 이름에서 알 수 있듯 서버 측에서 렌더링이 된다는 걸 뜻한다.

서버에서 사용자에게 보여줄 페이지를 모두 구성하여(html에 내용이 들어있는 상태) 사용자에게 페이지를 보여주는 방식이다

SSR의 장점

1.서버를 이용해서 페이지를 구성하기 때문에 CSR보다 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 화면 구성의 완료 시점은 빠르다. 

2.모든 컨텐츠가 HTML에 담겨 있기 때문에 SEO구축하기 좋다.

 

SSR의 단점

1. 페이지 전환마다 화면 깜빡임이 발생한다. 사용자 경험이 떨어진다.

2.페이지 이동을 할 때 마다 서버에서 다시 받아오기 때문에 서버 과부화 위험이 있을 수 있다.

3.자바스크립트 파일을 늦게 받아와서 화면은 보이지만, 클릭시 반응이 없는 경우가 생길 수 있다.

(HTML5에서 추가된 defer,async로 해결)

 

CSR이란?

Client-Side Rendering

SSR과 다르게 클라이언트 측에서 렌더링이 일어난다.서버는 요청을 받으면 HTML과 JS를 보내준다.클라이언트는 그것을 받아 렌더링을 시작한다.

서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 화면이 보임과 동시에 상호작용이 가능하다.

CSR 장점

1.클라이언트 측에서 렌더링 하기 때문에 서버에 부하가 적다. 서버성능이 좋지 않을때 사용하면 좋다.

2.첫 페이지 로딩한 후 다른 메뉴로 이동 시 CSR은 첫 페이지 로딩할 때 나머지 구성 부분을 받아왔기 때문에, 이동이 빠르다.

 

CSR 단점

1.첫화면을 보기까지 시간이 오래걸리기 때문에, 로딩화면을 보여줘야 한다.

2.SEO가 좋지 않다. 검색엔진들의 웹 크롤러는 서버에 등록된 웹사이트들을 하나씩 돌아다니며 HTML문서를 분석해 웹사이트에서 빠르게 검색 할 수 있게 도와준다. CSR의 경우 html에 아무것도 없기 때문에 웹 페이지 분석에 어려움이 생긴다.