HTML Over the wire 방식에는 다중 페이지 애플리케이션(MPA)과 유사한 서버측 렌더링(SSR)이 포함됩니다. 그러나 초기 요청 후 브라우저는 단순히 AJAX를 통해 HTML 조각을 비동기적으로 검색하므로 전체 페이지가 다시 렌더링되지 않습니다. SPA(단일 페이지 애플리케이션)와 달리 서버는 애플리케이션의 논리와 상태도 처리합니다.
[그림]
단일 페이지 응용 프로그램(줄여서 SPA)과 다중 페이지 응용 프로그램(줄여서 MPA)은 웹 응용 프로그램을 구축하는 서로 다른 두 가지 방법입니다. 페이지 로딩, 데이터 처리, 사용자 경험 등에서 상당한 차이가 있습니다. 그들 사이의 주요 차이점은 다음과 같습니다.
-
페이지 로드 및 렌더링:
- 단일 페이지 응용 프로그램: SPA에서 모든 페이지 리소스(예: HTML, CSS, JavaScript)는 초기 로드 시 한 번만 요청됩니다. 사용자가 애플리케이션을 탐색할 때 전체 페이지를 다시 로드하는 대신 DOM 요소가 동적으로 업데이트되어 새 콘텐츠를 표시합니다. 이는 페이지 로드 시간을 줄이고 사용자 경험을 향상시킵니다.
- 다중 페이지 애플리케이션: MPA에서 사용자가 새 페이지로 이동할 때마다 브라우저는 페이지 리소스를 다시 요청하고 전체 페이지를 다시 렌더링해야 합니다. 이로 인해 SPA보다 페이지 로드 속도가 느려지고 사용자 경험이 덜 원활해질 수 있습니다.
-
데이터 처리:
- 단일 페이지 애플리케이션: SPA는 일반적으로 Ajax 또는 Fetch API를 사용하여 서버와 상호 작용하여 비동기 요청 및 부분 페이지 업데이트를 달성합니다. 이를 통해 사용자는 앱과 상호 작용할 때 페이지를 새로 고치지 않고도 실시간으로 데이터 업데이트를 볼 수 있습니다.
- 다중 페이지 애플리케이션: MPA는 일반적으로 양식 제출 및 페이지 새로 고침을 사용하여 서버와 상호 작용합니다. 데이터가 업데이트될 때마다 전체 페이지를 다시 로드해야 하고 사용자 경험이 상대적으로 좋지 않습니다.
-
개발 복잡성 및 유지 관리:
- 단일 페이지 애플리케이션: SPA의 개발 및 유지 관리는 프런트 엔드 라우팅, 상태 관리, 모듈화 및 기타 문제를 처리해야 하기 때문에 더 복잡할 수 있습니다. 그러나 최신 프런트 엔드 프레임워크(예: React, Vue, Angular)의 개발로 이러한 문제가 더 잘 해결되었습니다.
- 다중 페이지 애플리케이션: 각 페이지가 독립적이고 프런트 엔드 라우팅 및 상태 관리와 같은 문제를 처리할 필요가 없기 때문에 MPA의 개발 및 유지 관리가 상대적으로 간단합니다. 그러나 애플리케이션의 규모가 확장됨에 따라 페이지 간 코드 및 리소스의 중복이 증가하여 유지 관리가 어려워질 수 있습니다.
-
검색 엔진 최적화(SEO):
- 단일 페이지 애플리케이션: SPA의 SEO 최적화는 상대적으로 어렵습니다. 검색 엔진 크롤러가 JavaScript 생성 콘텐츠를 올바르게 구문 분석하고 렌더링하지 못할 수 있기 때문입니다. 그러나 SEO는 SSR(Server-Side Rendering) 또는 사전 렌더링과 같은 기술을 통해 개선할 수 있습니다.
- 다중 페이지 적용: MPA의 SEO 최적화는 각 페이지에 독립적인 URL과 정적 콘텐츠가 있어 검색 엔진 크롤러에서 직접 크롤링하고 분석할 수 있기 때문에 상대적으로 쉽습니다.
Gmail, Google 지도, Facebook 등은 단일 페이지 애플리케이션의 대표적인 대표자입니다. 사용자가 이러한 응용 프로그램과 상호 작용하면 전체 페이지를 새로 고치지 않고 페이지 콘텐츠가 동적으로 업데이트됩니다.