SPA(Single-Page Application)

 

<목차>

• SPA(Single-Page Application) 개념 
• SPA의 장, 단점

---

SPA

서버로부터 완전한 새로운 페이지를 불러오는 것이 아닌, 화면 이동 시에 필요한 데이터를 html으로 전달받지 않고 (서버 사이드 렌더링x) 페이지 갱신에 필요한 데이터만 받아(필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.) 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트

 

SPA방식으로 만들어진 대표 서비스 

 

장점

- 전체 페이지가 아닌 필요한 부분의 데이터만 받아서 화면을 업데이트 하면되기 때문에 사용자와 상호작용에 빠르게 반응한다.

- 서버에서는 요청받은 데이터에만 넘겨주기 때문에 서버 과부하 문제가 줄어든다.

- 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

 

단점

- JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다.

브라우저는 첫 화면 로딩시에 HTML파일을 읽어들인 후 그 안의 script tag안에 있는 JavaScript 파일을 다시 받아오는 과정을 거친다.

따라서 JavaScript파일의 크기가 크기도 하고 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.

- 검색엔진 최적화(SEO)가 좋지 않다.

   구글이나 네이버 같은 검색 엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 그러나 SPA의 경우 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다. ( 참고로 SPA의 검색 엔진의 작동방식을 보자면 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동한다. 검색로봇은 자료를 수집할때에 웹페이지의 url 은 물론이고 HTML문서 내의 각종 태그나 링크 등을 분석하는데 SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.)