SSR vs CSR

 

SSR ( Server Side Rendering )

서버 측에서 랜더링이 끝마친 상태로 클라이언트에게 전달하는 방식이다.

 

User가 웹사이트로 요청 -> 서버는 Ready to Render 된 HTML 파일을 전송

-> 클라이언트 측에서 HTML이 곧바로 랜더링되어 화면이 보여지지만 사이트 조작은 불가능 (js가 읽히기 전이다)

-> 클라이언트가 js를 다운받는다 -> 브라우저가 js를 실행하고, 이제 상호작용 가능

 

CSR ( Client Side Rendering )

SSR과 달리 랜더링이 클라이언트 쪽에서 일어난다.

서버는 요청을 받으면 HTML과 js를 보내고, 클라이언트는 이것들을 받아 모두 랜더링하기 시작한다.

 

User가 웹사이트로 요청 -> 서버는 HTML과 JS를 접근할 수 있는 링크를 보냄

-> 클라이언트는 HTML과 JS를 다운받는다. ( 이 때 클라이언트는 SSR과 달리 아무것도 볼 수 없다 )

-> 다운이 완료된 js를 브라우저가 실행, 이제 상호작용 가능

 

 

 

CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 

반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.

 

따라서 첫 페이지를 로딩할 때에는 SSR이 빠르겠지만,

나머지 페이지 로딩까지는 CSR이 빠르다.

 

또한 구글 검색엔진(SEO)에 최적화 방면에서는

당연히 다 받아오는 CSR이 더 좋을 수 밖에 없다.

 

 

 

참고

(https://hanamon.kr/spa-mpa-ssr-csr-%ec%9e%a5%eb%8b%a8%ec%a0%90-%eb%9c%bb%ec%a0%95%eb%a6%ac/)

(https://proglish.tistory.com/216)