FrontEnd - CSR과 SSR의 차이점에 대해서 설명해주세요.

[Doodream]

이슈는 모의 면접에서 나왔던 중요한 질문을 다시 공부하고, 정리하고픈 분들을 위한 공간으로 사용할 예정입니다.

기술 면접 질문

CSR과 SSR의 차이점에 대해서 설명해주세요.

[vi2920va]

SSR은 서버 사이드 렌더링 이라고 해서, 서버로 부터 만들어진 HTML을 전달 받아 브라우저에 렌더링 하게 됩니다.
장점으로는 초기 로딩 속도가 빨라서 사용자 빠른 콘텐츠를 볼 수 있고, 검색 엔진에 최적화 할 수 있습니다.
단점으로는 페이지 요청 시 마다 새로고침 되므로 UX가 떨어집니다. 그리고 매번 서버에게 요청하게 되어서 트래픽과 서버 부하가 증가하게 됩니다.

CSR 클라이언트 사이드 렌더링 이라고 해서, 맨 처음에는 데이터 없는 문서를 반환합니다. 즉, 사용자 요청이 있을 때 서버에게 필요한 리소스를 요청하고 필요한 부분 바꿔서 렌더링 하게 됩니다.
장점으로는 첫 로딩시에 HTML 다 다운 받고, 동적으로 렌더링 하게 때문에 UX 경험이 향상 되고, 필요한 부분만 서버에 요청하기 때문에 서버 부담이 적어집니다.
단점으로는 필요한 리소스를 모두 다운 받아야 하므로 초기 구동 속도가 느립니다.