[Programming] SPA(Single Page Application)이란? 장점과 단점

 

 

SPA는 왜 쓰는 걸까요?

 

SPA란 한 페이지에서 작동하는 애플리케이션을 의미합니다. 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받아와야 했습니다. 현재 페이지와 중복되는 부분이 존재함에도 불구하고, 전체 페이지를 로딩해야 하는 '비효율'이 존재하고 있었던 것입니다.

 

이런 비효율적인 통신은 서버와 클라이언트의 상호작용이 늘어나면서 자연스럽게 트래픽 과부화로 이어지게 됩니다. 매번 같은 페이지를 로딩하면서 사용자의 대기시간은 늘어났고, 서버의 부담도 클 수 밖에 없습니다. 

 

이러한 문제를 해결하기 위해 Javascript의 AJAX 기술이 도입됩니다. JS에서 동적으로 페이지를 요청하고 받아오는 방식으로 애플리케이션이 대체되기 시작하였고, 현재의 SPA의 토대가 마련되었습니다.

 

 

SPA(Single Page Application) 이란?

 

SPA는 서버로부터 완전히 새로운 페이지를 불러오지 않습니다. 기존에 중복되는 컴포넌트를 제외하고 필요한 데이터만 서버에 요청하여 브라우저를 업데이트하는 방식의 애플리케이션을 의미합니다.

 

SPA 장점?

 

SPA 형식은 사용자에게 보다 적은 대기시간을 선사합니다. 필요한 컴포넌트만 업데이트하기 때문에 서버입장에서도 대량의 데이터를 보내는 부담을 줄일 수 있게 됩니다. 즉 사용자 경험은 개선되고 서버의 경량화가 가능해지는 장점을 가지고 있습니다.

 

지금 우리가 사용하는 Youtuve, Netflix, airbnb, Gmail, Facebook 애플리케이션들은 모두 SPA 형식의 작동방식을 가지고 있습니다.

 

 

SPA 단점?

SPA 방식은 최초 서버로 부터 거의 비어있는 HTML 파일을 로딩합니다. 이 후 <script> 태그 내 존재하는 Javascript가 작동하면서 필요한 컴포넌트를 요청하는 방식으로 작동합니다. 동적인 애플리케이션 조작을 위해 Javascript 소스가 무거워 지면서 최초 페이지 접속시 대기 시간이 길어지는 단점을 가지고 있습니다.

 

두번째 단점으로는 SEO에 취약한 구조를 가지고 있습니다. 구글 크롤봇은 웹페이지를 이동하면서 HTML 소스를 수집하고 사용자 쿼리에 적합한 페이지를 상단에 노출합니다. 하지만 SPA는 대부분 Javascript로 작동하기 때문에 크롤봇이 수집할 HTML 소스가 부족하기 때문입니다.