[면접 준비 - Network]SSR vs. CSR

SSR(Server Side Rendering)은 이름 그대로 JS가 렌더링을 서버에서 마친 후 클라이언트로 전송하는 방식이다.

 

매번 완성된 html을 새로 받는 것이라 보면 되는데, 이 때문에 아래와 같은 장단점이 존재한다.

 

• 장점
  
  
  • SEO(Search Engine Optimization)에 유리
  • 빠른 초기 로딩 - 단일 파일의 용량이 작음
  • 웹 페이지가 사용자와 상호작용이 적은 경우 유리(블로그, 신문사)
• 단점
  
  
  • 애플리케이션 유지 비용이 높음(자원 이용이 서버에 집중)
  • 요청시마다 새로고침 - UX차원에서 불리
  • 서버에 부하가 걸릴 가능성이 있음

 

CSR(Client Side Rendering)은 이와는 달리 JS가 사용자의 요청에 따라 필요한 부분만 받아오는 방식을 말한다.

 

다른 경로로 이동해도 새로고침이 발생하지 않으며, 필요한 렌더링만 진행된다. 아래와 같은 장단점이 있다.

 

• 장점
  
  
  • 빠른 동적 렌더링
  • 요청 시마다 새로고침을 하지 않아 UX차원에서 유리
  • 서버 부하 감소
  • 사용자와 상호작용이 많은 경우 유리(호텔 예약 사이트)
• 단점
  
  
  • 렌더링의 부하가 클라이언트에 집중 - 사용자에 따라 다른 경험
  • SEO(Search Engine Optimization)에 불리
  • 초기 로딩 속도 느림