SPA는 하나의 웹 브라우저 와 하나의 도큐먼트만 로드하는 싱글 웹페이지, 웹사이트 또는 웹 어플리케이션입니다. SPA는 유저가 사용하는 동안 페이지의 리로딩reloading이 필요없고, 컨텐츠의 변경, 변화가 필요할 때만 그 부분만 업데이트가 됩니다. 이는 자바스크립트의 API를 통해 구현할 수 있습니다. 리액트는 SPA를 구현하는 자바스크립트 라이브러리 중 하나로 현재 가장 많이 사용되고 있습니다.
SPA의 장점으로는 빠른 속도, 향상된 유저 경험, 효율적인 캐싱, 더 적은 서버 리소스(자원)사용, 간소화된 개발 프로세스 등의 장점이 있습니다.
- 빠른 속도는 다른 페이지로의 전환 등의 액션에서 경험할 수 있는데요, 이게 가능한 이유는 페이지 전환 시 전체 페이지를 처음부터 다시 로드하지 않기 때문입니다. 요청된 페이지의 변경된 부분의 데이터만 갱신되기 때문에 속도가 빠릅니다.
- 이 장점은 향상된 유저 경험으로 이어지는데요, 유저들이 느린 속도와 사용의 어려움 때문에 웹 페이지를 빨리 이탈했다면 SPA의 도입 후 빨라진 속도를 통해 원하는 요청의 결과를 빨리 얻을 수 있게되었고, 이는 네이티브 앱과 유사한 사용자 경험을 제공할 수 있고, 유저 경험(익스피리언스)을 향상시켜주는 계기가 되었습니다.
- 효율적인 캐싱도 데이터를 효율적으로 주고 받기 때문에 얻을 수 있는 장점인데요, 서버로 요청을 단 한번만 보내고 후에는 데이터를 업데이트만 합니다. 이 방법은 유저가 오프라인일 때도 웹페이지를 사용할 수 있도록 합니다. 그리고 다시 유저가 온라인이 되면 로컬 데이터와 서버를 동기화합니다.
- 효율적인 캐싱 장점은 더 적은 서버 리소스 사용으로 이어지는데요, 페이지를 최초 로드 할 때 필요한 모든 정적 리소스를 한번만 서버로 데이터를 요청하기 때문에 더 적은 대역폭을 사용합니다. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있습니다.
(+)
SPA의 단점으로는 낮은 SEO, 최초 로딩 시간, 브라우저 기록 저장, 너무 커지는 자바스크립트 파일의 사이즈 등이 있습니다.
- SPA의 구조는 하나의 URL을 가진 하나의 웹 페이지로 이루어져있습니다. 이 구조는 SEO, 검색 엔진 최적화를 하기에 어렵습니다. 인덱싱, 고유링크, 메타데이터를 붙이기 어렵고 결과적으로 서치 로봇에 스캔될 확률이 매우 낮기 때문에 검색 엔진 최적화가 어렵습니다.
- SPA는 빠른 속도를 유저에게 제공해줄 수 있지만 이를 위해 최초 로드시 필요한 데이터와 유저에게 필요하지 않을수도 있는 모든 데이터를 다운받기 때문에 시간이 오래걸릴 수 있습니다.
- SPA는 브라우저의 히스토리(기록)을 저장하지 않습니다. SPA의 링크만 확인 할 수 있고, 또한 SPA내에서 뒤로가기, 앞으로가기를 할 수 없습니다. 뒤로가기 버튼을 누르면 이전 상태로 가는 것이 아니라 이전에 로드된 페이지로 이동합니다. 그러나 이러한 단점은 HTML5 History API로 해결할 수 있습니다.
(심화내용 - 벨로퍼트 블로그 글 복붙,,,이긴한데 공부해보면 좋을 것 같아서 추가했습니다.)
- SPA를 구현하기 위해 오히려 자바스크립트 파일의 사이즈가 커진다는 단점이 있습니다. 유저가 실제로 방문하지 않을 수도 있는 페이지에 관련된 스크립트도 불러오기 때문입니다. 하지만 Code Splitting을 사용한다면 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선할 수 있습니다.
- 리액트 라우터같이 브라우저측에서 자바스크립트를 사용하여 라우트를 관리하는것의 잠재적인 단점은, 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아가지 못한다는 점 입니다. 때문에, 구글, 네이버, 다음 등 검색엔진에서 페이지가 검색결과에서 잘 안타날수도 있습니다. 추가적으로, 자바스크립트가 실행될때까지 페이지가 비어있기 때문에, 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 흰 페이지가 나타날 수도 있다는 단점도 있습니다. 이는, 서버사이드 렌더링을 통하여 해결 할 수 있습니다.
SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
What Are Single Page Applications? Examples, Frameworks, and More
→ 이 페이지를 많이 참고했습니다.
