MPA & SPA
페이지 구조는 어떠한가?
MPA (Multi Page Application)
전통적인 웹 사이트 구조로, 사용자가 새로운 페이지로 이동할 때마다 서버에 요청을 보내 새로운 HTML 문서를 받아오는 방식이다.
- 각 페이지가 독립된 HTML 파일로 존재
- 페이지 이동 시 전체 새로고침(Full Page Reload) 발생 → 페이지 전환 속도 느림
- 서버 중심 렌더링 (SSR) → 서버 부하 증가
- SEO 친화적
SPA (Single Page Application)
웹 애플리케이션 전체가 하나의 HTML에서 작동하며, 페이지 이동은 클라이언트에서 처리된다. 실제로 페이지를 이동하는 것이 아니라, 콘텐츠만 동적으로 교체되는 방식이다.
- 초기에는 하나의 HTML만 로드
- 이후 필요한 데이터만 API를 받아서 렌더링 → 빠른 페이지 전환, 부드러운 사용자 경험
- React, Vue, Angular 등 프론트엔드 프레임워크 기반
- 클라이언트 중심 렌더링 (CSR)
- SEO에 불리
CSR & SSR
페이지를 어떻게 렌더링할 것인가?
CSR (Client Side Rendering)
최소한의 HTML과 JS 번들만 전달받은 후, 브라우저가 JS를 실행해 화면을 렌더링하는 방식이다. 클라이언트 측에서 동적으로 콘텐츠를 렌더링한다.
- 서버는 HTML을 렌더링하지 않고 정적 파일(JS, CSS)만 제공
- JS가 완전히 로드되어야 콘텐츠 표시 가능 → 초기 로딩 느림
- 이후 페이지 전환은 빠르고 부드러움 (SPA) → 동적 기능 구현에 유리
- SEO에 불리 (콘텐츠 인식 어려움)
SSR (Server Side Rendering)
사용자의 요청이 있을 때마다 서버에서 HTML을 완전히 렌더링해 브라우저에 전달하는 방식이다.
- 콘텐츠가 포함된 HTML이 즉시 전달 → 초기 렌더링 속도 빠름
- 이후 JS가 로드되며 사용자 인터랙션 활성화 (Hydration)
- 페이지 전환 시 서버 재요청 필요
- 복잡한 페이지일수록 서버 부하 증가
- SEO 유리 (콘텐츠 인식 가능)
SSG & ISR & Hydration
정적 페이지를 어떻게 갱신할 것인가?
SSG (Static Site Generation)
배포 시점에 HTML 파일을 미리 생성해두고, 요청 시 서버 계산 없이 정적 HTML 파일을 그대로 전달하는 방식이다.
- 빌드할 때 서버가 API로부터 데이터를 받아 HTML 생성
- 매우 빠른 응답 속도, 서버 부하 없음
- 콘텐츠 변경 시 매번 전체 빌드 필요 → 자주 바뀌는 데이터에는 부적합
- SEO 유리
ISR (Incremental Static Regeneration)
SSG의 단점을 보안하기 위해 고안된 방식으로, 일정 주기마다 백그라운드에서 정적 페이지를 재생성하는 방식이다.
- 최초 요청에 정적 HTML를 제공한 이후, 지정된 시간이 지나면 백그라운드로 새 HTML을 생성 → 다음 요청에서는 새 HTML 제공
- 빌드 없이 콘텐츠 최신 상태 유지
- 서버 부하 최소화, 동적 콘텐츠 대응 가능
Hydration
SSG와 ISR로 생성된 정적 HTML 문서를 SPA처럼 동작하게 만드는 과정이다. 초기 렌더링 속도가 빠르고, 이후에 JS로 동작을 완성한다.
- 브라우저는 SSG/ISR로 생성된 HTML을 먼저 렌더링
- JS 번들이 로드되면서 Hydration 수행
- 사용자 인터렉션(클릭, 입력 등)이 가능해짐
