[Next] CSR SSR RSI SSG 장단점

쿼카쿼카·2023년 4월 9일
0

React / Next

목록 보기
15/34

CSR(Client Side Rendering)

장점

  • 한 번 로딩 되는데는 시간이 걸리지만, 그 이후 필요한 부분만 변경할 수 있어 빠른 UX를 제공
  • 서버가 하는 일이 적어 상대적으로 서버에 부하가 적음

단점

  • 페이지 로딩 시간(Time To View)이 길어 사용자가 처음 화면을 마주하는 데(First Contentful Paint)까지 오래 걸림
  • 웹에서 JS 활성화가 필수
  • HTML을 받아오는 게 아닌 JS로 페이지를 보여주기 때문에 SEO 최적화가 어려움
  • 중요한 정보도 클라이언트로 가야해서 보안에 취약
  • CDN(Content Delivery Netword) 캐시가 안 됨
    • 서울에서 부산에 있는 데이터를 매번 받아오기 어려워 대전에 따로 서버를 둠
    • 부산에 요청하기 전 먼저 대전에 요청하고 없으면 대전이 부산에서 받아오고 서울에 전달
    • 그 이후 서울에서 부산 거를 요청하면 대전에서 캐싱해둔 데이터를 전달
    • CSR은 HTML이 비어있어 캐싱이 어려움
    • JS를 캐싱하는 방법도 있지만 기본적으로 CDN이 어려움

SSG(Static Site Generation)

빌드할 때만 렌더링

장점

  • 정적인 페이지를 빌드할 때 렌더링 해 둬 TTV가 빠름
  • JS 활성화 필요 없음(정적인 사이트)
  • SEO 최적화 좋음(HTML을 만들어서 가져옴)
  • 보안이 뛰어남(서버에서 렌더링)
  • CDN 캐시 가능

단점

  • 데이터가 정적이라 사용자별 정보제공 어려움

ISR(Incremental Static Regeneration)

주기적으로 렌더링

장점

  • SSG와 동일한 장점
  • 데이터가 주기적으로 업데이트 됨

단점

  • 업데이트를 한다고 하지만 실시간 데이터는 아님
  • 사용자별 정보 제공이 어려움

SSR(Server Side Rendering)

클라이언트에서 요청이 있을 때마다 렌더링

장점

  • 정적인 페이지를 빌드할 때 렌더링 해 둬 TTV가 빠름
  • JS 활성화 필요 없음(정적인 사이트)
  • SEO 최적화 좋음(HTML을 만들어서 가져옴)
  • 보안이 뛰어남(서버에서 렌더링)
  • 실시간 데이터를 사용
  • 사용자별 필요한 데이터를 사용

단점

  • SSG ISR에 비해 느릴 수 있음(미리 만들어 두는 게 아니라서)
  • 서버에 과부하가 걸릴 수 있음
  • 요청할 때마다 페이지를 만드니까 CDN 캐시가 안 됨
profile
쿼카에요

0개의 댓글