[CS] SPA !!

SPA란?

싱글 페이지 애플리케이션(single-page application, SPA)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어줍니다.

 

MPA vs SPA

• SPA는 한 개(single)의 Page로 구성된 Application이지만, MPA(Multiple page Application)는 여러 개(Multiple)의 Page로 구성된 Application입니다.
• MPA는 새로운 페이지를 요청할 때마다 정적인 리소스가 다운되며, 매번 전체 페이지가 다시 렌더링 되는 반면에, SPA는 웹 에플리케이션에 필요한 정적 리소스를 최초 한 번에 다운로드 하여 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신합니다.
• SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다고 하고, MPA는 SSR(Server Side Rendering) 방식으로 렌더링한다고 합니다.

 

MPA

 

1) MPA 장점

1. SEO 관점에서 유리합니다.
   • MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링하기에 적합합니다.
2. 첫 로딩이 매우 짧습니다.
   • 서버에서 이미 렌더링해 가져오기 때문에 로딩이 빠르지만 클라이언트가 JS 파일을 모두 다운로드하고 적용하기 전 까지는 각각의 기능은 동작하지 않습니다.

2) MPA 단점

1.  새로운 페이지를 이동하면 깜빡거립니다. (UX 부분 단점)
   • 새로운 페이지를 요청할 때마다 전체 페이지를 렌더링하기 때문에 매 페이지 요청마다 리로딩이 발생합니다.
2.  페이지 이동시 불필요한 템플릿도 중복해서 로딩합니다. (성능 부분 단점)
3.  서버 렌더링에 따른 부하가 일어납니다.
4.  모바일 앱 개발시 추가적인 백엔드 작업이 필요하여 개발이 복잡해질 수 있습니다. (생산성 부분 단점)

 

SPA

 

3) SPA 장점

1. 자연스러운 사용자 경험
   • 깜빡임 현상 X
   • 네이티브 앱에 가까운 자연스러운 페이지 이동 (웹앱)
2. 웹 성능 향상
   • 필요한 리소스만 부분적으로 로딩
   • 서버 템플릿 연산 클라이언트로 분산
3. 생산성 향상
   • 컴포넌트별 개발 용이 (협업 업무 분담, 유지보수)

4) SPA 단점

1. 첫 랜딩 속도가 느림 (한번에 모든 파일 다운 → Code Splitting 고려 필요)
2. 검색엔진최적화(SEO)에 취약함
3. 보안 이슈
   • 핵심 비즈니스 로직 최소화 필요 (노출 위험)

 

⚠ 주의!!

SPA 방식이 모두 CSR인 것은 아닙니다.