SPA 방식과 MPA 방식은 무엇인가요?

SPA 방식과 MPA 방식은 무엇인가요?

---

SPA(Single Page Application)	MPA(Multiple Page Application)
모든 정적 리소스를 최초 한번에 다운로드 --> 새로운 페이지 요청이 있을 때 필요 데이터만 받아 갱신	새로운 페이지를 요청할 때마다 정적 리소스 다운로드 --> 매번 전체 페이지가 리렌더링됨
CSR(Client Side Rendering)방식 (SPA라고 무조건 CSR은 X)	SSR(Server Side Rendering)

---

MPA ( Multiple Page Application)

• 여러개(Multiple)의 Page로 구성된 Application이다.
• MPA는 SSR(Server Side Application)방식으로 렌더링한다.
  새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적리소스가(HTML, CSS, JS)가 다운로드된다.
  페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

👍 MPA 장점

1. SEO 관점에서 유리하다.

• 유저가 보는 화면 방식이 웹 크롤러가 보는 방식과 같아 SEO에 좀 더 적합하다.

2. 첫 로딩이 매우 짧다.

• 서버에서 미리 렌더링을 하고 가져오기 때문에 첫 로딩이 매우 짧다.

3. 자료가 많다.

• SPA보다는 오랜 역사를 가지고 있어서 해결법, 프레임워크 등 다양한 자료를 얻을 수 있다.

 

👎 MPA 단점

1. 페이지 이동시 새로고침

• 매 페이지 요청마다 전체 페이지를 다시 렌더링 하기 때문에 사용자의 불편함이 야기될 수 있다.

2. 느린 속도

• 요청이 들어올 때마다 페이지를 새로 패치해야 하기 때문에 페이지 로딩 시간이 발생한다.
  (페이지 이동시 불필요한 템플릿도 중복해서 로딩함)
  그로인해 속도도 느려지고, 모든 페이지가 로드 될 때까지 기다려야하여 사용자 친화적이지 않다.
  (클라이언트가 JS파일을 모두 다운로드하고 적용하기 전 까지 각 기능은 동작하지 않음)

3. FE, BE 두개의 언어가 모두 필요하다.

• 프론트와 백의 구분이 확연하지 않아 서버쪽, 클라이언트쪽 언어 모두 필요하다.

---

SPA(Single Page Application)

• SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹사이트를 의미한다.
• 한개(Single)의 Page로 구성된 Application이다.
• SPA는 보통 CSR(Client Side Rendering)방식으로 렌더링한다.
  (SPA방식이 모두 CSR은 아니다.)

 

👍 SPA 장점

1) 자연스러운 사용자 경험 (뛰어난 반응성)

• 반응형 디자인으로 페이지상의 무언가를 클릭했을 시 기다림 없이 즉각적인 반응이 나타난다.

2) 필요한 리소스만 부분적으로 로딩

• SPA의 Application은 서버에게 정적 리소스를 최초 한번만 요청한다. 받은 데이터는 캐시로 전부 저장한다.

3) 컴포넌트별 개발에 용이하고, 재사용이 가능하다.

4) FE와 BE가 확실히 구분되어 백엔드부분에 걱정할 필요가 없다.

 

👎 SPA 단점

1) 초기 페이지 로딩시간이 길다

• 최초 로딩시 한번에 받아오기 때문에 초기 페이지 로딩시간이 길다.
  (Webpack의 code splittion으로 해결가능)

2) 검색엔진최적화(SEO)가 어렵다.

• MPA보단 SEO에 대한 노출이 어렵다. 비동기로 렌더링되는 페이지이기 때문에 크롤러가 크롤링하기 어렵다.
  (SSR, Next.js로 해결 가능)

3) 보안 취약

• SSR에서는 서버에서 세션으로 관리핮지만, CSR방식에서는 쿠키에 저장해야하여 보안이 취약하다.
  (SSR로 해결 가능)

 

SPA vs MPA와 SSR vs CSR 장단점 뜻정리 - 하나몬

 

[기타] SPA vs MPA