SPA (Single Page Application)

데스크탑에 비해 성능이 낮은 모바일에 대한 니즈가 증가하여 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존 방식과는 다른 접근이 필요했습니다. 이에 SPA 기법이 등장하게 되었습니다.

SPA는 단순하게 1개의 페이지만 있는 어플리케이션 이라 정의할 수 있습니다. SPA는 웹사이트를 구성하는 방법 중 하나인데 보통 웹사이트처럼 여러 페이지가 있고 회원가입, 로그인, 글쓰기 등 복잡한 기능을 지원하지만, 이는 처음 호출된 HTML상에서 필요한 데이터만 호출하여 화면을 새로 구성해 주는 것으로 실제로 페이지의 이동이 일어나지 않습니다. 보통 웹사이트의 메뉴바, footer 부분 등 내용이 변하지 않아도 페이지를 이동할때마다 서버에서 코드를 생성해서 새로 읽고 클라이언트에서는 이 코드를 페이지에 렌더링하게 됩니다. SPA에서는 이러한 부분들이 처음 웹사이트 접속시 한번만 요청되고 페이지를 이동할 때는 앞에서 설명한 방법처럼 화면에 보여질 모든 부분의 코드생성/렌더링을 하지 않고 변경되는 view 부분만 데이터를 받아서 렌더링하기 때문에 속도가 빠릅니다. 서버는 불필요한 코드가 계속 요청되는 일이 없기 때문에 처리량과 트래픽이 적어집니다. 이런 처리를 하기 위해선 JSON 또는 XML 데이터를 서버에 요청하고 받은 뒤, 화면에 바인딩하여 보여줍니다.HTML 버전의 데이터는 모든 여는 태그와 닫는 태그로 인해 일반 JSON 객체와 비교할 때 크기가 더 크며, 비슷한 페이지를 계속 로드하는 경우에는 많은 HTML이 중복됩니다. 

SPA를 사용하는 것이 무조건 좋아 보이지만 단점도 존재합니다. Google과 같은 검색 엔진은 SPA를 색인화하는 데 어려움을 겪었습니다. 한 페이지 내에서 모든 동작을 진행하면 url이 변경되지 않기 때문에 검색의 색인이 어렵습니다.

장점

• 간편한 운영 배포
• 사용자 친화적 (빠른 반응성, 화면전환 에니메이션 등)
• 서버 요청이 적음(REST API를 통한 데이터 송수신)

단점

• 검색 엔진 색인화 어려움
• 초기 구동에 시간이 걸림