SPA(Single Page Application) VS MPA(Multiple Page Application)

SPA와 MPA를 알아보기전에 정적 사이트와 동적 사이트의 차이를 알아보자!

 

static website(정적 웹) vs Dynamic website(동적 웹)

정적 웹

  서버에 저장된 html파일이 그대로 브라우저에 보이는 것을 말한다. 개츠비가 가장 대표적인 정적 페이지라고 할 수 있다.

HTML안에 모든 데이터가 들어 있는 사이트

동적 웹

  정적인 웹사이트의 반대말로 동적인 웹사이트를 말한다. 서버에 저장된 html파일이 그대로 브라우저에 그려지는 것이 아닌 동적으로 html파일이 만들어 지는 것!

 

SPA vs MPA?

SPA(Single Page Application)

• 한 개(Single)의 Page로 구성된 Application이다.
• SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
• 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다.
• 그 후에는 데이터를 받아올 때만 서버와 통신한다.
• 즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다.
• 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
• 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
• React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.

MPA(Multiple Page Application)

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

 

react나 vue는 router로 여러 패이지를 만들수 있는데 어떻게 하나에 page인가요?

맞다 분명 react와 vue에있는 router를 이용하면 여러 패이지를 만들수있다!

그렇다면 패이지 개수를 나누는 기준은 무엇일까?

일단 react로 만든 프로젝트의 html 파일의 개수를 파악해보자!

cra(create-react-app)로 만들었다면 public에 index.html만이 존재할것이다. (build하면 생기지만 랜더링에 영향은 없으니 재외하자)

 

그렇다 하나에 패이지의 기준은 html파일의 개수 정확히는 DOM의 개수를 의미한다.

 

 

react와 vue는 어떻게 하나에 page로 많은 양에 패이지를 구현할수 있나요?

 

 

그런데 이거 SSR과 CSR 설명 아닌가요? ^^;;

맞습니다.

SPA는 CSR 방식으로 랜더링합니다. (그러나 모는 spa가 csr인것은 아니다!)

MPA는 SSR방식으로 랜더링한다고 한다.