SPA vs MPA
- SPA(Single Page Application)는 한 개의 페이지로 구성된 애플리케이션이다.
- MPA(Multi Page Application)는 여러 개의 페이지로 구성된 애플리케이션이다.
SPA란?
- SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
- 이러한 접근은 연속되는 페이지 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다.
- SPA에서 HTML, JS, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다.
- 문서는 프로세스 중 어떠한 지점에서도 다시 불러들이지 않으며 다른 문서로 제어권을 넘기지 않으나, 위치 해시나 HTML5 히스토리 API를 사용하여 애플리케이션 안에서 개개의 논리 문서의 인식 및 탐색을 제공할 수 있다.
~해시란? 해시(hash)란 다양한 길이를 가진 데이터를 고정된 길이를 가진 데이터로 매핑(mapping)한 값이다. 이를 이용해 특정한 배열의 인덱스나 위치나 위치를 입력하고자 하는 데이터의 값을 이용해 저장하거나 찾을 수 있다.
~History API란? DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. history는 사용자를 자신의 방문 기록, 앞과 뒤로 보내기, 기록 스택의 콘텐츠도 조작할 수 있는 유용한 메서드와 속성을 가집니다. - SPA와의 소통은 웹 서버와의 동적인 통신을 수반하기도 한다.
SPA 장점
- 뛰어난 반응성(유연한 UI)
반응형 다자인으로 인해 모바일 앱이나 데스크탑 앱을 사용하는 느낌을 준다. 페이지상에서 무언가를 클릭 했을시 기다림 없이 즉각적인 반응이 일어난다.- 프론트와 백의 분리
백과 확실히 구분되기에 백엔드부분에 관해서 걱정할 필요가 없으며 서버 사이드 코드를 작성할 필요가 없다. 프론트엔드만으로도 웹사이트 완성할 수 있다.- 트래픽 감소
- 컴포넌트 재사용
SPA 단점
- 초기 페이지 로딩 시간
최초 로드 시 한 번에 받아오기 때문에 초기 구동 속도가 느림- SEO(Search Engine optimization, 검색 엔진 최적화)
MPA보단 SEO에 대한 노출이 어렵다. 비동기로 렌더링 되는 페이지로 인해 구글봇과 같은 크롤러가 웹페이지의 내용을 크롤링 하기가 어려워진다.- JavaScript 필수
JavaScript를 알지 못한다면 SPA를 구현할 수 없다. 자바스크립트에 관한 지식이 있어야만 SPA를 만들수 있다.
SPA 구현을 위한 프레임워크 (React, Vue, Angular)
- React
Facebook이 개발한 웹과 모바일 개발 모두에 사용될 수 프레임워크다. 국내에서 가장 점유율이 높은 프레임워크이며, 자유도가 높다. 다만, 자유도가 높고 공식문서가 빈약하기 때문에 규약과 협의가 필요하다. - Vue
가장 최근에 릴리즈된 프레임워크로서 쉽게 배울 수 있고 가볍고 빠르게 개발할 수 있다는 장점이 있다. - Angular
구글이 개발한 프레임워크로서 가장 빠르게 릴리즈되어 가장 큰 커뮤니티가 형성이 되어있으며 공식문서가 가장 잘 갖추어져 있다. 주로 작은 프로젝트보다는 큰 프로젝트에 적합한 프레임워크다.
~Angular Vs React Vs Vue: The Main Differences And Use Cases
MPA란?
- MPA는 예전의 방식대로 동작한다.
- 예를 들어, 브라우저에서 변경사항이 있을 때 서버로 submit 데이터를 전달하여 새로운 페이지 렌더링을 요청하고 그 데이터를 표시한다.
- 이러한 애플리케이션은 그 필요성 때문에 SPA 보다는 규모가 더 크다. 많은 콘텐츠로 인해, 많은 UI 레벨을 갖게 된다.
- AJAX 덕분에 크고 복잡한 애플리케이션들이 서버와 브라우저 사이에서 많은 데이터를 전송해야 하는 문제를 걱정할 필요가 없게 됐다. 애플리케이션의 특정 부분만을 리프레쉬 할 수 있도록 한 것이다.
- 하지만 더 큰 복잡성이 가중되면서 SPA보다 개발이 어려워졌다.
MPA 장점
- SEO(Search Engine optimization, 검색 엔진 최적화)에 유리
유저가 보는 화면방식이 곧 웹 크롤러(web crawler)가 보는 방식과 같다. 그로 인해 SEO에 대해 좀 더 적합하다.- 넘쳐나는 자료
초보자들이 제작하기에 좋은 환경을 갖고 있다. SPA 보다는 오랜 역사로 인해 튜토리얼, 해결법, 프레임워크등 다양한 자료들을 얻을 수 있다.
MPA 단점
- 다른 페이지 이동 시 새로고침
- 느린 속도
요청이 들어올 때마다 페이지를 새로 패치해야 하기에 페이지 로딩 시간이 발생한다. 그로인해 속도가 느려진다. 모든 페이지가 로드 될 때 까지 기다려야하기에 유저 친화적이지가 않다.- Fontend와 Backend의 연관이 밀접하다(연결성)
프론트와 백이 확연히 분리되지 않고 서로 엮여 있다. 그로인해 서버쪽 언어와 클라이언트쪽 언어가 모두 필요하다.
SEO란?
- 검색 엔진 최적화(SEO)는 검색 엔진에서 웹 사이트 또는 웹 페이지로의 웹 사이트 트래픽의 품질과 양을 개선하는 프로세스다.
- SEO는 직접 프래픽이나 유료 트래픽이 아닌 무료 트래픽을 대상으로 한다.
- 무료 트래픽은 이미지 검색, 동영상 검색, 학술 검색, 뉴스 검색, 업종별 검색 엔진 등 다양한 종류의 검색에서 발생할 수 있다.
SPA가 SEO에 문제되는 이유
- 자바스크립트
SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식이기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되어 색인이 되지 않는 문제가 발생할 수 있다. 구글의 경우 크롤링 과정에서 Googlebot이 자바스크립트를 구동하여 읽을 수 있지만 이 또한 서버사이드에서 전혀 렌더링되지 않은 자바스크립트 덩어리를 Googlebot이 렌더링하여 크롤링하는 과정에서 많은 시간이 소요된다. - 하나의 Meta Data
Meta Data 또한 하나의 페이지라는 SPA의 본질적인 특성에서 발생하는 문제다. MPA페이지와 같이 Head부분에 메타 태그를 삽입하더라도, 해당 사이트 내의 다른 페이지로 이동하더라도 HTML은 변동되지 않기 때문에 모든 페이지 (단일 페이지이지만)에 동일한 메타 데이터를 삽입하게 되는 상황이 발생한다. - 크롤러에게는 하나의 페이지
크롤러는 기본적으로 이미 알려진 페이지를 크롤링한다. 즉, 하나의 페이지에 들어갔을 때 발견되는 URL을 대기열에 저장하고 저장된 URL을 기반으로 다시 크롤링하고 대기열에 저장하고를 반복하여 크롤링하게 된다. 그러나 SPA 방식의 웹사이트의 경우 기본적으로 사이트 내의 페이지로 향하는 href속성을 html에서 사용하지 않고 자바스크립트로 페이지 이동을 구현하기 때문에 크롤러가 사이트에 있는 모든 페이지 (하나의 페이지이지만)의 내용을 크롤링하지 못하는 경우가 발생할 수 있다.
SPA가 SEO에 대응하는 방법
- SSR (Server Side Rendering)
SSR 방식으로 SEO를 구축할 수 있다. SPA는 기본적으로 CSR(Client-Side Rendering) 방식으로 서버에서 HTML, JS 등 모든 재료를 다운 받은 후 클라이언트 단에서 렌더링을 하는 방식을 취하지만, SSR 방식으로 사이트를 구축한다면 크롤링에 더 친화적으로 개발할 수 있다. 대표적인 SSR 프레임워크로는 React의 Next.js, Vue의 Nuxt, Angular의 Angular Universal이 있다.
[Next.js 동작과정]
- 초기화면 수행 (SSR 방식 이용)
1) 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청한다.(Server-Side)
2) 서버에서는 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달한다.(Pre-Rendering - init Load)
~Initial Load : JS 동작이 없는 HTML을 먼저 화면에 보여주는것을 의미
3) 이 과정에서 동시에 클라이언트에서는 스크립트 파일을 수행하여서 클라이언트에게 전달합니다.(Hydration)
~Hydration : Initial Load 이후 JS 파일을 HTML에 연결하는 과정을 의미- 페이지 이동 / 동작이 발생하는 경우(CSR 방식 이용)
1) 페이지 이동 및 동작이 발생하는 경우에는 CSR 방식을 통해서 서버를 거치지 않고 브라우저에서 페이지를 이동한다.
- 동적 렌더링 (Dynamic Rendering)
만약 사이트가 이미 SPA의 CSR 방식으로 구현되어있거나, SSR을 사용하지 못한다면, 동적 렌더링 (Dynamic Rendering)을 통해 SEO할 수 있다.
동적 렌더링은 서버에서 요청하는 자가 사람인지 크롤러인지 판단하여 사람에게는 HTML과 js 등을 제공하고 크롤러에게는 사전에 렌더링된 HTML 버전의 페이지를 보여주는 방식이다. 즉, 크롤러는 서버에서 이미 렌더링된 HTML 버전의 소스를 손쉽게 읽을 수 있게 된다.
동적 렌더링을 하는 방법으로는 react-helmet, prerender-spa-plugin, prerender.io, puppeteer, rendertron 등이 있다.
[react-helmet 작동원리]
- 컴포넌트를 만들어서 각 페이지 별로 다른 meta tag를 보여줄 수 있다.
1) url 경로를 따라서 page request
2) page에 맞는 resource fetching
3) HTML 파일 불러옴
4) react-helmet이 담겨있는 js 파일 작동
- History API
History API는 SPA방식의 웹사이트에서 주소가 바뀌지 않는 문제를 해결하기 위해 싱글페이지이지만 주소를 부여하는 기능의 API다.
과거 SPA환경에서 #또는 #!을 통해 주소를 구분하였지만 현재는 History API와 pushState() 방법을 통해 특수문자로 된 주소가 아닌 정적인 URL과 같은 주소를 설정할 수 있게 됐다. SEO의 관점에서 이는 크롤링뿐만 아니라 백링크를 얻기 용이하게 되었다고 볼 수 있다.
~백링크란?
참조:
[기타] SPA vs MPA
Search engine optimization
SPA의 SEO, 어떻게 해야할까?
Next.js
[React] React-helmet과 그 한계. (next로 migrate하려는 이유)
