SPA(Single Page Application)란? 장점 및 단점

카테고리 없음

Huiyeon 2024. 8. 1. 15:18

서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식입니다.

페이지 전환 시 서버에서 전체화면을 새로 내려받지 않기 때문에, 뛰어난 반응성과 빠른 페이지 로딩을 가능케 합니다.

SPA는 한번에 필요한 데이터들을 전송받고 필요한 부분만 업데이트하기 때문에 로딩속도와 반응이 빠릅니다.

별도의 백엔드용 API 서버 구현 없이 웹 어플리케이션 서비스를 제공할 수 있습니다.

UI와 별개로 서버 측의 데이터를 조회하기 위한 API 백엔드 서비스를 구성하여 비동기 방식으로 데이터를 가져와 처리하기 때문에 아키텍처 구성은 별도의 백엔드 API서버 없이 웹 어플리케이션 뿐만 아니라 모바일 앱 서비스를 구현할 수 있습니다.

SPA를 사용하면 어플리케이션 사용 시 트래픽이 줄어들어 도움을 얻을 수 있습니다.

1. 최초의 한번 간단한 HTML 페이지와 동적 화면구성 로직이 담긴 js로 로드하고, 브라우저단에서 js를 이용하여 화면을 동적으로 생성

2. 이후에는 필요한 데이터만 비동기적으로 로드하여 페이지 갱신

3. 렌더링이 클라이언트 측에서 이루어지는 클라이언트 사이드 렌더링

1. 전체 페이지 중 변경이 필요한 영역만 부분적으로 갱신

2. 페이지 간 전환이 부드럽고 빠름

3. 사용자와의 상호작용에 높은 반응성과 부드러운 애니메이션 제공

4. 네이티브 앱을 사용하는 듯한 사용자 경험 제공

1. 초기에 전체페이지를 다운받아야 하므로, 첫 페이지 로딩 속도가 느림

2. 검색 엔진 최적화에 제한이 있음