SPA(Single Page Application)
SPA는 Single Page Application의 약자로 단일 페이지에서 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미합니다.
사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있습니다.
위처럼 페이지 전환을 할 때도 깜빡임 없이 부드럽게 넘어가게 되고 마치 하나의 페이지인 것처럼 처리하는 기술입니다.
장점과 단점
장점
-
향상된 사용자 경험: 페이지 간 전환 없이 콘텐츠를 동적으로 업데이트하기 때문에 사용자는 더 빠르고 부드러운 웹 탐색 경험을 할 수 있습니다.
-
효율적인 서버 통신: SPA는 페이지 전체를 새로 불러오는 대신 필요한 데이터만 서버로부터 요청하기 때문에, 네트워크 사용량이 감소하고 애플리케이션의 전반적인 성능이 향상됩니다.
-
프론트엔드와 백엔드의 분리: SPA는 API를 통해 데이터를 주고받으므로, 백엔드와 프론트엔드가 분리되어 개발될 수 있습니다. 이는 개발 과정의 유연성을 증가시킵니다.
단점
-
SEO 최적화 문제: SPA는 페이지의 내용이 클라이언트 사이드에서 동적으로 생성되기 때문에, 검색 엔진이 콘텐츠를 제대로 크롤링하고 색인화하는 데 어려움을 겪을 수 있습니다.
-
초기 로딩 시간: SPA는 애플리케이션을 처음 로딩할 때 필요한 모든 스크립트와 자원을 한 번에 불러와야 하기 때문에 초기 로딩 시간이 길어질 수 있습니다.
브라우저 호환성과 보안 문제: 일부 오래된 브라우저에서는 SPA 기술을 완전히 지원하지 않을 수 있으며, 보안 취약점에 노출될 가능성도 더 높습니다.
MPA(Multi Page Application)
MPA는 Multi Page Application의 약자로 각 페이지별로 HTML문서가 따로 존재하여, 페이지를 이동할 때마다 새로운 html 페이지를 받아와서 새로 렌더링하는 전통적인 웹페이지 구성 방식입니다.
장점
-
SEO 친화적: 각 페이지가 별도의 URL을 가지고 있어 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있습니다.
-
디자인과 구조의 유연성: 각 페이지를 별도로 디자인하고 구성할 수 있어, 다양한 사용자 요구와 기능을 효과적으로 수용할 수 있습니다.
단점
-
성능: 사용자가 페이지 간에 이동할 때마다 전체 페이지를 새로 불러와야 하므로, SPA에 비해 상대적으로 느린 사용자 경험을 제공할 수 있습니다.
-
개발과 유지보수: 페이지가 많을수록 관리해야 할 코드의 양이 많아져 개발과 유지보수가 여러워질 수 있습니다.
