SG의 개발 공부로그

SPA (Single Page Application) 와 MPA (Multi Page Application) 차이점 본문

JavaScript

SPA (Single Page Application) 와 MPA (Multi Page Application) 차이점

DebeloperSG 2023. 1. 9. 16:36
728x90

React  를 접하면서 듣게 된 SPA 와 MPA  에 대해서 간략하게 알아볼거다.

격투기 UFC 와 MMA 도 아니고 개발쪽은 줄여쓰는거 겁나 좋아한다.

 

아무튼

MPA (Multi Page Application)

MPA 는 흔히 쓰였던 웹 애플리케이션 개발방식이다. (JSP, PHP 등) 

웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면

서버는 데이터를 HTML 문서로 웹 브라우저에 응답해준다.

 

그 과정속에서 화면이 깜빡거린다.

댓글하나써도 깜빡, 좋아요 누르면 깜빡, 뭐 누르면 깜빡

 

불러오는 데이터가 적어서 빠르게 페이지가 나오면 좋겠지만,

데이터가 많을 경우 사용자는 깜빡하고 로딩이되는 시간동안 기다려야한다.

 

요즘 인터넷이 워낙빨라져서 체감이 로딩속도가 많이 줄었다고해도

사람의 욕심은 끝이 없듯 이제는 1초 넘어가면 답답하게 느껴진다..

 

하지만 장점도 있다 SEO (검색엔진 최적화) 에 좋다. 

그래서 검색사이트에 노출이 중요한 사이트면 MPA가 좋다.

지금 이 사이트 (티스토리)도 MPA 인것 처럼말이다.

 

SPA 는 (Single Page Application) 

MPA 의 단점을 개선해주기 위해 나온 것이 SPA 이다.

SPA 는 (Single Page Application)  말그대로 한개 (Single) Page 로 구성 된 Application 이다.

HTML파일 하나가지고 페이지를 구현한다. 나머지 script 로 동적으로 구현한다.

그래서 최초 실행 시 단 한번만 리소스를 로딩하고, 이후에는 변경되는 데이터부분만 변경 될 수 있게 한다.

고로 렌더링이 최적화되고 새로고침도 깜빡거림도 필요없게되서 사용자경험 UX 를 제공 할 수 있따.

 

React, Vue, Angular 등 프레임워크 기술들이 나오면서 유행하고있으며,

그 중  React 가 점유율이 가장 높다.

 

컴포넌트화 작업으로 개발할때나 수정할떄도 용이하다.

 

하지만,

최초 실행 시 모든 정적 자원들은 모두 가져오기때문에 렌더링속도가 느리고,

SEO (검색엔진최적화) 가 좋지 않다.

왜냐면 하단 처럼 하나의 HTML 파일 안에는 검색용어 추출할만한 컨첸트내용이 없기 때문이다.

<html>
<head>
  <title>Single Page Application</title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>
728x90
저작자표시 변경금지

'JavaScript' 카테고리의 다른 글

Ajax와 Fetch와 Axios 차이점 비교해보기  (0) 2023.01.11
SSR (Server Side Rendering) 과 CSR (Client Side Rendering) 의 차이점  (0) 2023.01.09
for in 과 for of 반복문 차이점  (2) 2023.01.06
var, let, const 차이점  (0) 2023.01.04
웹팩(webpack) 이란 무엇인가?  (2) 2022.12.18
'JavaScript' Related Articles more