MPA란

Multiple Page Application의 약자로 여러개 페이지로 구성된 Application이다. 웹페이지를 구현하는 전통적인 기법이다.

MPA작동방식

• 서버로부터 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML,CSS,JavaScript)가 다운로드 된다.

• 페이지에서 어딘가로 이동하거나 새로고침하면 페이지 전체영역을 렌더링한다.

• MPA는 SSR(Server Side Application) 방식으로 렌더링한다.

MPA장점

• SEO 친화적 : (Search Engine Optimization / 검색 엔진 최적화) 에 많은 키워드가 타겟팅이 되는데 MPA는 여러 페이지를 생성할수 있기 때문에 Google에서 얻을 수 있는 유기저 트래픽의 양이 자동으로 향상된다. 더 많은 페이지로 인해 여러 HTML파일이 존재하는데, HTML 다운로드하여 페이지를 크롤링하기 때문에 검색 엔진이 작동하는 방식에 더 적합하다.

• 확장성 : 다중 페이지로 원하는 만큼 페이지를 추가할 수 있다.

MPA단점

• 페이지 이동 시 느린 속도 : 사용자가 새로운 페이지를 이동하면 전체 페이지를 다시 렌더링하기 때문이다. HTML,CSS,JS와 같은 리소스틀이 새로 고쳐져서 속도에 영향을 받는다.

• 복잡한 개발과 오래걸리는 유지보수 : 어떠한 프레임워크나 라이브러리를 사용하지 않는다면 개발 코드의 가독성이 떨어지며 개발 시간이 오래 걸린다. 또한 관리해야하는 페이지가 많기 때문에 변경이나 수정사항이 있다면 페이지를 찾는데 시간이 오래걸린다.

SPA란

Single Page Application의 약자로 1개의 페이지로 구성된 Application이다. MPA와는 차별화되어 새로운 기술이 들어간 웹페이지 구현 방식이다.

SPA작동방식

• 서버로부터 매번 새로운 페이지를 받지 않고 머물고 있는 페이지에서 일부 영역만 랜더링이 이루워진다. 새로운 페이지 요청시, 페이지 갱신에 필요한 영역(데이터)만 json으로 전달받아 페이지를 갱신한다

• SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.

MPA장점

• 속도 및 응답시간 : 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할수 있다.

• 모바일 최적화 : 모바일 앱도 SPA와 동일한 아키텍처에서 개발이 이루워진다.

• 개발 시간 단축 : 1개의 페이지에서만 부분 랜더링을 해야 하다보니 페이지별 코드를 작성해야할 필요가 없고, 재사용성이 뛰어나 짧은 시간안에 개발을 진행할수 있다.

-로컬 스토리지 캐시 : SPA는 모든 로컬 스토리지를 효과적으로 캐시할 수 있다. 애플리케이션은 하나의 요청만 보내고 모든 데이터를 저장한 다음 이 데이터를 사용할 수 있으며 오프라인에서도 작동한다.

MPA단점

• 초기 구동시 느린 속도 : SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.

• SEO 이슈 : SPA는 JavaScript로 구축된다. 자바스크립트를 읽지 못하는 검색엔진에 대해서 크롤링이 되지않아 색인이 되지 않는 문제가 발생할 수 있다.

• 보안 문제 : XSS(교차 사이트 스크립팅)로 인해 공격자가 다른 사용자가 웹 응용 프로그램에 클라이언트 측 스크립트를 삽입할 수 있는 위험이 있다.

(2024.09.27 TIL)