728x90
MPA (Multi Page Application)
멀티 페이지 애플리케이션은 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 css, js, 이미지 파일 등의 리소스를 전달받아 화면에 보여주는 방식이다. 각 페이지마다 다른 html 파일을 만들어서 제공하거나 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용한다.
싱글 페이지 애플리케이션이란 개념이 생기기 전에는 멀티 페이지 애플리케이션이 사용되었다.
MPA는 사용자 인터렉션이 많고 다양한 정보를 제공하는 애플리케이션에는 적합하지 않다. 새로운 페이지를 보여줘야 할 때마다 서버 자원의 사용량과 트래픽이 증가할 수 있기 때문이다.
SPA (Single Page Application)
싱글 페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션을 말한다. 웹 애플리케이션을 브라우저에 우선 실행시키고, 사용자 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트하는 방식이다. 새로운 데이터가 필요하면 서버 api를 호출하여 필요한 데이터만 새로 불러와 사용한다.
기술적으로는 한 페이지만 존재하지만 사용자 입장에서는 여러 페이지가 존재하는 것처럼 느낄 수 있다.
대표적인 프레임워크로는 React, Vue, Angular 등이 있다.
장점
- 페이지 전환 시 리로딩이 없기 때문에 빠르고 부드럽다.
- 컴포넌트 기반으로 개발하면 유지보수와 재사용이 용이하다.
단점
- 초기에 많은 js 파일을 로드해야 하므로 초기 로딩 속도가 느릴 수 있다.
- 검색 엔진 최적화가 어려우며 SSR(서버 사이드 렌더링) 등 별도의 처리가 필요하다.
MPA vs SPA
| MPA | SPA | |
| 구조 | 여러 html 페이지로 구성 | 단일 html 페이지로 구성 |
| 페이지 전환 | 서버로부터 새로운 html 요청 | js로 필요한 데이터만 불러옴 |
| 속도 | 페이지 전환 시 새로고침 발생 | 리로딩이 없어 전환 속도 빠름 |
| SEO | 유리함 | 별도의 처리 필요 |
| 초기 로딩 | 빠름 | 한 번에 많은 js를 로딩하여 상대적으로 느림 |
728x90