Santos의 개발블로그

SPA vs SSG vs SSR 본문

기타

SPA vs SSG vs SSR

Santos 2023. 5. 21. 22:22

1. SPA: Single Page Application

가. 특징

  • SPA는 브라우저에서 자바스크립트를 이용하여 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작
  • 서버 측에서는 텅빈 HTML 문서 하나와 자바스크립트 코드만 내려줌 → 이후에 모든 일들은 클라이언트 측에서 브라우저가 비동기로 처리
<body>
  <div id="root"></div>
</body>
  • SPA는 브라우저에서 페이지 소스 보기를 하면 다음과 같이 <body> 요소 아래에 <div> 요소 하나만 있는 경우가 허다함

나. 장점

  • 클라이언트에서 최초에 한 번 자바스크립트 코드를 내려받으면 그 이후로는 서버와 네트워크 통신을 할 필요가 없음
  • 일반적인 웹사이트처럼 페이지 별로 끊어지는 느낌이 없음
  • 사용자 경험 측면에서는 확실한 강점이 있음

다. 단점

  • 지나치게 자바스크립트에 의존적임 → 자바스크립트가 돌아가지 않은 브라우징 환경에서 동작하지 않음
  • 클라이언트에서 내려받아야하는 자바스크립트의 코드의 양이 많기 때문에, 웹사이트가 최초로 로딩되는데 비교적 시간이 오래걸림.
  • 크롤러가 웹페이지에서 읽어갈 수 있는 내용이 <div> 요소 밖에 없기 때문에 SEO 측면에서는 상당히 불리함
  • 단순한 웹페이지를 SPA로 개발하는 것은 득보다 실이 클 수 있음.

2. SSG: Static Site Generator

가. 특징

  • 정적 사이트 생성기 → 동적인 사이트가 아닌 항상 동일한 내용을 보여주는 웹사이트를 만드는데 최적화된 방법
  • 모든 웹페이지를 미리 전부 만들어 놓고 요청이 들어오면 만들어 놓은 웹페이지를 그대로 응답
  • 서버와 클라이언트 측 모두 렌더링을 위해서 할일이 별로 없음 → 속도가 엄청나게 빠름
  • CDN 활용할시 미리 만들어 놓은 웹페이지를 유저와 지리적으로 최대한 가까운 곳에 캐싱 가능

나. 장점

  • 미리 만들어 놓은 웹페이지로 이루어져 있어 SEO가 중요한 사이트에서는 큰 장점을 가짐
  • 속도가 엄청나게 빠름

다. 단점

  • 컨텐츠가 자주 업데이트되는 웹사이트에서는 빌드 시점에서 웹사이트 전체를 다시 만들때 커다란 비효율이 발생
  • 웹사이트 규모가 커짐 → 빌드 시간이 길어짐 → 변경된 컨텐츠가 있을 시 반영되는 시간이 점점 오래 걸림 → 이것을 극복하기 위해 변경이 필요한 웹페이지만 골라서 업데이트 해주는 기능이 생김 (NEXT.js)

3. SSR: Server Side Rendering

가. 특징

  • 서버측에서 웹페지를 렌더링하는 기술 → 클라이언트로부터 요청이 들어올 때마다 실시간으로 해당 웹페지를 만들어 냄 (SSG와 차이)
  • 데이터가 수시로 업데이트 되는 소셜 네트워크 서비스, 전자 상거래 플랫폼에 적합
  • 웹페이지를 렌더링 하기위한 어플리케이션 서버가 추가로 필요, 자체적인 DB 등 인프라를 구축해야 하는 리소스가 필요

나. 장점

  • 서버에서 페이지를 만들어 클라이언트에게 전송하므로 SEO가 중요한 사이트에서는 큰 장점을 가짐
  • 서버에서 페이지를 만들어 전송하기 때문에 웹사이트가 최초로 로딩되는데 비교적 시간이 걸리지 않음.

다. 단점

  • 페이지가 이동 될때마다 서버와 네트워크 통신이 필요하므로 끊어지는 느낌을 받을 수 있음 > UX 측면에서는 약점
  • SPA, SSG 대비 느리고 무거움 → 클라이언트 요청에 의해 서버에서 웹페이지를 만들어 내고 이를 네트워크를 통해 클라이언트에 전송해야 하기 때문
  • 웹페이지를 렌더링 하기위한 어플리케이션 서버가 추가로 필요, 자체적인 DB 등 인프라를 구축해야 하는 리소스가 필요

 

저작자표시

'기타' 카테고리의 다른 글

Chrome의 내부 동작 #1  (0) 2023.12.02
모든 네트워크 활동을 제어하기 with 우선순위  (1) 2023.10.21
Polyfill  (0) 2020.01.21
OWASP  (0) 2020.01.18
웹 캐시  (0) 2020.01.14
'기타' Related Articles more
Comments