CSR vs. SSR, 무슨 차이인가요?

페이지(page) 몇 장 쓰세요?

1) MPA (Multi Page application) 

: 새로운 페이지를 요청할 때마다 정적 리소스를 다운받아 렌더링하는 방식

 

2) SPA (Single Page application)

: 필요한 데이터가 있을 때마다 비동기로 받아와, 동적으로 현재 화면에 재렌더링 하는 방식

 

 

 

 

 

TTV ? TTI?

 

• TTV (Time To View) : 첫 페이지 로딩 시간
• TTI  (Time To Interact) : 인터렉션 (버튼 클릭, 슬라이드 이동 등) 가능한 상태로의  로딩 시간

 

 

 

 

페이지(page) 어디에서 만드나요?

1) CSR (Client Side Rendering) 

: 클라이언트(브라우저)에서 페이지를 동적 생성하는 방식

장단점

• +👍최초 한번이 느리고, 그 이후의 상호작용은 빨라 사용자 경험이 좋다
• +👍서버 부하가 적음
• - 👎TTV 길다
• - 👎SEO 어려움

 

2) SSR (Server Side Rendering)

: 서버에서 미리 만들어두었다가 클라이언트에서 요청하면 내려주는 방식

 

동작 방식

: 서버는 미리 브라우저에 pre-rendering한 html 파일을 내려준 후, js, css파일들을 추가로 내려줘 (hydration) interaction이 가능하도록 한다.

 

장단점

• +👍TTV 짧다
• +👍SEO 최적화
• - 👎서버 과부하 : 컨텐츠 변경 시 전체 사이트 재빌드 필요 및 요청할 때마다 페이지 생성

참고)
- SSG(Static Site Generation) : 최초 빌드 시 생성
- ISR (incremental Static Regeneration) : 최초 빌드 시 생성 + 설정한 주기에 맞춰서 재생성

 

 

	CSR	SSR	SSG	ISR
빌드 시간	짧다	짧다	길다	길다
검색 엔진 최적화 (SEO)	나쁨	좋음	좋음	좋음
페이지 요청 시 응답 시간	보통	길다	짧다	짧다
최신 정보 여부	O	O	X	아닐 수 있음

 

 

 

 

CSR != SPA, 두개는 다른 개념이다.

 따라서, CSR과 SPA는 다른 개념이며 SPA이기에 브라우저 내에서 다른 여러 기능들을 페이지 이동없이 이용할 수 있기에 SPA + CSR 같이 채택한 경우들이 있다. (예를 들면 캔바, 미리캔버스, 망고보드 등 웹 캔버스 프로그램들이 그러하다)