SPA (Single Page Application)

SPA (Single Page Application)

🔑 SPA란?

• 단일 페이지로 구성된 웹 애플리케이션 형태(단일 페이지 모던 웹 애플리케이션 )
• 사용자가 처음 접속할 때 HTML, CSS, JavaScript 등의 (핵심 정적) 리소스를 모두 로드한다.
• 이후 페이지 간 이동 시 필요한 데이터만 서버에서 비동기적으로 가져와 화면을 갱신한다(=페이지에서 변경이 필요한 부분만 페이지 내에서 로딩(업데이트)하고 전체 페이지를 재로딩하지 않는다).
• 웹사이트에서 보내야 하는 네트워크 요청을 최소화 => 빠른 응답성, 부드러운 사용자 경험 
• 대표 : React, Vue, Angular와 같은 JavaScript 프레임워크 및 라이브러리. 
  → 이러한 프레임워크들은 SPA개발에 필요한 다양한 기능과 도구를 제공하여, 복잡한 웹 애플리케이션을 효율적으로 개발할 수 있도록 덥는다. 

✅ 특징

• 동적 콘텐츠 로딩 : 필요한 콘텐츠를 서버에서 비동기적으로 가져와 페이지를 업데이트한다. 빠른 웹 경험을 제공한다.
• 클라이언트 사이드 라우팅 : 클라이언트 측에서 JavaScript로 라우팅을 처리한다. MPA*와 다르게 서버로부터 새로운 페이지를 요청하지 않고도 다른 화면으로 전환할 수 있다. 화면 렌더링이 클라이언트(브라우저) 측에서 이루어져서 초기 진입 시 필요한 자바스크립트 파일을 다운로드하여 브라우저 측에서 애플리케이션을 실행한다. 서버의 부담을 줄이고 클라이언트에게 더 큰 제어권을 줄 수 있다.
• AJAX를 통한 비동기 데이터 통신 : 사용자가 입력한 정보에 따라 응답을 실시간으로 보여줄 수 있으며 페이지가 새로고침되지 않고도 필요한 데이터를 서버에서 받아올수 있다.
• 상태관리 : 클라이언트 측에서 애플리케이션 상태를 관리한다. UI의 현재 상태에 따라 서버와 데이터를 주고받아 동기화할 수 있어서, 사용자에게 빠른 인터렉션을 제공할 수 있다.
• 재사용 가능한 컴포넌트 : 일반적으로 재사용 가능한 컴포넌트 기반 구조를 가지고 있어 유지보수성과 확장성이 뛰어나다. 컴포넌트를 독립적으로 개발 및 테스트할 수 있어 생산성도 향상된다.
• 라우팅관리 : 페이지전환없이 애플리케이션이 하나의 HTML 페이지에서 동작하므로 URL을 통한 페이지이동이 필요할 때 history API나 Hash를 사용하여 이를 관리한다. 

 

⭕ 장점

• 빠른 페이지 로딩: 서버와의 데이터 통신만 하고 화면 전체를 다시 로드하지 않기 때문에 빠르다(부드럽고 빠른 웹 경험).
• 사용자 경험 향상: 화면이 깜빡이는 현상이 적고 모바일 애플리케이션과 유사한 경험을 제공한다.
• 클라이언트 자원 활용 : 클라이언트가 데이터를 렌더링하고 애플리케이션을 구동하기 때문에 서버의 부담을 줄이고 성능을 높이는 효과가 있다. 

 

 

❌ 단점

• 초기 로딩 시간: 모든 리소스를 한 번에 로드하기 때문에 초기 로딩 시간이 길어질 수 있다.
• 검색 엔진 최적화(SEO) 문제: 전통적인 HTML 구조가 아니기 때문에 검색 엔진 최적화(SEO)에 어려움이 있을 수 있으며, 이를 해결하기 위해 SSR(Server-Side Rendering)을 함께 사용하는 경우가 많다.
• 브라우저히스토리 관리가 어려움 : 실제 페이지 전환이 없으므로 뒤로가기 버튼을 눌렀을 때 사용자경험이 엉킬 수 있다. 

 

---

[참고] MPA(Multi Page Application)

- SPA와 반대되는 전통적인 웹 애플리케이션
- 페이지를 이동하면 서버에서 새로운 페이지를 새로 렌더링해서 전송해주는 방식
- 페이지에 정보가 많아지면서 이런 방식은 서버의 비효율과 느린 사용 경험을 유발했다. 

 

 

---

 

[참고 사이트]

https://docs.tosspayments.com/resources/glossary/spa

SPA(Single Page Application) | 토스페이먼츠 개발자센터