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 등 인프라를 구축해야 하는 리소스가 필요
