SPA란?

출처 : Single Page Application vs Multi Page Applications: Choose The Best For Your Need

 

저번에 Y언니가 알려준 SPA에 대해서, 그리고 그 단점인 SEO에 대해서 자세히 알아보려고 한다.

(그 외에도 스터디 때 알게된 사항에 대해서 본인의 글로 옮겨보는 시간을 ... 틈틈이 가지려고 한다! 사실 너무 많아서 다 할지는 모르겠다)

그리고 찾다보니 알게된 이와 대조되는 MPA의 개념에 대해 간략히 설명해보고 어떠한 차이가 있는지도 알아보자!

 

SPA란?

Single Page Application. 단일 페이지로 구성된 웹 어플리케이션으로 주로 CSR를 사용한다. (SPA라고 해서 무조건 CSR이 아니다!)

페이지에 처음 진입 시 모든 데이터를 다운로드한다. 페이지의 리소스를 클릭하더라도 모든 것을 다시 로드하지 않는다.

전통적인 방식에서의 SPA는 서버 사이드 렌더링이 아닌 클라이언트 사이드 렌더링이기에 서버에서 미리 렌더링된 html 파일을 주고 받지 않고 필요한 데이터(JSON, HTML, CSS)만 서버에서 전달받는다. 간단히 말해서 서버와 통신을 할 때 모든 페이지의 내용(완전히 새로운 페이지)을 받아오는 것이 아닌 일부 필요한 리소스만 주고 받으며 동적으로 페이지를 불러오는 형태이다.

실제로 우리가 알고 있는 협업 어플리케이션 Trello나 Facebook, Twitter도 SPA로 구축된 페이지이다.

 

MPA란?

Multi Page Application. 여러 페이지로 구성된 웹 어플리케이션으로 주로 SSR을 사용한다.

페이지의 다른 링크를 클릭할 때마다 페이지를 로드한다. MPA는 클릭 하면 다른 페이지로 연결되는 수많은 링크를 포함하고 있다.

MPA로 구성된 예시로는 아마존이나 이베이가 있다.

 

이번에 글을 정리하면서 알게된 점인데 SPA⊂CSR이 아니라는 점이다. 사실 SPA의 단점을 극복하기 위해 SSR로 개발할 수도 있다고 한다.

이에 관한 Vue.js의 프레임워크 Nuxt.js를 사용하여 SPA를 SSR로 구현하는 방법에 관한 글도 읽었다. 관련한 사항은 조금 더 조사해봐야겠지만 SPA가 CSR의 일종이라고 단언할 수는 없게된 듯 하다.

 

출처 : What Is A Single Page Application? Meaning, Pitfalls & Benefits

위의 이미지 상에서 왼쪽이 SPA, 오른쪽이 MPA라고 할 수 있다.

 

SPA의 장점

1. 속도와 응답성

페이지 전체를 렌더링 하는 것이 아니라 일부만 다시 렌더링하므로 화면 전환이 빠르다. 유저가 인터렉션 시 응답이 빠르게 느껴진다.

2. 적은 코딩

SPA의 UI 디자인은 모바일과 유사하기 때문에 따로 모바일 버전 디자인을 만들지 않아도 괜찮다.

또한 일부 백엔드 코드를 재사용 가능하다.

3. 다양한 효과 사용 및 편의성

시차 스크롤링Parallax Scroll과 같은 전환 효과를 사용 가능하다. 

필요한 부분만 응답하는 방식으로 네이티브 앱과 같은 효과를 내기때문에 사용자 친화적이다. 따라서 유저가 사용하기에 편리하다.

 

SPA의 단점

1. 첫 화면 로딩이 느리다. (페이지 처음 진입 시 모든 데이터를 다운로드하므로 진입이 느리게 느껴진다)

리소스를 *청크Chunk 단위로 묶어서 요청할 때마다 다운로드하도록 해서 로딩을 완화시킬 수 있지만 완전한 해결법은 되지 않는다.

*Chunk : 모든 HTML을 생성하여 클라이언트에 보내는 대신 브라우저에 응답의 크기를 알리지 않고 HTML을 '덩어리Chunk'로 분할하여 하나씩 전송하는 것.

2. SEO (Search Engine Optimization)

대부분의 웹 크롤러, 봇들은 JavaScript를 실행시키지 못하고 (Googlebot의 경우는 JS를 실행가능하지만 다른 검색엔진은 대부분 지원하지 않는다) HTML에서만 컨텐츠를 수집하기 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식한다.

따라서 로딩 중에 검색 엔진이 색인할 만한 컨텐츠가 존재하지 않게 되고, 문제가 발생하게 된다.

3. 보안 문제

**크로스 사이트 스크립팅 (XSS) 공격을 받을 수 있다.

**Cross-Site Scripting : 관리자 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법.

4. 브라우저 기록

사용자의 인터렉션 단계를 저장하지 않기 때문에 유저가 주소를 복사하여 다른 유저에게 준다면 원하는 depth의 페이지가 아닌 초기 단계를 보여주는 경우가 생긴다. 또한 사용자가 뒤로 버튼을 클릭하면 이전 단계가 아닌 이전 페이지로 이동한다.

해결 방법으로는 SPA를 구축한 JavaScript 프레임 워크에 HTML5 히스토리 API를 포함하여 브라우저 탐색 기록에 접근할 수 있게 만들 수 있다.

 

 

참고자료

https://echoinnovateit.com/single-page-app-vs-multi-page-app/

https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md

https://ko.wikipedia.org/wiki/싱글_페이지_애플리케이션

https://www.excellentwebworld.com/what-is-a-single-page-application/