[React] SPA(Single Page Application)

기존의 웹 방식, MPA (Multi Page Application)와 발전 과정

MPA는 link tag를 사용하는 전통적인 웹 방식이다. 

 

 과거에는 웹에서 제공되는 정보가 그렇게 많지 않았고, 많다고 해도 페이지가 나누어져 있었기 때문에 데이터를 쪼개서 보여줄 수 있었다. 하지만 요즘은 성능이 좋아지고 기술도 발전하는 등 다양한 이유로 하나의 페이지에서 보여줄 수 있는 정보가 점점 많아졌다. 게다가 서비스 사용자 또한 증가하여 서버 측에서는 사용자 각각에 대한 페이지를 만들어야 하니 과부하가 걸렸다.

 왜 과부하가 걸렸을까? MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링하는 방식을 사용한다. 따라서 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하게 된다. 서버측에서 HTML 파일을 만들어서 넘겨주기 때문에, 요청한 웹 문서에 대한 처리는 전부 서버가 담당한다. 즉, 사용자가 많아지면 많아질수록 서버에 부담이 커진다.

 

 SPA 등장 이전에, MPA의 단점들을 극복하기 위해 먼저 고안된 방식들이 있어서 간단히 알아보았다.

 

1. ajax(Asynchronous JavaScript and XML)

자바스크립트를 이용해서 비동기적(asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식. MPA의 불필요한 리소스 중복 요청을 해결하였다.

 

2. hash 방식 (과도기적 기술)

 ajax 요청은 주소창의 URL을 변경시키지 않아서 브라우저의 뒤로가기, 앞으로 가기 기능이 동작하지 않는다. 따라서 history 관리가 되지 않는 단점이 있었고 이를 보완한 방법이 URI의 fragment identifier(#service)의 고유 기능인 앵커(anchor)를 사용한 Hash 방식이다. 

 

3. pjax(pushState + ajax)

웹 크롤러는 검색 엔진이 웹사이트의 콘텐츠를 수집하기 위해 HTTP와 URL 스펙(RFC-2396같은)을 따른다. 이러한 크롤러는 JavaScript를 실행시키지 않기 때문에 hash 방식으로 만들어진 사이트의 콘텐츠를 수집할 수 없다. 이러한 hash 방식의 가장 큰 단점인 SEO 이슈를 해결하기 위해 pushState와 popstate 이벤트를 사용한 pjax 방식이 등장하였다. pushState 메서드는 주소창의 URL을 변경하고 URL을 history entry로 추가하지만 서버로 HTTP 요청을 하지는 않는다. 결과적으로 주소 창의 URL은 변경되지만 페이지는 갱신되지 않고 페이지마다 고유 URL은 가지고 있어서 history 관리에도 문제가 없다. 또한 hash를 사용하지 않으므로 SEO 이슈에서 벗어날 수 있었다.

 

 적다 보니 MPA의 단점이 많이 부각된 것 같지만 MPA 구조도 장점이 있다. 우선 가장 큰 장점은 SPA와 달리, SEO(검색 엔진 최적화)에 친화적이다. 네이버나 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트라면 MPA 구조로 개발하는 것이 좋다. 또한, 서버에서 이미 렌더링한 결과를 가져오기 때문에 SPA와 달리 첫 로딩이 짧은 편이다.

 

SEO (검색 엔진 최적화)
 
검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠를 제작, 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘림

SPA (Single Page Application)

 SPA란 말 그대로, 한 개의 페이지로 이루어진 어플리케이션이다. 즉 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.

 

SPA 장점

SPA는 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다.

 

웹 어플리케이션에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. 이런 특징들은 SPA가 모바일 웹에 최적화 된 이유이기도 하다. 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있다.

 

라우팅(Routing)

라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능이다. 어플리케이션의 라우팅은 사용자가 태스크를 수행하기 위해 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미한다. 일반적으로 라우팅은 사용자가 요청한 URI 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를 전환하는 위한 일련의 행위를 말한다. 

SPA는 이러한 라우팅을 서버가 아닌 프론트엔드 측에서 구현하는 것이 특징이다.

SPA 단점

 

 SPA도 모든 환경에 적합한 것은 아니다. 우선, 서버 사이드 렌더링에 비해 초기 구동속도가 느린 편이다. 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문이다. 또한, SEO (검색엔진 최적화) 문제가 존재한다. SPA는 서버 렌더링 방식이아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이다. 때문에, 처음 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안될 수도 있다. 하지만, SPA는 웹보다는 앱에 적합한 기술이고 React나 Angular 등의 프레임워크는 서버 렌더링(SSR)을 지원하는 SEO 기술이 이미 존재한다.

 

마치며

React 프로젝트를 한 번 경험해보니까 SPA 구조에 대해서 더 알아두면 좋을 것 같아서 공부를 하게 되었다. 이전에도 한 번 SPA에 대해 공부했었는데, 그 때는 장점 위주로만 특징을 파악했었다. 이번 학습을 통해 검색엔진 최적화의 단점도 존재한다는 것을 알았고 웹 보다는 어플리케이션에 적합한 기술이라는 점도 알아갈 수 있었다. 또한 앞으로 프로젝트에서 적합한 개발 환경을 선정하는데에 많은 도움이 될 것 같다.

참고 

- SPA & Routing | PoiemaWeb

- SPA와 기존 웹사이트의 차이 

- 웹 개발자가 알아두면 좋은 SPA, MPA