RARRIT

기억을 너무 믿지 말자

:ledger: 멀티 페이지 애플리케이션(MPA)에 대해 알아보자.

이제 클라이언트사이드 랜더링(CSR)과 서버사이드 랜더링(SSR)을 공부했으니, 멀티 페이지 애플리케이션(MPA)에 대해서도 알아보자!

:one: 멀티 페이지 애플리케이션 (MPA)

멀티 페이지 애플리케이션(Multi-Page Application, MPA)은 각 페이지가 서버에서 완전히 새로운 HTML 문서로 제공되는 웹 애플리케이션이다. 사용자가 웹사이트 내에서 페이지를 이동할 때마다 새로운 HTML 파일을 서버로부터 로드하며, 전체 페이지를 새로고침하여 새 페이지를 로드한다.

:two: MPA의 장점과 단점

:pushpin: 2-1) 장점

  1. 전통적인 웹 구조
    • MPA는 전통적인 웹사이트 구조를 따르며, 각 페이지가 독립적으로 관리된다. 이는 간단한 프로젝트나 전통적인 웹사이트에 적합하다.
  2. SEO와 크롤링 용이성
    • 모든 페이지가 개별적으로 HTML 문서를 제공하므로 검색 엔진 크롤러가 각 페이지를 쉽게 크롤링하고 인덱싱할 수 있다.
  3. 캐싱 및 링크 관리
    • 각 페이지가 독립적이기 때문에 캐싱과 링크 관리가 비교적 용이하다. 사용자와 서버 간의 데이터 전송이 명확하게 이루어진다.

:pushpin: 2-2) 단점

  1. 느린 사용자 경험
    • 페이지 전환 시 매번 전체 페이지를 새로 로드해야 하므로 사용자 경험이 느려질 수 있다. 페이지를 새로고침하는 동안 사용자에게 일시적인 공백이 나타날 수 있다.
  2. 서버 요청 증가
    • 페이지를 이동할 때마다 서버로부터 새로운 HTML을 요청해야 하므로 서버 부하가 증가할 수 있다. 이로 인해 서버의 성능이 저하될 수 있다.
  3. 상태 유지의 어려움
    • 각 페이지가 독립적으로 작동하기 때문에 페이지 간 상태나 데이터를 유지하는 것이 어려울 수 있다. 상태를 유지하기 위해 클라이언트 측의 로컬 스토리지나 세션 스토리지를 활용해야 할 수 있다.

:three: MPA의 실행 과정

MPA는 페이지 전환 시 새로운 HTML 문서를 서버에서 받아오는 구조를 가지고 있다. 대화하는 느낌으로 한번 알아보자.

:pushpin: 3-1) 로딩 과정

  1. 나(사용자) : URL을 입력해야겠어!
    • 웹사이트 URL 입력중..
  2. 브라우저 : 요청 보낼게, 기다려봐!
    • 서버로 요청을 보냄
  3. 서버 : 요청받았어! 새로운 HTML 페이지를 준비할게!
    • HTML 파일을 생성하거나 준비함
  4. 서버 : 요청하신 페이지를 보내드릴게요!
    • 클라이언트(브라우저)에게 HTML 페이지를 전송함
  5. 브라우저 : 페이지를 로드할게요!
    • 서버로부터 받은 HTML을 로드함
  6. 브라우저 : CSS와 JavaScript도 로드할게요!
    • 필요한 CSS와 JavaScript 파일을 추가로 로드함
  7. 브라우저 : 페이지가 완성되었어요! 이제 사용자에게 보여줄게요!
    • 사용자에게 최종 페이지를 표시함
  8. 사용자 : 오우, 페이지가 새로 고쳐졌군요!

:pushpin: 3-2) 페이지 상호작용

  1. 페이지 로딩 완료
    • 3-1) 로딩 과정의 대화
  2. 사용자 : 장바구니에 상품을 추가해볼까?
    • 장바구니 추가 버튼을 클릭함
  3. 브라우저 : 페이지를 새로 고침하여 장바구니 상태를 업데이트해야겠어!
    • 장바구니 정보를 서버에 전송하고 새로운 페이지를 로드함
  4. 서버 : 장바구니 정보를 업데이트하겠습니다!
    • 데이터를 저장하고 새로운 페이지를 준비함
  5. 서버 : 업데이트된 페이지를 사용자에게 전송하겠습니다!
    • 새로운 HTML 페이지를 클라이언트에 전송함
  6. 브라우저 : 페이지가 업데이트 되었어요! 장바구니 상태가 반영된 페이지를 보여줄게요!
    • 사용자에게 최신 장바구니 상태를 반영한 페이지를 보여줌
  7. 사용자 : 페이지가 새로 고쳐져서 업데이트가 반영되었군요!

MPA는 전통적인 웹 애플리케이션 모델로, 각 페이지가 독립적이고, 페이지 간 이동 시 전체 페이지를 새로 로드하는 방식이다. 이는 사용자 경험의 느려짐이나 서버 부하 증가 등의 단점이 있지만, 전통적인 SEO와 링크 관리에 강점을 가진다.

:fire: 마무리

MPA는 각 페이지가 서버에서 독립적으로 랜더링되며, 페이지 이동 시마다 전체 페이지를 새로 로드하는 방식이다. 이러한 접근 방식은 간단한 웹사이트나 전통적인 웹 애플리케이션에서 여전히 유용하게 사용된다. 페이지의 SEO와 관리가 용이하지만, 사용자 경험 면에서는 느림을 감수해야 할 수 있다.

:pushpin: 관련 글

참고