React
SPA와 MPA
삐옹
2022. 5. 23. 20:24
두 개의 다른 애플리케이션 개발 방식인 SPA와 MPA의 차이점에 대해 정리했다.
SPA vs MPA
- MPA(Multiple Page Apllication)는 화면이 여러 개(Multiple)로 이루어진 페이지입니다.
SPA(Single Page Application)는 화면이 하나(Single)로 이루어진 페이지입니다. - MPA는 새로운 페이지를 요청할 때마다(버튼을 누르거나 입력을 할 때) 매번 페이지 로딩이 이루어집니다
반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스(html,css,js)를 최초 렌더링 때 다운 받습니다. 그 이후로 새로운 페이지를 요청이 있을 때, 페이지 갱신에 필요한 데이터만 서버로 부터 받아옵니다. - 그렇기 때문에 MPA를 SSR(Server Side Rendering)방식으로 렌더링한다고 말합니다. => 서버 측에서 렌더링해서 준다
그렇기 때문에 SPA를 CSR(Client Side Rendering)방식으로 렌더링한다고 말한다 => 클라 측에서 렌더링한다
MPA의 장점
SEO(Search Engine Optimization, 검색엔진 최적화) 관점에서 유리하다
- MPA는 서버로부터 완성된 형태의 html파일을 가져오기때문에
검색엔진이 페이지를 크롤링하기에 유리하다.
첫 로딩이 짧다
- 서버에서 이미 렌더링을 해서 가져오기 때문이다.
MPA의 단점
- 매번 깜빡임이있다(UX)
- 서버에서 매번 새로운 정적리소스를 불러오기 때문이다. - 클라이언트가 js를 모두 다운로드하고 적용하기 전까지 각각의 기능은 동작하지 않는다(UX)
- 페이지 이동 시 불필요한 템플릿도 중복해서 다운받는다(성능)
- 서버 렌더링에 따른 부하
- 모바일 앱을 개발할 때 추가적으로 백엔드 작업을 해주어야한다. 개발이 복잡해질 수 있음(생산성)
SPA의 장점
- 필요한 부분만 갱신하기 때문에 네이티브앱에 가까운 UX를 제공할 수 있다.(UX) => 웹에서 핸드폰 앱쓰는 것처럼
- 필요한 리소스만 부분적으로 로딩(성능)
- SPA의 application은 서버에게 최초 한번만 정적리소스를 요청한다. 요청하여 받아온 뒤엔 클라이언트의 브라우저 캐시에 저장해 놓는다. - 서버의 템플릿 연산을 클라이언트로 분산(성능)
- 컴포넌트별로 개발이 용이(성능)
- 모바일 앱을 개발을 염두에 둔다면 동일한 API를 사용하도록 설계가 가능(생산성)
SPA의 단점
- Javascript 파일을 *번들링해서 한 번에 받기 때문에 초기 렌더링 속도가 느리다.
- 보안 이슈(프론트엔드에 **비즈니스 로직 최소화)
- SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 하지만, CSR방식에서는 클라이언트 측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다. SSR보다 사용자 정보가 노출되어 있음.
*번들링(Bundling)
: "어떤 것들을 묶는다."라는 뜻이다. 따로따로 분리되어있는 파일이나 모듈들을 묶는것입니다.
번들링이 필요한 이유는
따로따로 분리된 파일들을 브라우저에서 로딩하면 네트워크가 그만큼 소모되어 속도가 저하될 수 있고,
모듈 간의 변수 충돌 등의 위험성이 존재하기 때문입니다.
대표적인 번들링 도구는 webpack입니다.
**비즈니스 로직(Businese Logic)
: 데이터 가공을 담당하는 코드. model영역이라고도 불립니다.
ex) 회원가입 창에서 아이디 중복 찾기 // 비즈니스 로직 : 회원의 아이디 값 저장하기 -> 회원정보가 있는 db연결 ..
- SEO가 어렵다.(SSR로 해결 가능)
-검색봇에게는 SPA로 개발된 페이지는 아래의 코드처럼 보이게 됩니다.SEO검색이 어려운 이유는 이렇게되면 검색엔진이 사용자의 검색에 도움을 줄 선별할만한 콘텐츠가 없기 때문입니다.
<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>
⁉️주의점
SPA방식이 모두 CSR인 것은 아니다
정리
SPA,MPA의 차이
새로운 페이지 요청 시 서버로 부터 받는 것(정적리소스 전체vs 데이터)
초기 렌더링 속도
SEO 유/불리
리로드 여부
보안
모바일앱 개발 시 생산성
참고자료:
https://hanamon.kr/spa-mpa-ssr-csr-%ec%9e%a5%eb%8b%a8%ec%a0%90-%eb%9c%bb%ec%a0%95%eb%a6%ac/