CS 학습 정리
- 작성자 본인이 해당 주제의 학습 후, 체득하기 위해 블로그 글로 정리하였습니다
- 여러 학습자료 참고 후, 참고한 학습 자료의 출처들은 최하단에 작성하였습니다.
- 학습을 진행하면서, 추가하거나 수정할 사항이 있으면 Version을 업데이트 해나가면서 작성할 계획입니다.
업데이트 내용
VER 1.0
- 최초작성
오늘의 핵심 주제: CSR과 SSR
목차:
- CSR과 SSR이란
- CSR과 SSR 동작 방식
- CSR과 SSR 장단점
- 결론
CSR과 SSR이란
CSR이란
- CSR은 Client Side Rendering의 약자로 클라이언트가 렌더링 하는 방식이다
- 서버에 요청을 보내 정적 리소스를 제공받고, 클라이언트가 렌더링을 진행한다
- 클라이언트가 서버로부터 리소스를 제공받고 랜더링까지 진행하기 때문에 렌더링이 모두 끝난 뒤에야 리소스를 확인할 수 있다
SSR이란
- SSR이란 Server Side Rendering의 약자로 서버가 렌더링 하는 방식이다.
- 서버에서 정적 리소스를 미리 렌더링 해두고, 클라이언트가 요청할 때 미리 렌더링 해둔 정적 리소스를 제공한다
- 클라이언트는 서버로부터 렌더링된 리소스를 제공 받기 때문에 CSR보다 빠르게 리소스를 확인할 수 있다
CSR과 SSR 동작 방식
CSR 동작 방식
- 사용자가 웹사이트를 요청한다
- 클라이언트가 HTML과 JS를 다운받는다
- 클라이언트가 다운받은 HTML과 JS를 렌더링 한다
- 이후 데이터를 위한 API를 호출하여 서버에 데이터를 요청한다
- 서버는 요청받은 API에 응답하는 데이터를 클라이언트에게 전달한다
- 사용자는 웹사이트 화면에 상호작용할 수 있다.
SSR 동작 방식
- 사용자가 웹사이트를 요청한다
- 서버는 렌더링된 HTML파일을 제공한다
- 클라이언트는 렌더링된 HTML 파일을 받고, 자바스크립트를 다운받아 실행한다
- 자바스크립트가 다운받는 동안 사이트 조작은 불가능하나, 사용자의 조작은 기억한다
- 이후 자바스크립트가 실행되고, 사용자가 입력한 조작에 맞는 웹페이지와의 상호작용을 진행한다
CSR과 SSR의 장단점
CSR의 장점
- 렌더링의 책임을 클라이언트에게 전달하여, 서버의 트래픽 부담을 줄인다
- 새로고침이 발생하지 않아, 사용자 경험에 있어서 장점이 있다
- SPA 방식을 이용하기 때문에, 사용자와 상호작용이 많을때(데이터를 서버와 주고 받을 일이 많을때) 유리하다.
CSR의 단점
- 첫 페이지 로딩에 있어서 SSR보다 느리다는 단점이 있다
- 검색 엔진 크롤러가 웹사이트에 대한 데이터를 수집하지 못하는 문제가 있어서, SEO에 대한 추가 보완이 필요하다
- SPA 방식을 이용하기 때문에 네트워크가 느린 환경에서 좋지 못하다
SSR의 장점
- 첫 페이지 로딩에 있어서 CSR보다 빠르다는 장점이 있다
- CSR에 비해 SEO의 추가 보완이 필요 없다는 장점이 있다
- MPA방식을 이용하기 때문에 네트워크가 느린 환경에서도 좋다
SSR의 단점
- 첫 페이지 로딩 이후에 CSR에 비해 느리다는 단점이 있다
- SPA 방식을 이용하기 때문에, 웹사이트의 상호작용이 많을 때, CSR에 비해 성능이 떨어진다는 단점이 있다
결론
- 최근에는 React를 사용하는 프론트앤드 개발자가 많아지면서 CSR방식으로 진행하는 경우가 많아지고 있다. (필자의 학술제 팀프로젝트도 이 방식으로 진행하였다.)
- 하지만 둘 중 어느 한가지 방식이 좋다고 말할 수 없다 따라서 프로젝트 진행에 있어서 상황에 맞는 방식을 선택하면 된다
참고출처:
Software Developer