SPA

• SPA(Single Page Application)는 한 개의 페이지로 구성된 Application이다.
• 모든 정적 리소스를 최초 한번에 다운로드 후, 새로운 페이지 요청이 있을 때 필요한 데이터만 받아 갱신한다.
• CSR(Client Side Rendering) 방식이 적합하나, 모든 SPA 방식에서 CSR 방식을 사용하는 건 아니다.

SPA의 장점

• 반응형 디자인으로, 페이지와 사용자의 상호작용이 기다림 없이 즉각적으로 일어난다.
• 최초 한번, 서버에게 정적 리소스를 요청 후 캐시로 저장해두기 때문에 필요한 부분만 동적으로 바뀐다.
• 컴포넌트별 개발이 용이하고, 재사용이 쉽다.
• 프론트와 백엔드가 확실히 구분된다.

SPA의 단점

• 최초 한번 요청 시 데이터를 다 받아오기에 초기 페이지 로딩시간이 길다.
• SEO가 MPA와 비교했을 때 어렵다. 비동기로 로딩하기에 크롤러가 가져가기 쉽지 않다.
  --> SSR, Next.js로 해결이 가능하다.
• CSR 방식으로 작업할 경우 쿠키에 저장해야해서 보안이 취약하다.

---

MPA

• MPA(Multiple Page Application)는 여러 개의 페이지로 구성된 Application이다.
• 새로운 페이지를 요청할 때마다 정적 리소스를 다운로드한다. 따라서 매번 전체 페이지가 리렌더링 된다.
• SSR(Server Side Rendering) 방식을 사용한다.

MPA의 장점

• SEO 관점에서 유리하다.
• 서버에서 미리 렌더링 후에 가져오기에 첫 로딩이 짧다.
• 고전적인 방식이기에 관련 자료가 많다. (오류 해결, 프레임워크, 개발 자료 등이 풍부하다.)

MPA의 단점

• 페이지 이동(=요청) 시 정적 리소스(js, html, css)를 매번 다운로드 하기 때문에 새로고침이 되어 불편할 수 있다.
• 위와 같은 이유로 매번 페이지를 새로 패치하기 때문에 페이지 로딩 시간 자체가 길다. 변화가 없는 부분도 포함해서 리렌더링 하기 때문에 속도가 느려지고, 모든 페이지가 로드될 때까지 기다려야 해서 불편함이 야기될 수 있다. (js파일이 모두 다운로드 되고 적용되기 전까지 기능이 동작하지 않는다.)
• 프론트와 백엔드의 구분이 확연하지 않다.

---

두 방식의 차이점은 초기 로딩 속도 / 페이지 로딩 방식 / 페이지 로딩 속도 / 렌더링 방식 / SEO 정도로 정리할 수 있을 것 같다. 각각의 차이점을 비교해 개발하려는 사이트의 목적에 맞는 방식을 사용해야겠다. 두 방식은 웹 어플리케이션을 구성하는 방식이므로 MPA, SPA와 렌더링 방식인 SSR, CSR과 구분하자.

참고 사이트

SPA 방식과 MPA 방식은 무엇인가요?
CSR과 SSR의 차이점