MPA와 SPA

MPA (Multi Page Application)

여러 개의 HTML 페이지로 구성된 전통적인 웹 애플리케이션이다. 사용자의 요청마다 서버에서 새로운 HTML 파일을 받아와 렌더링한다. 각 페이지는 고유한 URL과 HTML 파일을 가진다. 이러한 렌더링 방식을 서버 사이드 렌더링(SSR)이라고 한다.

SSR (Server Side Rendering)

서버가 요청에 따라 HTML을 생성하거나, 미리 준비된 HTML 파일을 브라우저에 전달하여 렌더링하는 방식이다.

MPA 특징

• 서버에서 렌더링된 HTML을 제공하므로 초기 로딩 속도가 빠르다.
• 검색 엔진이 HTML을 쉽게 크롤링할 수 있어 SEO에 유리하다.
• 페이지 이동 시 매번 전체 HTML을 새로 요청하므로 화면 전환이 느리다.
• 페이지마다 중복 코드가 많고 서버의 부담이 커질 수 있어 유지 보수가 어려울 수 있다.

블로그, 뉴스 사이트처럼 콘텐츠 중심의 초기 렌더링 속도와 SEO가 중요한 경우 적합하다.

SPA (Single Page Application)

하나의 HTML 파일(index.html)만 제공하는 웹 애플리케이션이다. 초기 로딩 시 모든 자바스크립트를 내려받고, 이후에는 클라이언트에서 동적으로 콘텐츠를 렌더링한다. 이 방식을 클라이언트 사이드 렌더링(CSR)이라고 한다.

CSR (Client Side Rendering)

브라우저가 자바스크립트를 통해 화면을 렌더링한다. 페이지 이동 시 HTML을 새로 요청하지 않고, 필요한 데이터만 받아와 화면을 업데이트한다.

SPA 특징

• 서버는 정적 HTML만 제공하므로 서버 부하가 적다.
• 자바스크립트로 동적으로 렌더링하므로 UI 전환이 빠르다.
• 초기 로딩 시 JS 번들 크기가 크면 로딩 시간이 길어질 수 있다.
• 서버에 실질적인 HTML이 없으므로 SEO 최적화가 어렵다.

대시보드, 웹앱, 모바일 앱과 유사한 UX를 제공해야 하는 경우에 적합하다.