2.용어정리(6)-SPA

 

SPA(Singel Page Application)란

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

 

SPA에서 HTML, JS, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다.

 

SPA 장점

- 페이지가 전환될 때 중복되는 부분은 서버로부터 불러오지 않기 때문에 서버과부화 문제가 줄어들고, 문제트래픽 총량은 줄일 수 있다.

- 새로고침이 발생하지 않아 반응이 빠르다

- 네이티브 앱과 유사한 사용자 경험을 전달한다.

 

SPA 단점

- 초기 구동속도가 느리다.

: 첫 화면 로딩 시 HTML파일을 불러들인 후 그 안의 자바스크립트 파일을 받아오는 과정을 거치므로, 초기 구동속도가 상대적으로 느리다. 하지만, 트래픽감소, 빠른 반응성, UX향상 등의 장점들을 고려하면 큰 문제가 아니다.

- 검색엔진 최적화(SEO)문제가 있을 수 있다.

: SEO는 검색 로봇이 웹페이지의 HTML파일의 정보(URL, 시멘틱 태그, 링크) 등을 수집, 분석해 인덱스를 만들어 보관하다가 사용자가 검색어를 입력했을 때 검색어와 가장 관련이 있는 웹페이지를 순서대로 보여주는 것이다.

그런데,  SPA는 HTML에 담긴 정보량이 적고 대부분이 자바스크립트 파일에 담겨있기 때문에 SEO에 문제가 발생할 수 있다.

하지만, Angular, React, Vue등은 서버 렌더링을 지원하는 SEO대응 기술이 존재하므로 대응이 필요한 페이지에 대해서는 선별적으로 대응할 수 있다.

SEO (검색엔진 최적화) 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색결과의 상위에 나올 수 있도록 하는 작업

 

전통적인 웹페이지 라이프사이클 , ajax 라이프사이클 비교

traditional webpage lifecycle

ajax lifecycle

 

 

1) 전통적인 웹페이지 라이프사이클 (전통적인 화면 전환 방식)

- link tag사용 / 새로운 페이지 요청 시 마다 정적 리소스가 다운로드되고 전체 페이지를 다시 레더링함.

  =>새로고침이 있어 사용성이 좋지 않음 + 변경이 필요없는 부분까지 전체 페이지를 갱신하므로 비효율적 

 

 

2)ajax 라이프사이클 비교

- 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드

  이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받음

  =>전체적인 트래픽 감소, 새로고침이 발생되지 않아 네이티브앱과 유사한 사용자 경험제공(전체 페이지를 다시 렌더링하지 않고 변경되는 부분만 갱신) 

  

 

 

 

 

 

 

---

[참조]

https://m.blog.naver.com/dktmrorl/222085340333

[IT정보] 싱글 페이지 애플리케이션(Single Page Application, SPA) 개념

 

https://poiemaweb.com/js-spa

SPA & Routing | PoiemaWeb

https://velog.io/@kaitlin_k/79-SPA%EC%99%80-Router