[React]SPA란?_Single Page Application

SPA(Single Page Application)란 단일페이지로 구현한 사이트이다. 
즉, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경해 표시하는 기술이다.

SPA 프레임워크인 React, Angular, Vue는 대표적으로 virtual Dom을 이용해 SPA를 구현하는 기술들이다.

이와 반대되는 개념은 MPA(Multi Page Application)이다.
새로운 페이지로 이동할 때마다 새로운 HTML을 받아와 페이지를 로드하는 방식이고, 새로운 화면을 보여주기 위해 매번 서버에 요청하기 때문에 성능상의 문제가 생길 수 있다는 단점이 존재한다.
(ex. header, footer 등은 화면이 바뀌어도 그대로이면서 내용만 바뀌는 경우가 있다. 그 때 새로운 html을 받아오는 과정은 불필요하다)

하지만 언제나 옳은 개념이 없 듯 마찬가지로 무조건 SPA가 옳은 것은 아니다. 상황에 맞게 사용해야 한다.

 

SPA의 장점

- 클라이언트가 모든 페이지를 가지고 있으므로 앱과 같은 자연스러운 사용자 경험을 제공한다.

- 매 화면 이동마다 서버에 요청을 하지 않기 때문에 서버 부담이 줄어든다

- 백엔드와 프론트엔드가 분리되어 업무 분담이 용이하다

 

SPA의 단점

- 처음 접속시에 사이트 구성과 관련된 모든 리소스를 한번에 받아와야 하기 때문에 초기 구동이 느릴 수 있다.

- 검색엔진 최적화(SEO)가 어렵다
초기 로딩할 때 해당 페이지가 실제 검색 컨텐츠를 포함하지 않는 경우가 있기 때문

---

Q. SPA에 대해서 설명해 주세요

A.
React, vue, angular들이 virtual Dom을 이용한 대표적인 spa 프레임워크 입니다.

SPA는 단일페이지로 구현한 사이트를 말합니다. 웹 사이트의 페이지를 하나의 페이지로 담아 동적으로 화면을 변경해 표시합니다.
SPA는 매 화면 이동마다 서버에게 요청을 보내지 않기 때문에 서버의 부담을 덜 수 있고 자연스러운 화면 전환으로 사용자친화적입니다. 하지만 그만큼 초기에 리소스를 한번에 받아와야 하기 때문에 초기 구동이 느릴 수 있습니다. 또한 검색엔진 최적화가 어렵다는 단점이 있습니다.

SPA의 반대되는 개념으로 MPA가 있는데 이는 새로운 페이지로 이동할 때마다 HTML을 페이지를 로드하는 방식입니다.
SPA와 MPA 개념중 어떤 것이 더 낫다는 것은 없으니 상황에 맞게 사용하는 것이 좋습니다.