짧은 요약
- SPA는 하나의 페이지로 이루어진 웹이고 MPA는 여러 페이지로 이루어진 웹이다.
- 초기 로딩은 MPA가 빠르고 그 후의 페이지 전환은 SPA가 빠르다.
- SEO에는 'SSR 방식으로 동작하는' MPA가 더 유리하다.
SPA의 등장 배경 - MPA
전통적으로 웹 브라우저는 서버를 호출할 때마다 새 HTML 페이지를 응답받습니다. 즉 페이지가 여러개라는 뜻이죠. 페이지가 여러개니까 여러 HTML 파일이 있고 새로운 페이지를 서버에 요청(request)할 때마다 정적 리소스가 다운로드 되고(response), 그에 맞춰 다시 전체 페이지를 렌더링하는 방식입니다.
이러한 전통적인 방식은 여러 개의(Multiple) 페이지로(Page) 이루어진 웹앱(Application)이라고 해서 MPA (Multiple Page Application)방식이라고 불렸습니다.
정적 리소스란 무엇인가요?
정적 리소스는 서버 컴퓨터 내에 저장되어 있는 HTML, CSS, JavaScript, 이미지, 영상 등을 말합니다. 클라이언트와 서버간 상호작용을 통해 정보 및 자료가 생성되는 게 아니라, 단순히
서버에 존재하는 파일이기 때문에 ‘정적' 리소스라는 용어를 사용합니다.
MPA의 단점
근데 페이지가 바뀔 때마다 매번 완전한 페이지를 응답받아야 해서 필요한 부분만 응답받는 방식에 비해 효율이 떨어집니다. 페이지 이동 시 불필요한 로딩을 다시 하기 때문에 서버 렌더링에 따른 부하가 존재하는 것이죠. 즉 성능상에 문제가 있는 것입니다.
마찬가지로 전체 페이지를 다시 로딩하니까 다른 페이지로 넘어가거나 새로고침을 하면 화면이 깜빡입니다. 이는 곧 안 좋은 사용자 경험을 초래하게 됩니다.
페이지 규모가 작으면 괜찮지만, 데스크탑 브라우저에 비해 성능이 떨어지는 모바일 기기가 새롭게 등장하면서 이런 MPA 방식은 모바일 환경에서 큰 부담을 주게 됩니다.
SPA의 등장
MPA의 성능상의 문제와 나쁜 사용자 경험을 개선하기 위해 SPA라는 새로운 방식이 등장합니다. 단일(Single) HTML 페이지(Page)를 로드하고 사용자가 앱과 상호 작용할 때 해당 페이지를 동적으로 업데이트하는 웹앱(Application)을 뜻한다고 해서 SPA (Single Page Application)방식이라고 불립니다.
SPA는 AJAX 및 HTML5를 사용하여 지속적인 페이지 새로고침 없이 유연하고 반응이 빠른 웹앱을 만들 수 있습니다.
SPA에서 처음 페이지가 로드된 후, 서버와의 모든 상호 작용은 AJAX 호출을 통해 이루어집니다. 이러한 AJAX 호출은 일반적으로 JSON 형식으로, 마크업이 아닌 데이터를 반환합니다. 앱은 페이지를 다시 로드하지 않고 페이지를 동적으로 업데이트하기 위해 ✨JSON 데이터를 사용합니다.
아래 그림은 두 접근 방식의 차이점을 보여줍니다.
SPA의 장점
SPA는 전체 페이지를 다시 로드하고 다시 렌더링하는 혼란스러운 과정이 없기 때문에 자연스러운 페이지 이동과 사용자 경험을 제공합니다. 즉 성능과 사용자 경험 (UX) 두 마리 토끼를 다 잡는 셈이죠.
SPA와 MPA 비교🧐
페이지 로드 속도
사용자가 처음 url에 접근하면 웹 페이지에 필요한 모든 정적 리소스를 한 번에 클라이언트로 받아옵니다. 하지만 바꿔 말하면 초기 페이지 로딩이 MPA 방식에 비해 오래 걸립니다.
그 다음부터는 페이지를 전환할 때 다시 서버로 요청을 보내는 것이 아닌, JS에 의해 필요한 데이터만 동적으로 받아옵니다. 즉 JS가 라우팅을 담당합니다. 따라서 초기 로딩 이후부터는 SPA방식이 MPA 방식보다 페이지 로드 속도가 빠릅니다.
라우팅은 뭔가요?
사용자가 요청한 URL에 따른 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고
페이지를 전환하는 일련의 행위를 말합니다.
SEO 관점⚙️
SPA는 페이지 전환이 빠르다는 장점이 있지만 SEO에 불리하다는 단점이 존재합니다. 구글 검색엔진은 SPA도 크롤링을 잘 하지만 국내 검색엔진의 경우 SEO가 어렵습니다. SPA는 화면을 띄우는데 JS가 사용되고 구글 검색엔진은 JS를 해석할 수 있지만 국내 검색엔진은 JS를 해석하지 못하기 때문이죠.
일반적인 SPA 앱을 검색 로봇 입장에서 보면 모든 페이지의 소스가 아래와 같습니다.
<html>
<head>
<title>Single Page Application</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>즉 로딩시점에서는 검색 엔진이 색인을 할 만한 콘텐츠가 존재하지 않는 것이죠.
반면에 'SSR 방식으로 동작하는' MPA는 애초에 완성된 형태의 HTML을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링 하기에 적합하므로 SEO에 유리합니다.
MPA == SSR, SPA == CSR이다?❌
바로 위에서 'SSR 방식으로 동작하는' MPA는 SEO에 유리하다고 언급했습니다. 'SSR 방식으로 동작하는'이 중요합니다. 그 이유는 다음과 같습니다.
흔히 MPA == SSR, SPA == CSR 이렇게 생각할 수도 있는데 그렇지 않습니다. React같은 JS 기반 프레임워크 혹은 라이브러리를 사용하면 기본적으로 하나의 HTML, CSS, JS 파일이 나오기 때문에 자연스레 SPA이면서 CSR이 되는 것이고, 이를 SSR로 구현하면 페이지 별로 렌더링을 따로 하기 때문에 MPA가 되는 것입니다.
MPA면서 같은 JS 파일을 받고 클라이언트에서 렌더링을 하게 되면 MPA + CSR이 되는 것이고 SPA면서 SSR을 택하면 SSR + SPA가 됩니다. 원리를 이해하면 이런 식으로는 궁합이 잘 맞지 않기 때문에 MPA == SSR, SPA == CSR이 마치 공식인 것 처럼 생각되기도 합니다.
따라서 CSR 방식으로 동작하는 MPA의 경우도 가능하기 때문에 MPA는 무조건 SEO에 유리하다고 해버리면 이는 틀린 말이 되는 것입니다.
Next.js와 같은 React 라이브러리의 프레임워크를 사용하면 흔히 CSR로 동작하는 SPA도 SSR 방식으로 설계가 가능하기 때문에, SEO 문제를 해결할 수 있습니다!
다음 시간에는 SSR과 CSR에 대해 알아보겠습니다~
참고자료📔
