1. MPA, Multiple Page Application
MPA, Multiple Page Application은 말 그대로 여러 개의 페이지로 구성된 애플리케이션이다.
MPA라는 개념은 SPA라는 개념이 등장하고 나서,이 둘을 구분 짓기 위해 생겨난 개념으로
SPA 등장 전에 만들어졌던 대부분의 웹 사이트들은 MPA 방식으로 만들어졌다.
우리가 자주 사용하는 Naver도 SPA 등장 전에 만들어진 웹 사이트로
MPA, Multiple Page Application에 가깝다고 할 수 있다.
기본적으로 MPA 방식으로 만들어진 웹 사이트는 아래 이미지와 처럼 동작한다.
클라이언트 (사용자) 측에서 서버에게 HTML 파일을 요청, 서버는 HTML 파일을 응답으로 전송한다.
그리고 이를 전송받은 클라이언트 측에서 해당 HTML 파일을 실행해서 우리가 보는 화면에 출력한다.
(MPA, SPA는 Web에 대한 기초 지식이 있어야 이해하기 수월하다.)
이해를 돕기 위해서 '네이버' 웹 사이트를 설명 예시로 사용하도록 하겠다.
우리(클라이언트, 사용자)가 처음 '네이버'에 접속하면
서버에게 네이버의 'index.html' 파일 전송을 요청한다.
그리고 해당 요청을 전달받은 서버 측에서 'index.html' 외에도 CSS, JavaScript와 같이
웹 사이트를 구성하는 정적 리소스를 랜더링 해서
하나의 완성된 HTML 파일을 만들고 이를 클라이언트 측으로 전송한다. (응답 Responce)
그리고 HTML 파일을 받은 클라이언트 측에서 이를 실행, 웹 사이트를 화면에 출력한다.
MPA는 서버 측에서 랜더링이 완료된 HTML 파일을 받아와서
화면에 출력하기 때문에 초기 구동 속도가 빠른 편에 속한다.
추가적으로 HTML, CSS, JavaScript와 같은 정적 리소스를
서버 측에서 랜더링 하는 방식을 Client Side Rendering, 통칭 CSR이라고 한다.
이제 네이버에서 '카페' 버튼을 클릭해서 '네이버 카페'로 이동해 보자.
위의 화면에서 '카페' 버튼을 클릭하면 화면이 잠깐 하얗게 변했다가 아래 이미지와 같이
네이버 카페 페이지로 넘어가진 것을 확인할 수 있다.
'카페' 버튼을 클릭하면 클라이언트 측에서 '네이버 카페'라는 새로운 페이지를 서버에게 요청
요청을 받은 서버 측에서 네이버 카페를 구성하는 정적 리소스를 랜더링, 하나의 HTML 파일을 만들고
이를 클라이언트 측으로 전송한다.
그리고 '네이버 카페'의 HTML 파일을 받은 클라이언트 측에서 이를 화면에 표시한다.
이 과정에서 새로운 HTML 파일을 웹 브라우저 화면에 출력하는 과정에서
화면의 깜빡임, 새로고침이 발생한다.
이러한 방식은 웹 사이트를 이용하는 사용자의 자연스러운 경험을 해치기도 한다.
이외에도, 웹 기술이 점차 발전해 나가면서 웹 사이트를 구성하는 요소의 개수도 점점 늘어만 가고
매번 새로운 페이지를 요청받을 때마다, 해당 페이지의 정적 리소스를 랜더링하는 서버의 부담도 늘어만 갔다.
그리고 경우에 따라서는 이전 페이지와 새로운 페이지 간의 중복되는 요소도 로딩하는
일명 불필요한 로딩 발생 등의 MPA의 여러 단점들이 대두되기 시작했고
이러한 문제점들을 해결하기 위해서 SPA, Single Page Application이 등장했다.
2. SPA
SPA는 Single Page Application의 약어로, "하나의 페이지로 구성된 웹 Application"을 말한다.
SPA 방식으로 만들어진 웹 사이트 중 하나인 Netflix를 예시로 설명하도록 하겠다.
SPA 방식으로 만들어진 웹 페이지에 처음 접속 시, 서버에게 정적 리소스를 받아오고
클라이언트에서 HTML, CSS, JavaScript와 같은 정적 리소스를 랜더링해서 화면에 출력한다.
이때 클라이언트 측에서 랜더링을 하는 방식을 Client Side Rendering, CSR이라고 한다.
SPA 앱은 MPA 앱과 달리, 처음 받아온 페이지 하나만 가지고
새로운 페이지를 요청받을 때마다 서버로부터 해당 페이지를 구성하는 요소만 받아와서
기존 페이지의 내부를 수정하는 것으로 사용자가 요청한 새로운 페이지를 보여준다는 차이점이 존재한다.
상단 메뉴에서 '영화' 버튼을 클릭해 보면, 별도의 화면 깜빡임 없이
영화 페이지로 넘어가는 것을 확인할 수 있다.
이를 통해서 SPA 형태로 만들어진 웹 페이지는 자연스러운 페이지 이동 경험(UX)을 제공하고
추가적으로 새로운 페이지를 요청받았을 때 MPA와 달리 새로고침을 하지 않고
기존 페이지에서 필요한 부분만 수정해서 보여주므로 불필요한 로딩이 발생하지 않는다.
이렇게만 보면 SPA 형태로 웹 페이지를 만드는 것이 무조건 좋아 보이지만
SPA도 당연히 단점은 가지고 있다.
먼저 SPA 형태로 만들어진 웹 페이지는 검색 엔진 최적화(SEO)가 쉽지 않다는 단점을 가지고 있다.
검색 엔진 최적화 (Search Engine Optimization, SEO)
웹 사이트의 검색 창에 검색어를 입력하면, 검색 엔진이 검색어와 관련된 자료를 수집하고 (크롤링)
검색어와 관련된 내용을 가지고 있는 웹 페이지를 상위 검색 결과로 노출하는 과정
(검색 결과가 더 잘 보이게 하는 것)
크롤링 Crawling
웹 상의 정보를 탐색 및 수집하는 작업
개인 혹은 단체에서 필요한 데이터를 가진 웹 페이지의 구조를 분석 및 파악해서 그대로 긁어오는 것
SPA 앱은 CSR 방식으로 랜더링이 되는데, 이를 검색 엔진 입장에서 보면 아래와 같이 보인다.
<html>
<head>
<link href="app.css" type="text/css" rel="stylesheet"/>
<title>SPA Example</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
이런 구조를 가진 웹 페이지는 검색 엔진 입장에서 색인을 할 만한 콘텐츠가 존재하지 않는다.
즉, 검색 엔진 최적화가 어렵다는 것이다.
이러한 문제점은 SPA 앱을 CSR이 아닌, Server Side Rendering, SSR 방식으로
개발하는 것을 통해서 해결할 수 있다.
이 외에 추가적으로 SPA 앱은 초기 구동 시 서버로부터 정적 리소스를 받아오는데
여기서 JavaScript 파일을 한 번에 번들링(Bundling), 묶어서 받아오기 때문에
MPA 앱과 달리 초기 구동 속도가 느린 편에 속한다는 단점을 가지고 있다.
3. 마치며
MPA와 SPA에 대한 기본적인 개념만 알아보고, 공부한 것을 정리해서 올린 것이기 때문에
이론적, 기술적으로 부족한 부분이 있을 수도 있습니다.
만약 제 글을 보시다가 수정해야할 내용이 있다면 댓글로 남겨주시면 감사하겠습니다.
📔 Reference
SPA vs MPA와 SSR vs CSR 장단점 뜻정리
아하 프론트 개발기(1) — SPA와 SSR의 장단점 그리고 Nuxt.jsSPA(single page application) vs MPA(multiple page application)
SPA(Single Page Application) / 'Jonghan' Velog
💻 Update Log
2024.02.26 MPA, SPA 정리 내용 업로드 완료
'Frontend > Web' 카테고리의 다른 글
| HTML 문서가 브라우저에 랜더링되는 과정 (0) | 2023.12.18 |
|---|
