Single-Page-Application

Single Page Application (SPA)은 화면의 일부를 동적으로 변화하는 방식으로 기존에 화면전체를 불러오는 방식과 달리 화면의 일부만 변경이 가능하며 세션의 변화가 없기 때문에 화면 로딩시간이 단축됩니다.

 

작동방법

전통적인 방식 (MPA: Multi-Page-Application)은 요청이 있을 때마다 화면전체 구성을 새로이 해서 전송합니다 (매 요청이 있을 때마다 HTML을 새로 다운로드). 하지만 SPA는 최초에 HTML파일이 다운로드되고 나면 해당 템플릿을 사용하여 변경요청이 있는 부분만 새로운 정보로 대체하며 HTML을 다시 다운로드하지 않습니다.

장점

SPA의 가장 큰 장점은 속도 향상인데요. 사용자에게 네이티브 앱과 같은 수준의 속도를 제공함으로써 사용자의 경험을 크게 향상할 수 있습니다. 또 다른 장점은 서버와 기능분리로 서버에 의존하지 않고 독립적으로 작동이 가능하게 되어 Frontend 애플리케이션 서비스처럼 활용이 가능하다는 점입니다.

단점

반면에, 단점으로, SPA는 MPA와 달리 각 페이지를 URL경로로 구분하지 않기 때문에 검색엔진 최적화에 불리합니다. 이는 배포된 싱글페이지 애플리케이션의 페이지 이동 간 URL을 보면 변화하지 않는 것과 관련 있는데요. MPA와 달리 각 페이지의 경로가 구분되지 않기 때문에 SEO에서 주로 사용되는 페이지 인덱싱이 불리하기 때문입니다.

---

예를 들어, 아래는 앵귤러를 통해 제작된 애플리케이션인데요. 메인페이지와

하위 페이지의 경로가 다르게 표시되지만

실제 해당 하위 페이지의 경로를 복사하여 검색해 보면 아래와 같이 404가 뜹니다.

---

구현도구

싱글 페이지 애플리케이션은 HTML, CSS, JS만으로 구현이 가능하지만 Angular, React 같은 프레임워크 (라이브러리) 등도 많이 사용됩니다.

SPA방식으로 구현된 애플리케이션들

• Facebook
• Twitter
• Gmail
• Netflix

---

참고

https://www.bloomreach.com/en/blog/2018/what-is-a-single-page-application?spz=article_var 

What Is a Single Page Application? | Bloomreach

https://www.spiceworks.com/tech/devops/articles/what-is-single-page-application/

What Is a Single-Page Application? Architecture, Benefits, and Challenges |

https://w3-lab.com/single-page-applications-2022/

The Popularity of Single-Page Applications in 2022 | W3 Lab