CSR과 SSR은 서로 반대되는 개념이기 때문에 그만큼 장단점도 서로 엇갈려 있다.
먼저 각 정의 부터 알아보자.
말 그대로 렌더링이 클라이언트에서 일어나는 것이다.
서버에서 요청을 받으면 CDN을 통해 빈html과 css, js 링크를 클라이언트에 보내준다. 클라이언트에서는 받고 렌더링을 한다.
https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkJ0my%2FbtrcOM9GT1V%2FaKDCRhm77MfHF8ushplGi0%2Fimg.png
말 그대로 서버쪽에서 렌더링 준비를 마친 상태로 클라이언트에 전달하는 것이다.
클라이언트는 준비가 다된 html을 받고 html만 즉시 렌더링 시키고 js는 그 후 다운 받으면서 상호작용 가능한 웹이 된다.
https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdGCZHY%2FbtrcOfdcohI%2FDKF2Cr2HHW5X8vNSaexEpK%2Fimg.png
첫페이지 로딩 시간은 csr의 경우 모든 html 과 css를 한번에 불러오기 때문에 필요한 부분만 가져오는 ssr보다 느리다. 하지만,
나머지 페이지 로딩시간은 csr의 경우 모든 html과 css를 불러왔는 반면에 ssr은 필요한 부분만 가져왔기 때문에 로딩을 정확하게 다시 실행한다. 그래서 이경우를 봤을때 ssr보다 빠르다.
csr은 처음에 서버에서 빈 html을 보내줘서 클라이언트에서 빈html만 렌더링 하기 때문에 크롤러에게 노출이 잘 안된다. 하지만 ssr은 처음에 즉시 렌더링 가능한 html을 받고 바로 렌더링 하기 때문에 크롤러에게 노출이 잘된다. 그래서 ssr이 SEO 측면에서 유리하다.
장점
