CSR과 SSR에 대해 알아보자

CSR(Client Side Rendering)

CSR 구동 원리

• 초기 로딩 속도 느림
• 이후 구동 속도 빠름
• 뼈대만 있는 HTML만 넘겨주는 역할만 하면 돼서 서버 측 부하가 적음
• 사용자 경험 우수 : 클라이언트 측에서 연산, 라우팅 등 직접 처리하기 때문에 반응 속도가 빠름
• 웹 크롤러가 HTML을 읽을 때 텅텅 빈 사이트가 크롤링 되기 때문에 SEO(검색엔진 최적화)에 안 좋음
• TTV와 TTI사이 간극이 없음

 

CSR의 단점 보완 방법?

1. 초기 로딩 속도 느림
   → 해결 방법? Code Splitting, tree-shaking, chunk 분리
2. SEO 불리
   → 해결 방법? pre-rendering

 

SSR(Server Side Rendering)

SSR 구동 원래

• JS를 다운로드하고 실행하기 전에 사용자가 화면을 볼 수 있기 때문에 CSR보다 초기 구동 속도가 빠름 → 첫 페이지 빨리 보여주고 싶을 때 유리
• SEO(검색엔진 최적화)에 유리
• 처음 HTML + Css 가 완료되어 화면이 보이지만 JS가 완전히 다운, 실행되기까지 시간이 있기 때문에 처음 화면이 그려지고 사용자가 인터렉티브 한 행동을(ex. 버튼 클릭) 하려고 할 때 반응이 느릴 수 있다. → TTV와 TTI 사이 간극이 생김

 

그렇다면 CSR과 SSR의 장단점에 대해서 정리해 보자.

 

 

CSR과 SSR의 장단점

CSR과 SSR의 장단점

 

 

 

출처 : https://www.youtube.com/watch?v=YuqB8D6eCKE