SSR
서버사이드렌더링
- 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식이다.
- 페이지를 이동할 때마다 새로운 페이지를 요청 한다.
- 모든 데이터가 매핑된 서비스 페이지를 사용자에게 바로 보여줄 수 있다.
- 서버를 이용해 페이지를 구성하기 때문에 클라이언트사이드렌더링보다 페이지 구성속도는 느리고 페이지 요청마다 새로고침이 일어나기 때문에 페이지 이동시 화면이 깜박거린다는 단점이 있다.
- 하지만 초기로딩속도는 빠르다는 장점이 있으며, 검색엔진최적화(SEO)도 쉽게 구성할 수 있다.
CSR
클라이언트사이드렌더링
- 작성 된 자바스크립트파일로 브라우저의 완전한 렌더링된 웹사이트를 만들 수 있다.
- 첫 요청할때 한페이지 만 불러오게 된다.(SPA)
- 초기페이지 로드는 약간 느리지만 후속 페이지의 로드시간이 빠르다.
- 서버로 부터 데이터를 받아 클라이언트에서 바뀐 데이터가 있는 화면만 새롭게 렌더링한다.
CSR 과 SSR 차이점
SSR의 경우 브라우저에 대한 서버 응답은 렌더링 준비가 된 HTML 페이지인 반면, CSR의 경우 브라우저는 자바스크립트에 대한 링크가 있는 빈 문서를 제공한다는 것이다. 이는 브라우저가 모든 자바스크립트가 다운로드되고 실행될 때까지 기다릴 필요 없이 서버에서 HTML 렌더링을 시작한다는 걸 의미한다.
SSR의 경우 사용자는 모든 작업이 진행되는 동안 페이지 보기를 시작할 수 있다. CSR에선 위의 모든 작업이 수행되기를 기다린 다음 페이지를 볼 수 있도록 가상 돔을 브라우저 돔으로 이동시켜야 한다.
CSR에서 발생하는 빈 페이지 깜박임 현상은 SSR에선 발생하지 않는다.
SSR은 CSR보다 느리다. 서버가 빈 응답을 보내는 대신 HTML 생성에 시간을 써야 하기 때문이다. 서버의 SSR 처리량은 CSR 처리량보다 훨씬 적다. 반응형의 경우 처리량 영향이 매우 크다.
SSR작동방식
사용자가 웹사이트 방문 => 브라우저가 서버에 요청 => 요청 처리 후 페이지 표시 => DB에서 데이터 가져오고 HTML 페이지 만들어 다시 브라우저로 보내기
서버부하가 증가하고 불필요한 인터넷 대역폭이 소모될 수 있음
大器晩成