SSR(server side rendering) & CSR(client side rendering) 차이점

돌리의 하루·2023년 1월 30일
0
post-thumbnail
  • SSR

TTV가 짧다 (time to view)
TTI가 길다 (time to interactive)

서버에서 모두 처리를 하고 보내기 때문에 첫 화면을 빠르게 볼 수있기에,
뉴욕타임즈, 뉴스기사사이트에서 사용하기에 좋다.

SSR은 클라이언트가 페이지를 이동할 때 서버측에서 데이터를 불로오고, 다시 브라우저에게
모든 내용을 전달한다. 이것은 고객이 페이지를 이동할 때마다 반복된다.
==>다시 렌더링하지 않아도 되는 부분까지 렌더링하게된다는 단점이 있다.
또한, 서버에서 대부분을 처리하기 때문에 과부하가 올 수 있다.


  • CSR

TTV가 길다 (time to view)
TTI가 짧다 (time to interactive)
보통 react, spa(single page application)에서 많이 쓰인다.

index.html을 먼저 다운받고, 그 다음 무거운 index.js 파일을 다운로드 하게 된다.
-- 이에 대한 단점으로 -->
거의 모든 코드들이 index.js에 들어있기 때문에, 파일을 다운받는데 시간이 걸릴 수 있다.
=>고객들이 첫 화면을 보는데 시간이 많이 걸린다.
==>이 부분을 어느정도 해소해줄 수 있는것이 code split이다.

code split : 필요한 js만 일단 받아온다, lazy loading

index.html에 정보가 많이 들어있지 않아서, 검색엔진최적화 (Search Engine Optimization)에 취약하다.

이럼에도 CSR을 쓰는 이유는, 클라이언트가 페이지를 이동할 때 화면이 깜빡하지 않아도 바로 렌더링이 되고, 서버에서는 데이터를 주고받기만 해도 되기때문에 서버의 부하를 줄여줄 수도 있다.

이래서 아고다,에어비엔비처럼 예약사이트에서 고객들의 상호작용이 필요한 홈페이지에 좋다.

profile
진화중인 돌리입니다 :>

0개의 댓글