2026-03-04

SPA와 MPA

SPA (Single Page Application)

• 하나의 HTML 페이지에서 필요한 부분만 동적으로 업데이트하는 방식
• 하나의 HTML 페이지에서 JavaScript가 동적으로 화면을 변경하는 방식
• 전체 페이지를 새로 요청하지 않고 JavaScript로 화면을 변경

예시

• React
• Vue
• Angular

특징

• 초기 JS 번들 로딩 필요
• 이후 페이지 이동은 클라이언트에서 처리
  • 페이지 이동 시 새로고침 없음
• 빠른 화면 전환
• 서버 요청 최소화

MPA (Multi Page Application)

페이지 이동 시마다 서버에서 새로운 HTML을 받아오는 방식이다.

예시

• 전통적인 서버 렌더링 웹
• JSP
• PHP
• Django

특징

• 페이지 이동 시 전체 새로고침
• 서버에서 HTML 생성
• SEO 유리
• 초기 로딩 빠름

SEO 차이

SPA

• 초기 HTML이 거의 비어 있음
• JS 실행 후 콘텐츠 생성
• 검색엔진 크롤링 어려움

⇒ SSR, SSG, 프리렌더링 같은 전략 사용

MPA

• 서버에서 HTML 완성
• 검색엔진이 바로 읽음
• SEO 유리

비교 표