Single Page Application(SPA)

SPA란 최초 요청 시 서버에서 첫 페이지를 처리, 이후 라우팅은 클라이언트에서 처리하는 웹 어플리케이션을 의미한다.

 

따라서 서버는 단일 html, js, css 파일만 응답하는 방식

 

 

MPA : 전통적인 웹 어플리케이션

SPA : 현재 많이 사용하는 싱글 페이지 어플리케이션

* 각각 장단점이 존재하기 때문에 혼용해서 사용하고 있다.

 

전통적인 애플리케이션은 서버에서 페이지 별로 각각의 html 파일을 가지고 있었기 때문에 화면을 전환할 때마다 새롭게 HTTP 요청, 응답이 수행되면서 화면 전체가 다시 렌더링되고 깜빡이는 현상이 필연적이다.

 

SPA의 장단점

 

장점:

1. 페이지 로딩속도가 빠르다.

 - 클라이언트가 최초 요청에 서버로부터 모든 재료(html, css, js)를 가져오기 때문에 사용자의 요청에 대해 클라이언트 사이드에서 랜더링하기 때문에 서버로부터 테이터를 매번 가져올 필요가 없어 페이지 이동 간에 딜레이가 거의 없다.

 

2. 사용자 경험이 우수하다.

 - 빠른 로딩속도는 사용자ㅏ 경험을 증대시키고, 사용자가 웹사이트에 머무는 데 있어 로딩으로 인한 피로도도 적을 것이다.

 

단점:

1. 최초 페이지 로딩속도가 느리다.

 - 클라이언트가 최초로 서버에 요청할 때 모든 데이터를 가져오기 때문에 상대적으로 최초 요청에서 속도가 MPA에 비해 상대적으로 느리다. 그러나 스마트폰 앱을 작동할 때 최초 로딩시간을 기꺼이 기다리는 사용자라면 이는 큰 문제가 안 된다.

 

2. SEO에 적합하지 않을 수 있다.

자바스크립트

 - SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식이기 때문에 자바스크립트를 크롤링 안되어 색인이 되지 않는 문제가 발생할 수 있다. 구글의 경우 크롤링 과정에서 구글봇이 자바스크립트를 구동하여 읽을 수 있지만 이 또한 서버사이드에서 전혀 렌더링되지 않은 자바스크립트 덩어리를 구글봇이 렌더링하여 크롤링하는 과정에서 많은 시간이 소요된다.

 

 하나의 Meta Data

 - Meta Date 또한 하나의 페이지라는 SPA의 본질적인 특성에서 발생하는 문제이다. 사이트 내의 다른 페이지로 이동하더라도 HTML은 변동되지 않기 때문에 모든 페이지에 동일한 메타 데이터를 삽입하게 되는 상황이 발생

 

결국, 크롤러에게는 하나의 페이지

  - 크롤러는 기본적으로 이미 알려진 페이지를 크롤링한다. 즉, 하나의 페이지에 들어갔을 때 발견되는 URL을 대기열에 저장하고 저장된 URL을 기반으로 다시 크롤링하고 대기열에 저장하고를 반복하여 크롤링하게 된다. 그러나 SPA 방식의 웹 사이트의 경우 기본적으로 사이트 내의 페이지로 향하는 href속성을 html에서 사용하지 않고 JS로 페이지 이동을 구현하기 때문에 크롤러가 사이트에 있는 모든 페이지의 내용을 크롤링하지 못하는 경우가 발생할 수 있다.