CSR, SSG, ISR, SSR 차이점 정리

Client Side Rendering

렌더링하는 주체자가 클라이언트(브라우저)

장점?

한번 로딩되면, 빠른 UX 제공

서버의 부하가 작음

문제점?

페이지 로딩 시간(TTV)이 길다

자바스크립트 활성화 필수임

SEO 최적화가 힘듬

보안에 취약함

CDN에 캐시가 안됨

 

*TTV(time to view)

---

Static Site Generation

렌더링 하는 주체자가 서버,

언제 렌더링 하냐? 빌드할때 렌더링

장점?

페이지 로딩 시간(TTV: time to view)이 빠름

자바스크립트 필요 없음

SEO 최적화가 좋음

보안이 뛰어남

CDN에 캐시가 됨

문제점?

데이터가 정적임(데이터가 가변적으로 바뀌는 웹사이트라면 맞지 않다)

사용자별 정보 제공이 어려움

=> 이런 문제점을 해결하기 위해 나온게 ISR, SSR

---

Server Side Rendering

렌더링하는 주체자가 서버,

언제 렌더링 하냐? 요청시 렌더링

장점?

페이지 로딩 시간이 빠름

자바스크립트가 필요 없음

SEO 최적화가 좋음

보안이 뛰어남

실시간 데이터를 사용

사용자별 필요한 데이터를 사용함

문제점?

SSG, ISR 보다 비교적 느릴 수 있음

서버의 과부하가 걸릴 수 있음

---

Incremental Static Regeneration

렌더링 하는 주체자가 서버,

언제 렌더링 하냐? 주기적으로 렌더링

SSG와 동일한 원리.

단, 정해진 주기에 따라 페이지를 다시 생성함

장점?

페이지 로딩 시간(TTV: time to view)이 빠름

자바스크립트 필요 없음

SEO 최적화가 좋음

보안이 뛰어남

CDN에 캐시가 됨

데이터가 주기적으로 업데이트 됨

문제점?

실시간 데이터가 아님

사용자별 정보 제공의 어려움

=> 이런 문제점을 해결하기 위해 나온게 SSR