SPA? MPA?

1. MPA(Multiple Page Application)

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

MPA

[장점]

• SEO(검색 엔진)관점에서 유리 → 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에
• 첫 로딩 매우 짧음 → 서버에서 이미 렌더링해 가져오기 때문에

[단점]

• 매 페이지 요청마다 리로딩 발생하여 UX가 좋지 않음
• 페이지 이동시 전체 페이지를 다시 렌더링하기 때문에 불필요한 템플릿도 중복해서 로딩하여 성능이 좋지 않음
• 서버 렌더링에 따른 부하 발생
• 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하여 개발이 복잡해질 수 있음

---

2. SPA(Single Page Application)

• 한 개의 Page로 구성된 Application
• CSR(Client Side Rendering)방식으로 렌더링
• 처음 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신
• 첫 요청시 딱 한페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정하여 보여주는 방식
• 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신
• 필요한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 사용자 경험(UX)을 제공

SPA

[장점]

• 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 '깜빡'거림이 없음(UX가 좋음)
• 서버에게 정적 리소스를 한 번만 요청하고, 받은 데이터는 전부 저장해 놓기 때문에, 필요한 리소스만 부분적으로 로딩함
• 서버의 템플릿 연산을 클라이언트로 분산하여 성능이 향상
• 컴포넌트 별로 개발이 용이하여 생산성이 좋음
• 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능

[단점]

• JavaScript파일을 번들링하여 한 번에 받으므로 초기 구동 속도가 느림 → Webpack code splitting으로 해결 가능
• SEO 어려움
• 보안 문제

 

[참고]

https://velog.io/@gwanuuoo/SPA%EB%8A%94-%EA%B8%B0%EC%A1%B4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%99%80-%EC%B0%A8%EC%9D%B4

SPA와 기존 웹사이트의 차이