SPA
SPA(단일 페이지 어플리케이션, Single Page Application)는 웹 애플리케이션의 일종으로, 한 개의 페이지에서 모든 컨텐츠를 동적으로 로드하여 제공하는 방식을 말합니다.
즉, 페이지가 다시 로드되지 않고, 동적으로 새로운 데이터를 로드하여 업데이트됩니다.
- 기존의 다중 페이지 어플리케이션(MPA)은 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 페이지를 받아와야 하기 때문에, 화면 전환 속도가 느리고 사용자 경험이 저하되는 문제가 있습니다.
- 이와 달리 SPA는 한 번에 모든 리소스를 다운로드하고, 클라이언트 측에서 페이지 이동 없이 필요한 부분만 로드하여 사용자 경험을 향상시키는 장점이 있습니다.
SPA의 특징
1. 빠른 페이지 로딩
SPA는 초기에 한 번 페이지를 로드하고, 이후에는 필요한 데이터만 로드하기 때문에 빠른 페이지 로딩이 가능합니다.
2. 사용자 경험
전통적인 웹 애플리케이션과 달리 페이지 전환이 없기 때문에, 사용자 경험이 향상된다.
3. 클라이언트/서버 분리
클라이언트에서 동작하기 때문에, 서버의 부하를 줄일 수 있습니다.
기존의 서버사이드 렌더링 방식(SSR)에서는, 서버가 클라이언트의 요청에 대한 응답으로 완전한 HTML 문서를 만들어 보내주었습니다. 이 때문에 서버의 부하가 크고, 렌더링 속도가 느리다는 단점이 있습니다. 또한, 서버에서 전체 HTML을 만들어내므로 클라이언트 측에서는 HTML을 받아오기만 하면 됩니다.
그러나 SPA에서는 초기에 HTML 파일을 받아오고, 이후에는 필요한 데이터만 받아와 클라이언트 측에서 렌더링을 처리합니다. 서버는 RESTful API를 제공하여 클라이언트 측에서 필요한 데이터를 요청하고, 이에 대한 JSON 데이터를 반환합니다.
하지만 클라이언트/서버 분리 방식에서는, 서버에서 처리하던 일부 기능을 클라이언트에서 처리해야 하므로 보안 문제가 발생할 수 있습니다. 따라서 보안에 대한 적절한 대책을 마련해야 합니다. 또한, 초기 로딩 시간이 오래 걸리는 문제도 있습니다.
4. SEO (검색 엔진 최적화) 문제
SPA는 초기 렌더링 시 모든 컨텐츠를 로드하지 않기 때문에, 검색 엔진 최적화가 어렵습니다. 검색 엔진의 크롤러는 초기 로딩 시점에서의 페이지 내용을 기준으로 색인을 생성하기 때문입니다. 따라서, SPA에서는 검색 엔진이 초기 페이지 콘텐츠를 인식할 수 있도록 처리해주어야 합니다.
이러한 SEO 문제를 해결하기 위해, SPA에서는 다양한 대응책이 제시되고 있습니다. 예를 들어, 검색 엔진 크롤러를 위한 페이지 콘텐츠를 서버 측에서 미리 렌더링하여 HTML 파일을 제공하는 SSR(Server-Side Rendering) 방식을 적용하는 것이 대표적인 방법입니다.
또한, SPA에서는 검색 엔진 크롤러에게 페이지 내용을 제공하는 메타데이터를 제공하는 방식으로도 SEO 문제를 해결할 수 있습니다. 이를 위해, SPA에서는 SPA의 라우터에 대한 메타데이터를 제공하는 vue-router와 같은 라이브러리를 제공합니다. 이를 이용하여, 검색 엔진이 페이지 내용을 더 잘 인식할 수 있도록 도움을 줄 수 있습니다.
📌 SPA는 정보의 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술
📖참고
0개의 댓글
