MPA(Multiple Page Application)

• 여러 개(Single)의 Page로 구성된 Application이다.

• MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다.

• 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.

• 따라서 매번 전체 페이지가 다시 렌더링 되고, 페이지 이동하거나 새로고침해도 전체 페이지를 다시 렌더링한다. SPA(Single Page Application)

• 주로 MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.

• JSX 문법을 사용하는 Next.js가 대표적이다.

MPA 장점

1. SEO(Search Engine Optimization) 관점에서 유리하다.

   • MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.
     따라서 검색엔진이 페이지를 크롤링하기에 적합하다.

2. 첫 로딩 매우 짧다.

   • 서버에서 이미 렌더링해 가져오기 때문이다.
   • 그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다.

MPA 단점

1. 새로운 페이지를 이동하면 ‘깜빡’인다.(UX가 좋지 않다.)

   • 매 페이지 요청마다 리로딩(새로고침) 발생한다.
   • 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.

2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩한다.(성능에 좋지 않다.)

3. 서버 렌더링에 따른 부하가 작용한다,

4. 모바일 앱 개발시 추가적인 백엔드 작업 필요하고 개발이 복잡해질 수 있다.(생산성이 좋지 않다.)