SPA vs MPA

구분	SPA(Single Page Application)	MPA(Multiple Page Application)
Rendering	CSR(Client Side Rendering)	SSR(Server Side Rendering)
seo	👎	👍
첫 로딩	👎	👍
이후 로딩	👍	👎
서버 부담	👍	👎

⚠️ SPA가 전부 Client Side Rendering 하는것은 아님 (Next.js)

SPA(Single Page Application)

첫 렌더링 시, 모든 정적파일을 서버에서 받아오기 때문에 필요한 부분만 비동기로 받아옴
SPA 프레임워크 : React, Vue, Angular...

장점

1. 빠른 로딩 속도, 반응성
   → 첫 렌더링 이후, 필요한 부분만 비동기 요청을 하기 때문에 UX친화적이다.

2. 프론트와 백의 명확한 구분
   → 각자 개발에 있어서도 각자 동시에 빠르게 작업을 처리 가능하다.

3. 백 코드를 재사용
   → 백엔드 코드를 데이터만 처리할 수 있는 코드만 필요하다. 따라서 해당 코드는 얼마든지 호환 가능하다.

단점

1. 자바스크립트 의존성
   → SPA는 자바스크립트로 완성되기 때문에 장점이 될수있지만, 많은 단점을 가져올수있다.

2. 보안성
   → SPA에서 유저 정보를 저장할수있는곳은 마땅치 않다. ( SPA 보안을 위해 공부해야하는것 )

3. SEO
   → 렌더링이 완료되기 전까지는 웹에서 알수있는 정보가 없기 때문에 MPA에 비해 상당히 불리하다. ( head태그를 업데이트 해줄 수 있는 라이브러리 )

프로젝트 예시

• 모바일 기준의 서비스
• 빠른 개발이 필요한 MVP단계의 서비스
• 빠른 피드백이 필요한 소셜 서비스

---

MPA(Multiple Page Application)

페이지를 이동할때마다 서버에서 HTML파일을 보냄
전통적인 웹사이트 구현 방법

장점

1. SEO 최적화
   → 각 페이지별 키워드를 타켓팅 할 수 있다.

2. 첫 로딩이 짧다
   → 서버에서 해당 페이지만 렌더링해 가져온다.

단점

1. 페이지 이동 시 깜빡거림
   → 페이지 요청마다 리로딩 발생한다.

2. 서버 렌더링에 따른 부하
   → 서버에서 렌더링해서 가져온다.

프로젝트 예시

• 정보가 많고 복잡한 사이트
• SEO가 중요한 프로젝트

참고
https://velog.io/@yejine2
https://velog.io/@rookieand
https://velog.io/@minsu8834