SPA (Single Page Application)
한 개의 페이지로 구성된 어플리케이션이다.
웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.
그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.
어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라, 필요한 정보만 받아서 그 정보를 기준으로 업데이트된다.
SPA는 클라이언트가 서버에게 Initial Request를 하면 HTML을 받는다.
추가적인 요청은 AJAX를 통해 JSON 데이터를 받아서 업데이트한다.
- 장점
-
자연스러운 사용자 경험(UX)
-
필요한 리소스만 부분적으로 로딩(성능)
-
서버의 탬플릿 연산을 클라이언트로 분산(성능)
-
컴포넌트별 개발 용이(생산성)
- 단점
-
초기에 웹 어플리케이션에 필요한 모든 정적 리소스 파일을 한번에 다 받으므로 초기 구동속도가 느리다.
-
SEO(검색엔진 최적화)에 불리하다.
MPA (Multi Page Application)
여러 개의 페이지로 구성된 어플리케이션이다.
새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링한다.
인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다.
MPA는 클라이언트가 서버에게 Initial Request를 하면 HTML을 받는다.
'page reload'를 요청하면(post 방식으로), 다시 HTML을 받는다.
- 장점
- SEO(검색 엔진 최적화)에 유리하다.
- 단점
-
새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문에 새로운 페이지로 이동하면 화면이 깜빡인다.
-
프론트엔드와 백엔드가 밀접하게 연관되어있어서 개발이 복잡해질 수 있다.
상황에 따라 SPA, MPA를 적절하게 선택하여 사용하는 것이 중요하다!
