CSR vs SSR 특징 및 차이

 ● CSR(Client Side Rendering)의 특징

말 그대로 렌더링이 클라이언트 쪽에서 일어난다.

즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다.

클라이언트는 그것을 받아 렌더링을 시작한다.

서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼수 있는게 없다.

● SSR(Server Side Rendering)의 특징

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

서버에서 이미 렌더 가능한상태로 클라이언트에 전달되기 때문에 자바스크립트가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.

 

CSR vs SSR 차이

● 웹페이지를 로딩하는 시간

웹 사이트의 가장 첫 페이지를 로딩하는 것과 다른 하나는 나머지를 로딩 하는 것

첫 페이지 로딩시간

 - CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다.

 - 따라서 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간

 - 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정해 보면, CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.

 - 반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.

● SEO 대응

 검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 metadata가 바뀌었다.

SSR은 애초에 서버 사이드에서 컴파일 후 클라이언트로 넘어오기 때문에 크롤러에 대응하기가 용이하다.

 

● 서버 자원 사용

SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문이다.

반면 CSR은 클라이언트에서 렌더링 되기 때문에 서버에 부하가 적다.

https://hahahoho5915.tistory.com/52

[간단정리] CSR vs SSR 특징 및 차이