SPA란?
먼저 전통적인 웹방식인 MPA(Multi Page Application)는 새로운 페이지가 필요할 때 내용이 조금만 바뀌어도 전체페이지를 다시 생성한다.
SPA는 Single Page Application의 약자로 단일 페이지 웹 애플리케이션을 의미한다.
페이지의 내용이 바뀌었을 때 MPA처럼 서버로부터 새로 불러오지 않고 현재페이지를 바뀐부분만 동적으로 다시 생성하는 웹사이트를 말한다.
현재는 모바일 사용량이 데스크탑을 넘어섰기 때문에, 트래픽 감소, 속도등의 향상이 매우 중요한데 SPA는 모바일 환경에서도 더욱 적합하다.
SPA의 장점
- 필요한 부분만 재렌더링 하기때문에 페이지 로딩속도가 빠르다.
- 속도가 빨라지므로 사용자에게 좋은 경험을 제공한다.
- 모듈화 또는 컴포넌트별 개발에 용이하다.
SPA의 단점
- 최초로 서버에 요청시 모든 데이터를 가져오므로 MPA 방식에 비해 초기 페이지 로딩속도가 느리다.
- 검색엔진 최적화(SEO)에 적합하지 않을 수 있다.
- 검색엔진에서 크롤링 시 <Head>태그 부분의 메타정보를 사용하는데 SPA는 HTML이 변동되지 않기 때문에 모든페이지의 메타데이터가 동일하기 때문에 발생한다.
- SEO의 솔루션
- SSR (Server Side Rendering)
- 동적 렌더링 (Dynamic Rendering)
- History API
SPA 구현
SPA 방식을 구현하기 위해 프레임워크를 사용하는데, 대표적으로 React, Angular, Vue, Svelte 프레임워크가 있다.
또한 SPA의 단점인 SEO를 해결하기 위해 SSR 프레임워크가 존재한다.
- React -> Next.js
- Vue -> Nuxt.js
- Angular -> Angular Universal
- Svelte -> SveltKit