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

MPA의 장점

SEO(Search Engine Optimization, 검색엔진 최적화) 관점에서 유리하다

- MPA는 서버로부터 완성된 형태의 html파일을 가져오기때문에

검색엔진이 페이지를 크롤링하기에 유리하다.

첫 로딩이 짧다

- 서버에서 이미 렌더링을 해서 가져오기 때문이다.

MPA의 단점

  • 매번 깜빡임이있다(UX)
    - 서버에서 매번 새로운 정적리소스를 불러오기 때문이다.
  • 클라이언트가 js를 모두 다운로드하고 적용하기 전까지 각각의 기능은 동작하지 않는다(UX)
  • 페이지 이동 시 불필요한 템플릿도 중복해서 다운받는다(성능)
  • 서버 렌더링에 따른 부하
  • 모바일 앱을 개발할 때 추가적으로 백엔드 작업을 해주어야한다. 개발이 복잡해질 수 있음(생산성)

SPA

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/