MPA

각자 할일만 제대로

 

What ?

MPA

MPA(Multi Page Application)**는 웹 애플리케이션의 전통적인 개발 방식으로, 사용자가 새로운 페이지로 이동할 때마다 서버에서 새로운 HTML 페이지를 로드하는 구조입니다. 각 페이지는 독립적으로 동작하며, 페이지마다 별도의 HTML, CSS, JavaScript 파일을 로드합니다.

  

---

MPA의 특징

1. 다중 페이지 구조:
   • 애플리케이션이 여러 개의 HTML 페이지로 구성됩니다.
   • 사용자가 새로운 URL로 이동할 때마다 서버가 새 HTML 문서를 전달합니다.
2. 서버 중심 렌더링:
   • 요청 시 서버에서 HTML을 생성하여 클라이언트로 전달합니다.
   • 렌더링 로직이 주로 서버에서 처리됩니다.
3. 페이지 전환 방식:
   • 페이지 전환 시 브라우저가 새로운 HTML 페이지를 로드하며, 기존 페이지는 새로고침됩니다.
   • 사용자가 탐색할 때마다 서버로부터 새 페이지를 받아옵니다.
4. 완전한 URL 관리:
   • 각 페이지는 고유한 URL을 가지며, 검색 엔진이 쉽게 인덱싱할 수 있습니다.

---

MPA의 작동 방식

1. 요청과 응답:
   • 사용자가 링크를 클릭하면 브라우저가 서버에 요청을 보냅니다.
   • 서버는 요청에 따라 새 HTML 페이지를 생성해 응답합니다.
2. 페이지 렌더링:
   • 서버가 생성한 HTML을 브라우저가 받아 렌더링합니다.
   • 이 과정에서 브라우저가 필요한 CSS와 JavaScript 파일도 함께 로드합니다.
3. 완전한 새로고침:
   • 새 페이지를 로드할 때마다 브라우저가 전체 페이지를 다시 렌더링합니다.

---

MPA의 장점

1. SEO 친화적:
   • 서버에서 HTML이 생성되므로 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있습니다.
   • 별도의 추가 작업 없이도 SEO 최적화가 가능합니다.
2. 단순한 상태 관리:
   • 각 페이지가 독립적으로 동작하므로, 상태 관리가 SPA에 비해 단순합니다.
   • 각 페이지에서 필요한 데이터만 로드합니다.
3. 보안 및 인증:
   • 서버 중심 구조로 인해 데이터 처리와 인증이 상대적으로 안전합니다.
4. 브라우저 호환성:
   • JavaScript 비활성화 상황에서도 기본적인 기능이 동작합니다.
5. 대규모 애플리케이션:
   • 페이지 단위로 독립성을 유지하기 쉬워, 대규모 웹사이트(예: 쇼핑몰, 포털 사이트)에 적합합니다.

---

MPA의 단점

1. 느린 페이지 전환:
   • 각 페이지를 요청할 때마다 전체 HTML을 서버에서 새로 로드하므로 전환 속도가 느립니다.
   • 사용자가 자주 탐색하는 경우 성능이 저하될 수 있습니다.
2. 서버 부하 증가:
   • 사용자가 요청할 때마다 서버에서 HTML을 생성해야 하므로, 많은 트래픽이 발생하면 서버 부하가 커질 수 있습니다.
3. 클라이언트 경험 제약:
   • 애니메이션이나 부드러운 전환 같은 인터랙션이 제한적입니다.
4. 중복 로직:
   • 각 페이지에 공통적으로 포함되는 리소스(CSS, JavaScript)를 페이지별로 반복적으로 로드해야 할 수도 있습니다.

---

MPA의 사용 사례

1. 정보 중심 웹사이트:
   • 뉴스 사이트, 블로그, 위키백과 같은 콘텐츠 중심 사이트.
2. 쇼핑몰:
   • Amazon, eBay와 같은 상품 페이지가 많은 대형 전자상거래 사이트.
3. 대규모 웹 포털:
   • Google 검색, Yahoo, 네이버처럼 여러 서비스와 페이지가 분리된 포털.
4. 전통적인 기업 웹사이트:
   • 소개 페이지, 제품 페이지 등이 각각 독립적으로 동작하는 웹사이트.

---

MPA의 예제 흐름

1. 사용자 요청

• 사용자가 브라우저에서 http://example.com/products를 요청.

2. 서버 응답

• 서버가 요청에 맞는 HTML 파일을 생성하여 클라이언트로 전달.

3. 브라우저 렌더링

• 브라우저가 응답받은 HTML을 렌더링.
• 필요한 CSS와 JavaScript를 로드 후 화면을 완성.

4. 새로운 페이지 이동

• 사용자가 http://example.com/contact로 이동.
• 서버는 새로운 HTML 페이지를 생성해 전달.
• 브라우저는 기존 페이지를 완전히 새로고침하여 새 페이지를 렌더링.

---

MPA와 SPA의 비교

특징MPASPA

구조	여러 HTML 페이지로 구성	단일 HTML 페이지에서 동작
렌더링 방식	서버에서 렌더링	클라이언트에서 렌더링
페이지 로드	새로운 페이지 요청 시 전체 새로고침	필요한 데이터만 로드하여 업데이트
속도	초기 로드 빠름, 페이지 전환 느림	초기 로드 느림, 페이지 전환 빠름
SEO	SEO 친화적	추가 작업 필요 (SSR, Prerendering 활용)
복잡성	단순, 독립적인 페이지 구성 가능	상태 관리 및 클라이언트 로직 복잡
사용 사례	대규모 정보 사이트, 전자상거래 플랫폼	대화형 애플리케이션, 모바일 앱과 유사한 UX 제공

---

MPA vs SPA 선택 기준

1. SEO 중요성:
   • 검색 엔진 최적화가 중요하면 MPA가 적합.
   • SPA는 추가 설정(SSR) 없이 SEO가 불리함.
2. 애플리케이션 복잡도:
   • 단순한 정보 제공 사이트는 MPA가 효율적.
   • 복잡한 상호작용과 실시간 데이터 처리가 필요하면 SPA가 적합.
3. 성능 요구:
   • 초기 로딩 속도가 중요한 경우 MPA.
   • 전환 속도와 사용자 경험이 중요한 경우 SPA.

---

요약

MPA는 전통적인 방식으로, 각 요청마다 서버에서 HTML을 제공하는 구조입니다. SEO와 서버 중심 로직이 중요한 프로젝트에 적합하며, SPA와 달리 브라우저와 서버 간 완전한 분리가 없다는 점이 특징입니다. 반면, SPA와 비교했을 때 페이지 전환이 느리고 사용자 경험이 제한적일 수 있지만, 대규모 사이트와 정보 제공형 웹사이트에서는 여전히 강력한 선택지입니다.