Single Page Application의 약자이고, 의미에 맞게 하나의 페이지로 된 단일 페이지 어플리케이션을 뜻한다. 사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 것이 아니라, 클라이언트가 동적으로 페이지를 다시 적성하는 방식이다. spa의 경우에는 렌더링의 역할을 서버가 아니라 브라우저에서 처리하게 하는 방식이다. 첫 페이지 요청시 단 한 번만 리소스(HTML,CSS,Javascript)를 로딩하고, 그 이후로는 페이지 로딩 없이 갱신에 필요한 데이터만을 전달받아 페이지를 갱신한다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
✔️ 반대되는 개념으로는 SPA의 등장 전에 여러 페이지로 구성된 어플리케이션 MPA(Multipage application)이 있었습니다.
MPA는 화면에 보여질 리소스를 서버에 요청하고 서버로부터 받아온 리소스를 렌더링 하는 ssr(서버 사이드 렌더링)방식으로 동작했다.
✔️ 과거에는 웹에서 제공되는 정보가 많지 않았다. 많다고 해도 페이지가 나눠져 있어서 데이터를 쪼개서 보여줄 수 있었지만 요즘은 하나의 페이지에서 보여주는 정보가 많아졌을 뿐만 아니라 자바스크립트 기술도 발전하고, 컴퓨터 성능도 좋아지고, 스마트폰을 통한 웹 어플리케이션 접속도 증가했다.
그래서 페이지를 이동할때마다 매번 새로운 정보를 보여줘야 하고 사용자가 늘어남에 따라 서버로 하여금 각각 본인들의 페이지를 만들어 달라고 하니 서버 측에서 과부하가 걸리게 된다.
또, 이 MPA(Multi Page Application)의 단점은, 페이지 전환마다 새로운 HTML파일을 계속해서 요청하면, 사용자의 인터페이스에서 사용하고 있던 상태를 유지하기가 번거로워지고, 바뀌지 않는 부분까지 다시 불러와야 하기 때문에 불필요한 로딩도 생긴다.
👉 그래서 SPA가 이러한 단점들을 커버하기 위해서 브라우저에서 페이지 렌더링을 처리하게 만든 것이다.
SPA에서는 주로 클라이언트 쪽에서 화면을 구성하므로 Client Side Rendering(CSR)로 불리고, MPA의 경우는 주로 서버가 화면을 구성하기 때문에 Server Side Rendering(SSR)이라고 부른다.
SPA 장점
- 클라이언트가 모든 페이지를 처리하도록 만들어서 앱과 같은 자연스러운 사용자 경험 (UX)를 제공한다. 그래서 모바일 앱과 같은 형식으로 동작하게 된다.
- 페이지를 이동할 때 필요한 부분(컴포넌트)만 부분적으로 교체하면 되므로 효율성이 증가한다.
- 서버가 해야 할 화면 구성을 클라이언트가 수행하므로서 서버 부담이 줄어든다.
- 모듈화 또는 컴포넌트별 개발이 용이하다.
- 백엔드와 프론트엔드가 해야할 일이 명확하게 구분된다.
- 앱과 웹이 동일한 서버를 이용할 수 있다.
SPA 단점
-
처음 접속시에 사이트 구성과 관련된 모든 리소스를 한꺼번에 받기 때문에 초기 구동 속도가 느릴 수 있다.
-
검색엔진 최적화(SEO)에 부적절하다.크롤러가 javascript를 실행하지 않고 어플리케이션이 로드되기 전의 빈 껍데기만 크롤링하기 때문에 인덱싱이 제대로 되지 않는다.(즉, 사용자가 인지하는 화면과 검색 엔진이 인지하는 화면이 다르게 된다)
그 이유는,SPA는 일반적으로 서버 사이드 렌더링(SSR) 방식이 아닌 자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링(CSR) 방식으로 동작한다.클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다. 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다. SPA의 SEO 이슈는 언제나 단점으로 부각되어 왔다.SPA는 정보 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술이므로 SEO 이슈는 심각한 문제로 취급할 수 없다고 생각할 수도 있지만 블로그와 같이 애플리케이션의 경우 SEO는 무시할 수 없는 중요한 의미를 갖는다. Angular나 React 등의 SPA 프레임워크는 서버 사이드 렌더링(SSR)을 지원하는 기능이 이미 존재하고 있고 크롬 등의 모던 브라우저는 SPA의 SEO 문제를 해결하고 있는 것으로 알려져 있다. -
보안 문제가 생길 수 있다. SPA를 사용하게 되면 핵심로직이 클라이언트에서 javascript를 통해 구현되기 때문에 이는 코드가 외부에 노출되는 것을 막을 수 없다.
참조 👇
