SSR vs CSR

Server Side Rendering

1. 클라이언트가 요청을 보낸다.
2. 서버에서 리소스 확인 후 즉시 렌더링 가능한(ready to render) html을 만든 후 응답으로 보낸다.
3. 클라이언트에서 HTML이 즉시 렌더링된다. Javascript가 읽히기 전이기 때문에 사용자가 컨텐츠를 볼 수 있지만 조작은 불가능하다. 클라이언트는 사용자 조작을 기억하고 있는다.
4. 클라이언트가 Javascript를 다운받는다.
5. Javascript가 컴파일되면 기억하고 있던 사용자 조작을 실행하고, 웹 페이지는 상호작용 가능한 상태가 된다.

특징

• Multiple Page Application에 사용된다.
  • 여러 개의 페이지로 구성된 application
  • 템플릿도 중복 로딩
• 매 페이지마다 전체 페이지를 다시 렌더링하기 때문에 새로고침(깜빡임)이 발생한다.
• Javascript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다.

Client Side Rendering

1. 클라이언트가 요청을 보낸다.
2. CDN(Content Delivery Network)이 HTML과 JS로 접근할 수 있는 링크를 클라이언트에게 보낸다.
3. 사용자는 아무것도 볼 수 없는 상태로 클라이언트가 HTML과 JS를 다운받고 실행된다.
4. 유저들은 placeholder를 보고 있는 상태로 데이터를 위한 api가 호출한다.
5. 서버가 요청에 응답하면 클라이언트는 placeholder 자리에 데이터를 넣어주고, 웹 페이지는 상호작용 가능한 상태가 된다.

특징

• Single Page Application에 사용될 수 있다.
  • 첫 요청시 한 페이지만 불러오고, 페이지 이동시 기존 페이지의 내부를 필요한 부분만 수정해서 보여준다.
  • html, css, javascript 등 정적 리소스를 한 번만 로딩하고, 그 후로 데이터를 받아올 때만 서버와 통신한다.
• 자연스러운 페이지 이동, 사용자 경험(UX)

비교

• 첫 페이지 로딩 시간
  • SSR은 필요한 HTML과 스크립트만 불러오고, CSR은 모든 스크립트를 한 번에 불러오기 때문에 SSR이 더 빠르다.
• 나머지 페이지 로딩 시간
  • CSR은 첫 페이지를 로딩할 때 모든 코드를 다운받았기 때문에 빠르고, SSR은 첫 페이지를 로딩할 때와 같은 과정을 모두 다시 실행하기 때문에 더 느리다.
• 서버 자원
  • SSR이 요청마다 매번 서버에 요청을 하고 서버에서 렌더링된 정적 리소스를 다운받기 때문에 더 많은 자원을 사용한다.
• Search Engine Optimization(SEO) 최적화
  • SSR: 컨텐츠가 서버에서 컴파일되어 클라이언트로 넘어가기 때문에 검색엔진이 크롤링하기에 적합하다.
  • CSR: 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 SEO에 대응하기 어렵다.
• 보안
  • SSR: 사용자 정보를 세션으로 서버에서 관리
  • CSR: 사용자 정보를 클라이언트의 쿠키로 관리

---

출처

• SSR과 CSR의 차이
• SPA vs MPA와 SSR vs CSR 장단점 뜻정리