SSG / SSR / ISR / CSR 차이

bomhada·2022년 7월 15일
0

web study note

목록 보기
2/2
post-thumbnail

정적 페이지 생성 SSG (Static Site Generation)

raw 데이터와 템플릿 세트를 바탕으로 완전히 정적인 HTML 웹사이트를 생성하는 방법입니다.
SSG는 장점이 많지만 쇼케이스 사이트와 같이 내용이 거의 변하지 않는 웹사이트의 경우에만 사용해야합니다.

장점

  • SEO(검색 엔진 최적화)에 유리합니다.
  • 정적 사이트는 미리 만들어져서 사용자에게 제공될 준비가 되어 있어 가장 빠른 형식의 웹페이지 입니다.
  • 웹사이트가 미리 만들어졌기 때문에 콘텐츠가 훨씬 더 안전합니다.
  • 정적 사이트 생성은 완전히 정적인 HTML기반 사이트를 생성할 수 있는 기능을 제공합니다.

단점

  • 콘텐츠를 편집하고 올리는 것이 어렵습니다. 이때, Git 저장소의 접근 권한을 요구할 수 있습니다.
  • 콘텐츠를 업데이트하려면 사이트를 다시 빌드하고, 테스트한 후 최종적으로 배포해야합니다.
  • 대규모 웹 사이트의 경우 빌드가 오래 걸리기도 하고, 관리하는 것이 매우 번거롭습니다.

서버 사이드 렌더링 SSR (Server-Side Rendering)

브라우저에서 웹페이지를 렌더링하는게 아닌 서버에서 웹페이지를 생성하는 방법입니다.
서버 비용이 많이 들 수 있으므로, 주식 시게 표시기와 같이 매우 빈번하게 변경되고 SEO에 크게 의존하는 매우 동적인 콘텐츠를 포함하는 경우에만 사용합니다.

장점

  • 동적 콘텐츠가 포함된 페이지를 만들 때 사용할 수 있습니다.
  • SSR은 SSG만큼은 아니지만 로드 되는 즉시 콘텐츠가 나타나므로 유저가 빠르게 콘텐츠를 확인할 수 있습니다.
  • SEO(검색 엔진 최적화)에 유리합니다.

단점

  • SSR은 모든 요청이 서버에서 처리되기 때문에 서버에 높은 연산 능력을 필요로 합니다.
  • SSR 사이트는 보안을 유지하기가 어렵습니다.
  • 캐싱에 복잡한 구성이 많이 필요합니다.

점진적 정적 생성기 ISR (Incremental Static Regeneration)

정적 사이트의 이점을 유지하면서 수 많은 페이지로 확장이 가능합니다.
ISR은 SSR과 SSG의 장점을 합쳐 효율적이고, 확장 가능한 솔루션을 제공하기 때문에 매우 효과적입니다.
개인 사이트나 블로그와 같이 콘텐츠가 동적이지만 자주 변경되지 않는 사이트인 경우 ISR을 사용하는 것이 좋습니다.

장점

  • 미리 페이지 렌더링을 하고, 캐시하기 때문에 매우 빠릅니다.
  • 내용 변경에도 사이트를 다시 배포할 필요가 없습니다.
  • SEO (검색 엔진 최적화)에 유리합니다.

단점

  • 콘텐츠가 변경된 후에도 이전의 컨텐츠가 보입니다.

클라이언트 사이드 렌더링 CSR (Client-Side Rendering)

자바스크립트를 사용해 브라우저에 직접 페이지를 렌더링하는 것을 의미합니다.
SCR은 SEO에 크게 의존하지 않는 모든 사이트에 이상적입니다.
풍부한 사이트 상호작용과 웹, 크로스 플랫폼 어플리케이션을 만드는 데 사용할 수 있습니다.

장점

  • 동적 콘텐츠가 포함된 페이지를 만드는 데 사용할 수 있습니다.
  • SSG와 달리 서버 비용이 높지 않습니다.
  • 처음 로드한 후 다른 페이지를 로드하는 속도가 매우 빠릅니다.

단점

  • SEO(검색 엔진 최적화)가 잘되지 않습니다.
  • 느린 초기 로드 시간과 상호 작용하기 위한 시간이 -> 성능 저하를 일으킵니다.

0개의 댓글