파피루스

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

Today I Learned

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

떼굴펜 2024. 7. 1. 15:03
페이지(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 같이 채택한 경우들이 있다. (예를 들면 캔바, 미리캔버스, 망고보드 등 웹 캔버스 프로그램들이 그러하다)

 

'Today I Learned' 카테고리의 다른 글

[next] 파라미터 가져오는 방법  (0) 2024.07.09
[팀플] 내가 해야 할 일은?  (0) 2024.07.08
[next] 왜 Next.js 를 쓸까  (0) 2024.07.01
[next] image tag  (0) 2024.06.28
[next Js] Image tag + typescript generic  (0) 2024.06.26