MPA VS SPA

MPA( Multiple Page Application )

여러 개의 Page로 구성된 Application.

link tag를 사용하는 전통적인 웹 방식. 새로운 페이지 요청 시마다 정적 리소스(HTML, CSS, JavaScript)가 다운로드되고 전체 페이지를 다시 렌더링.

https://learn.microsoft.com/en-us/archive/msdn-magazine/2013/november/asp-net-single-page-applications-build-modern-responsive-web-apps-with-asp-net

장점

• SEO에 친화적! 검색 사이트에 노출되는 것이 중요한 웹사이트라면 MPA가 좋음. → MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링하기에 적합
• 첫 로딩이 매우 짧음. → 서버에서 이미 렌더링해 가져오기 때문. 클라이언트가 JS파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작 X

단점

• 매 페이지 요청마다 새로고침 발생.
• 페이지 이동시 불필요한 부분도 중복해서 로딩. (성능 저하)
• 서버 렌더링에 따른 부하.
• 모바일 앱 개발시 추가적인 백엔드 작업 필요.

SPA( Single Page Application )

한 개의 Page로 구성된 Application.

대부분 CSR(Client Side Rendering) 방식으로 렌더링.

최초 페이지를 로딩한 시점부터 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있음.

https://learn.microsoft.com/en-us/archive/msdn-magazine/2013/november/asp-net-single-page-applications-build-modern-responsive-web-apps-with-asp-net

CSR이란?

클라이언트 사이드에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고받아서 클라이언트에서 렌더링을 진행하는 방식.

 

장점

• 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 새로고침이 필요 없음.
• 필요한 리소스만 부분적으로 로딩 가능.
• 서버의 연산을 클라이언트로 분산.
• 컴포넌트별 개발 용이.

단점

• JavaScript 파일을 번들링 해서 한 번에 받기 때문에 초기 구동 속도가 느림.
• 검색엔진최적화(SEO)가 어려움. → Server Side Rendering으로 해결 가능.