📘 CSR vs SSR

Preface

📌 개발 공부 3개월 차인 to-be 개발자의 자습 blog🙂ﾠOct 17 ~ 23, 2021

현재 상태
React에서 멈추지 않고 더 배워야 하는 이유 중 rendering 관련 문제를 찾아보았다.

Client Side Rendering

Single Page Application인 React.js, Vue.js 등

😀

• 초기 loading 이후엔 요청한 부분만 요청하므로 속도가 빠름
• HTML file에 뼈대만 있으므로 server의 부하가 적음
• rendering이 빠르므로 data 비용 아낄 수 있음
• TTV와 동시에 TTI 가능
  *TTV : Time To View, TTI : Time To Interact
• client에서 연산과 router 등을 모두 직접 처리해 반응 속도가 빠름
• blink issue 없음 (UX가 좋음)
  *blink issue : rendering될 때의 화면 깜빡임

🙁

• HTML file에 있는 JavaScript file을 download 받고 동적 DOM을 생성하는 것을 기다려야 하므로 초기 loading 속도가 느림
  🔨 code splitting, tree-shaking, chunk 분리로 JS bundle 크기를 줄여 초기 loading 속도 보완 가능
• HTML file이 blank여서 SEO에 불리함
  🔨 library나 web pack plug in을 통해 각 page의 HTML을 미리 생성해 pre-lendering된 HTML version page를 보여주어 개선 가능
• HTML file이 blank여서 page caching이 잘 안 됨

Server Side Rendering

Multi Page Application

😀

• rendering이 준비된 HTML이 먼저 화면에 뿌려지므로 초기 구동 속도가 빠름
• code가 HTML file에 담겨 있으므로 SEO에 유리함
• CloudFlare나 CloudFront같은 page caching 기술 활용 가능

🙁

• TTV부터 TTI까지 공백이 있어서 사용자 경험에 좋지 않음
• 요청하면 HTML file을 통째로 가져와서 느림, 사용자가 많으면 과부하에 걸릴 수 있음
• blink issue 있음 (UX가 좋지 않음)

✔️ PrelenderIO

Google이 PrelenderIO로 caching과 SEO 문제를 해결할 수 있다고 하였으나 완성도에 의문

Isomorphic App = Universal Rendering

: CSR과 SSR의 장점만 모은 것

• w/o framework
  • express.js
  • nest.js : TypeScript 지원
• w/ framework
  • NEXT.js : code는 React.js인데 SSR을 할 수 있음
  • NUXT.js : Vue.js를 위한 framework

😀

• caching할 때 SSG로 첫 loading이 느리지 않게 하고 SEO 문제 해결
  *SSG : Static Sties Generation
  Static Rendering이라고도 하며, 바뀔 일이 거의 없는 page에 적합
  e.g. React + Gatsby
• 요청한 부분만 가져오니까 속도가 빠름
• page caching이 잘 됨

🙁

• framework를 사용하면 CSR에 비해 code의 복잡도가 올라감
• 직접 제어할 수 없는 blackbox 영역 존재

CSR vs SSR vs CSR + SSR

• SSG
  • 검색 노출 필요함
  • 모든 고객에게 동일한 내용을 제공함
  • 내용 update가 거의 없음
• CSR
  • 검색 노출 필요 없음
  • 고객과 상호작용 많음
  • 내용이 고객의 개인 정보로 이루어짐
• SSR
  • 검색 노출 필요함
  • 모든 고객에게 동일한 내용을 제공함
  • 내용 update가 잦음
• CSR + SSR
  • 검색 노출 필요함
  • 고객과 상호작용 많음
  • 고객에 따라 내용이 달라짐

---

Endnote

🙇 the source of this content

코드팩토리 - Client Side Rendering vs Server Side Rendering
드림코딩 - 서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
우아한Tech - [10분 테코톡] 🎨 신세한탄의 CSR&SSR