SPA와 MPA는 페이지를 이동할 때 문서를 어떻게 다루는지에 따른 구분입니다. CSR과 SSR처럼 렌더링 위치를 나누는 개념과는 구별해서 볼 필요가 있습니다.
SPA: 같은 문서 안에서 화면 전환하기
SPA(Single Page Application)는 하나의 웹 문서를 불러온 뒤 JavaScript로 내용을 갱신합니다. 화면을 이동할 때마다 문서 전체를 새로 받지 않고, 필요한 데이터와 화면을 바꾸는 방식입니다. MDN의 SPA 설명
앱이 유지되는 동안 화면 상태를 이어서 사용할 수 있지만, 라우팅과 상태를 어떻게 관리할지는 별도로 정해야 합니다.
MPA: 페이지마다 새 문서 불러오기
MPA(Multi Page Application)는 다른 페이지로 이동할 때 새 HTML 문서를 불러옵니다. SPA의 문서 내부 전환과 달리 문서 사이를 이동하는 방식입니다. MDN의 문서 내부·문서 간 전환 설명
이때 HTML은 요청할 때 서버에서 만들 수도 있고, 미리 만들어 둔 정적 파일일 수도 있습니다. 따라서 MPA를 곧바로 요청마다 HTML을 생성하는 SSR과 같은 뜻으로 볼 수는 없습니다.
렌더링 방식은 따로 선택하기
SPA처럼 화면을 전환하면서 첫 화면은 서버에서 렌더링할 수도 있습니다. Next.js 역시 페이지에 따라 SSR, 정적 생성, 클라이언트 렌더링을 함께 사용할 수 있습니다. Next.js 렌더링 문서
SPA는 무조건 CSR이고 MPA는 무조건 SSR이라고 나누기보다, 첫 HTML을 어떻게 만들고 이후 화면을 어떻게 이동하는지 따로 살펴보는 편이 정확합니다.
속도와 SEO를 비교할 때
SPA는 문서 전체를 다시 받지 않고 화면을 전환할 수 있지만, 필요한 JavaScript와 데이터를 기다려야 할 수 있습니다. MPA도 페이지 응답 시간과 캐시 상태에 따라 빠르게 표시될 수 있습니다. 구조 이름만으로 어느 쪽이 항상 빠르다고 정할 수는 없습니다.
검색엔진이 초기 HTML에서 콘텐츠를 읽을 수 있는지, JavaScript 실행이 필요한지도 함께 봐야 합니다. 클라이언트에서만 콘텐츠를 만드는 경우에는 JavaScript를 실행하지 않는 크롤러가 내용을 읽지 못할 수 있습니다. Next.js의 CSR 주의 사항
서버 부하 역시 HTML 렌더링뿐 아니라 API 요청과 캐시 정책의 영향을 받습니다. 화면 전환 방식과 렌더링 위치, 실제 요청 비용을 나누어 비교해야 합니다. web.dev의 렌더링 방식 비교