CSR (Client Side Rendering) vs SSR (Server Side Rendering)

1. CSR

클라이언트인 브라우저가 렌더링을 처리하는 방식. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체

장점

• 네이티브 앱과 비슷한 빠른 인터렉션 구현 가능
  • View 렌더링을 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공
  • 새로고침이 발생하지 않아 사용자가 네티이브 앱과 비슷한 경험 가능

단점

• 첫 페이지 로딩 속도가 SSR에 비해 느림
  • 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받다 보니 SSR보다 로딩 속도가 느림
• SEO에 대한 추가 보완 작업 필요

2. SSR

서버에 매번 데이터를 요청하여 서버에서 처리하는 방식(클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공) 즉, 서버가 화면을 그리는 주체

장점

• 첫 페이지 로딩 속도가 CSR에 비해 빠름
  • 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문에 초기 로딩 속도가 CSR에 비해 빠름
• SEO 가능

단점

• 페이지 이동 시 속도가 느림
  • 페이지 이동 시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이므로 속도가 다소 느림