💻 SPA가 무엇일까?

(1) SPA가 무엇일까?

SPA란 싱글 페이지 어플리케이션으로(html 파일이 한개), 서버로부터 새로운 페이지를 불러오지 않고 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 업데이트하는 방식인 웹 어플리케이션을 말한다.

---

(2) SPA의 장단점은?

SPA 장점

• 모듈화 및 컴포넌트 개발에 용이
• 전체 페이지를 업데이트 할 필요가 없기 때문에 자연스러운 UX를 연출(깜빡거릴 일이 없음)
• 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과부하를 줄임

SPA 단점

• 클라이언트가 최초로 서버에 요청할 때 모든 데이터를 가져오기 때문에 최초 페이지 로딩속도가 느림 (=> 코드 스플리팅 개선)
• 클라이언트에 중요 비즈니스 로직이 노출될 수 있음

• SPA는 하나의 페이지에 여러 페이지를 JS로 구현하는 방식이기 때문에 JS를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되어 색인이 되지 않는 문제가 발생할 수 있고, MPA와 같이 Head태그 부분에 메타 태그를 삽입하여도 SPA는 해당 사이트 내의 다른 페이지로 이동하더라도 HTML은 변동되지 않기 때문에 모든 페이지에 동일한 메타 데이터를 삽입하게 되는 상황이 발생한다. 이러한 이유로 검색엔진최적화(SEO)에 문제가 될 수 있음

---

SPA와 MPA의 차이점

SPA와 MPA의 가장 큰 차이는 로딩방식에 있다.

MPA는 클라이언트가 서버에 최초 요청을 하게 되면 하나의 정적인 페이지의 모든 소스를 가져온다. 그 후에 다른 페이지로 이동하기 위해 사용자가 클릭을 하게되면 또다시 새로운 정적인 페이지 전체를 가져온다.

반면 SPA는 클라이언트가 서버에 최초로 요청을 하게되면 HTML, CSS, JS 등 사이트에 필요한 모든 소스를 가져오고 다음 요청에는 AJAX를 이용해 변경에 필요한 부분만 가져오는 방식이다.