반응형
웹 애플리케이션 구조를 설명하는 두 가지 서로 다른 개념
SPA (Single Page Application)
웹 애플리케이션이나 웹사이트의 형태 중 하나
한 번의 페이지 로드로 모든 콘텐츠를 제공하고 이후의 상호작용은 페이지의 일부만 동적으로 업데이트하는 방식
사용자는 페이지 전환 시 전체 페이지를 새로 로드하지 않고 필요한 데이터만을 서버로부터 받아와 화면을 업데이트 함
이로 인해 사용자 경험이 향상되고, 애플리케이션의 응답 속도가 빨라진다
장점
- 빠른 로딩 속도와 원활한 사용자 경험 제공
- 페이지 전환 시 부드러운 애니메이션과 동적 콘텐츠 업데이트 가능
- 백엔드와 프론트엔드의 분리로 개발 효율성 증가
단점
- 초기 로딩 시간이 상대적으로 길어질 수 있음
- 검색 엔진 최적화(SEO)에 불리할 수 있음
- 클라이언트 측에서 더 많은 자원을 사용하게 됨 (JavaScript 의존도 증가)
차이점
- 한 페이지에서 모든 콘텐츠를 동적으로 로드하여 부드러운 사용자 경험을 제공
- 클라이언트 측 렌더링을 통해 빠른 인터렉션과 효율적인 애플리케이션 제공하지만, SEO와 초기 로딩에서 불리할 수 있음
MAP (Multi Page Application)
전통적인 웹 애플리케이션 형태, 각 페이지 요청 시마다 서버에서 새로운 HTML 페이지를 받아오는 방식
사용자의 요청에 따라 각각의 URL에 해당하는 새로운 페이지가 로드됨
장점
- SEO 친화적이며 검색 엔진에서의 인덱싱이 용이함
- 초기 로딩 시간이 짧음
- 각 페이지는 독립적으로 로드되므로 특정 페이지에서의 오류가 전체 애플리케이션에 영향을 덜 미침
단점
- 페이지 전환 시마다 전체 페이지를 새로 로드하므로, 사용자 경험이 다소 끊길 수 있음 (플리커 현상)
- 서버 요청이 빈번하여 네트워크 트래픽이 증가할 수 있음
- 각 페이지마다 독립된 HTML 파일을 제공하므로 SEO에 강점이 있으며 초기 로딩 속도가 빠른 편이나, 사용자 경험이 다소 끊길 수 있는 단점이 있음
차이점
- 요청에 따라 각 페이지를 새로 로드하여 전통적인 웹 구조를 유지
- 클라이언트 측 렌더링을 통해 빠른 인터렉션과 효율적인 애플리케이션 제공하지만, SEO와 초기 로딩에서 불리할 수 있음
결론
SPA - 사용자 상호작용이 많은 애플리케이션에 적합
MPA - 콘텐츠 중심의 웹사이트에 적합
반응형
'Web' 카테고리의 다른 글
| WEB | 네이밍 컨벤션 (0) | 2024.10.29 |
|---|---|
| WEB | CSR vs SSR (2) | 2024.10.29 |