MPA(Multiple Page Application)과SPA(Single Page Application)에 대해 알아보자

MPA

웹페이지 화면마다 정적파일 html로 보여주는 어플리케이션(대형 웹사이트의 경우 정적파일로만 보여주지는 않지만, SPA와 같은 기능을 구현한다 하고, 효율성 측면에서 보자면 보통 정적인 Html파일만을 운용한다는 것이 이와 같은 설명의 시선이다.)
의미로 보자면 Multiple: 여러개, Page: 페이지, Application : 컴퓨터 프로그램
여러개의 페이지로 구성된 프로그램이라고 하는데 여러개의 페이지로 링크 되어서 움직이는 대형 홈페이지들이 연상된다. 여러 기능들을 한 화면이 아니라 여러 화면에서 보여주겠다는 것이다.

MPA 장단점

검색에 용이하다. 보통 검색엔진은 웹크롤러와 같은 로봇으로 렌더링된 Html 파일의 태그와 스크립트를 통해 찾는데 MPA를 대부분 SSR(ServerSideRendering)로 많이 구현하기 때문에 각 페이지 별로 렌더링된 Html파일로 구성된 경우가 많아 그렇다.
대신 페이지가 많기 때문에 데이터를 유지시켜 다음 페이지들로 넘겨야 하는 경우 서버와 계속 변화된 데이터들을 통신하여야 하기때문에 메모리를 가지고 여러 페이지를 넘나들며 작업을 해야하는 경우 사용자에게 불편을 야기할 수 있다.

SPA

페이지를 변경하지 않고, 자바 스크립트만을 이용하여 콘텐츠만 변경하여 웹페이지를 보여주는 어플리케이션이다.
의미로 보자면 Single: 한개, Page: 페이지, Application: 컴퓨터 프로그램 한개 페이지로 구성된 프로그램이라고 메인 페이지 하나에 여러개의 기능이 구현되어있고 응용프로그램으로서 돌아가게 된다면 SPA인것이다.
AJAX(Asynchronous JavaScript And Xml: 비동기식 자바스크립트와 Xml)

SPA 장단점

한개의 페이지에 많은 내용을 담을 경우에 결국 개발자는 CSR(ClientSideRendering)방식을 더욱 많이 사용하게 된다. 그러한 상황적인 측면에서 서버가 해야 할 역할을 클라이언트가 부담하므로, 서버 부담이 경감된다는 장점이 있으며.
Client와 PC의 성능이 좋지 않으면, 렌더링되는 시간이 늘어나기때문에 사용자입장에서는 최초에 로딩시간이 길다고 체감할 수 밖에 없다.

차이점

결국 응용프로그램의 기능 관점에서 SinglePage로 기능이 구현되어있느냐, MultiPage로 구현되어있느냐의 차이이다. 극단적인 MPA에서는 화면을 전환할 때마다 데이터를 다음 화면으로 옮기는 방식이 어렵기 때문에 페이지마다의 동기화하기 어렵다는 단점이 있고, 극단적인 SPA에서는 화면이 하나밖에 없기 때문에 너무 많은 것을 담으려면 사용자에게 페이지가 로딩되는 동안에 엄청난 인내심을 요구할 수 밖에 없다는 것이다.

각각 두 웹페이지 구성 방식의 장단점을 고루 살려 원하는 프로젝트의 적용시킬 수 있는가? 그것이 핵심인 것 같다.

용어 정리

비동기식

작업의 완료 여부를 기다리지 않고 다른 작업을 실행할 수 있는 방식을 의미.

렌더링

Html, Css, JavaScript를 통해 사용자가 볼 수 있는 실제 웹사이트 화면을 만들어주는 과정이며. 웹브라우저는 완성된 렌더링된 화면을 사용자가 볼 수 있게 바꾸어주는 응용프로그램이다.

Server Side Rendering

사용자가 볼 수 있는 렌더링 된 웹사이트 화면을 서버에서 뿌려주는 방식

Client Side Rendering

사용자가 볼 수 있는 웹사이트 화면을 웹 브라우저에서 렌더링해 화면에 뿌려주는 방식