CSR과 SSR의 차이점

CSR(Client Side Rendering)

서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그린다. 브라우저가 HTML, JS 파일을 읽고 파싱 작업을 한 후 프레임워크를 실행하고 나서 페이지가 보여지고, 상호작용이 가능해진다.

SSR(Server Side Rendering)

서버에서 만들어진 HTML 파일을 받아와 화면을 그린다. 브라우저는 HTML 파일은 읽을 수 있기 때문에 렌더링된다. JS 파일을 읽고 나면 사용자는 조작이 가능하다. 프레임워크가 실행되면 상호작용이 가능해진다.

 

SSR과 CSR의 차이점

1. 웹 페이지 로딩 시간

SSR은 첫 페이지 로딩 속도가 빠르다. 서버에서 만들어진 HTML을 브라우저에 바로 렌더할 수 있기 때문이다.

하지만 첫 페이지 이후 다른 페이지의 경우에는 다르다. SSR의 경우 서버는 첫 페이지만 브라우저에 전달하기 때문에, 다른 페이지로 갈때마다 서버에 데이터를 요청해야 한다. 반면 CSR은 첫 페이지 뿐만 아니라 다른 페이지의 데이터도 받아온 상태이므로 페이지 전환 속도가 빠르다. 

 

2. 검색 엔진 최적화(Search Engine Optimization; SEO)

CSR은 검색 엔진 최적화가 어렵다. 자바스크립트에 의해 동적으로 콘텐츠가 생성되는 CSR은 자바스크립트를 실행시키지 않는 크롤러가 데이터를 수집하지 못한다. 현재 구글 검색 엔진은 자바스크립트 엔진이 내장되어 있어서 크롤링이 가능하지만, 모든 크롤러가 가능한 것은 아니다. 

SSR은 서버에서 컴파일된 상태이므로 무리가 없다.

 

3. 서버 사용 자원 정도

SSR은 페이지가 바뀔 때마다 서버에 데이터를 요청하므로 서버의 자원을 많이 사용하게 된다. 

 

 

 

 

 

https://hahahoho5915.tistory.com/52

https://velog.io/@jhyun_k/서버사이드렌더링-vs-클라이언트-사이드렌더링-SSR과-CSR

https://dev-ellachoi.tistory.com/28