Javascript: MPA, SPA

 

MPA(Multiple Page Application)

- 2개 이상의 HTML으로 구성되어 있다.

- 페이지 이동/새로고침/변경시 정적 리소스 (HTML, CSS, JS)를 다운받아 교체한다.

- 서버에서 만들어서 보내기 때문에 SSR(Server Side Rendering이라고 한다.

- 서버에서 만들어지기 때문에 JS가 가동되지 않는 상황에서도 사용할 수 있다.

 

장점

- SEO에 유리하다.

 

단점

- 페이지 이동 시 깜빡거림이 발생한다.

- 변화가 없는 부분도 랜더링된다.

- 느리다.

- 서버의 부하가 발생할 수 있다.

 

SPA(Single Page Application)

- 1개의 HTML으로 구성되어 있다.

- 페이지 이동/새로고침/변경시 json 파일을 다운받은 것을 클라이언트 쪽에서 JS로 바꾸어 적용한다.

- 클라이언트 쪽에서 변경을 적용하기 때문에 SSR(Client Side Rendering)이라고 한다.

 

장점

- 페이지 이동 시 깜빡거림이 없다.

- 변화가 필요한 부분만 바꾼다.

- 서버의 부하를 낮춘다.

 

단점

- 초기 로딩이 오래걸린다.

- SEO 최적화가 어렵다. 페이지의 조정이 모두 JS에서 이루어져 HTML에는 포함하는 요소들이 보이지 않기 때문이다.

 

* SPA를 사용한 React 등이 널리 사용되고 있다.

* MPA는 Next.js를 활용해 SSR, CSR 등을 혼합하여 활용할 수 있다.