[TIL]2022.11.19 SPA란 무엇인가? (Single Page Aplication) - 바닐라코딩? 바닐라JS?

SPA란?

Single Page Application, SPA. 말 그대로 하나의 페이지를 사용하는 어플리케이션.

SPA는 서버로부터 새로운 페이지를 가져오는 것이 아닌, 하나의 페이지에서 내용을 동적으로 변경함.

전통적인 웹 사이트는 페이지 하나에 전달되는 데이터의 용량이 적었음.

그래서 새로운 페이지로 이동할 때 완전히 새로운 페이지를 서버에서 전송해 주곤 했음.

파일의 크기가 크지 않아 별 문제가 없었음.

그러나 점차 웹사이트가 발전하고 고도화됨에 따라 한 페이지가 갖고 있는 데이터의 용량이 커져갔고,

매 번 새로운 페이지를 전달하는 것이 점점 버거워지게 되어 SPA가 재조명 되고 있음.

 

MPA란?

Multi Page Application, MAP.

다른 페이지로 넘어갈 때 URL도 바뀌고 서버로 들어가는 요청에 응답으로 html파일을 주어서 완전히 새로운 페이지로 넘어감.

보통, 웹사이트를 보면 헤더나 푸터, 내비게이션 또는 사이드바 같은 것들은 그대로 있되 내용만 바뀌는 경우가 많다.

html파일을 주게 되면 굳이 다시 그러지 않아도 되는 헤더 푸터 등까지 다 같이 전달하게 되어 트래픽이 늘어나기 때문에 부담이 생기고 느려진다.

하지만 쇼핑몰 사이트를 운영하거나 콘텐츠 배포 등 여러가지 카테고리가 필요하다면 MPA 방식이 적합하다.

SPA가 무조건적인 정답은 아니라는 것이다.

 

SPA 구현 방식들 ?

SPA 구현 방식은 여러 가지가 있는데 대표적인 게 Ajax를 통한 컨텐츠 로드이다.

페이지 새로고침 없이 데이터가 교환되고 업데이트되는 것.

전통적인 방식에서 클라이언트가 최초 요청을 보내면 서버는 html파일을 응답으로 보내고, 클라이언트가 다시 form데이터를 전송하면 서버가 다른 html 파일을 응답으로 보내 페이지가 리로드되는 방식이었다.

그러나 SPA방식은 form 작성 시 ajax를 이용해서 form 데이터의 일부를 전송하는데, 그럼 서버는 JSON 데이터를 응답으로 보내주는 방식이다. 이렇듯 SPA는 화면 이동 시 필요한 데이터를 서버로부터 JSON 데이터로 전달받아 동적으로 랜더링한다.

SPA의 장점?

• 클라이언트가 모든 페이지를 가지고 있으므로 앱과 같은 자연스러운 사용자 경험을 제공한다. 사실상 로딩 이후에는 모바일 앱과 동일한 방식으로 동작 한다고 볼 수 있다.
• 페이지를 이동 하더라도 필요한 부분(컴포넌트)만 부분적으로 교체하면 되므로 효율성이 증가한다.
• 서버가 해야 할 화면 구성을 클라이언트가 수행하므로 서버 부담이 경감된다.
• 모듈화 또는 컴포넌트별 개발이 용이하다.
• 프론트와 백이 비교적 명확하게 구분된다.
• 앱과 웹이 동일한 서버를 이용할 수 있다.

 

SPA의 단점?

• 처음 접속시에 사이트 구성과 관련된 모든 리소스를 한 번에 받기 때문에 초기 구동 속도가 느릴 수 있다.
• 데이터를 별도로 요청하고 받아와서 화면을 구성하므로 설계 방식에 따라서 화면이 변하는 모습이 사용자에게 노출될 수 있다. 미관상 좋지 않다.
• SPA 구조 상 데이터 처리는 클라이언트에서 하는 경우가 많은데, 중요한 비즈니스 로직이 존재한다면 사용자가 굳이 파헤쳐 보겠다 하면 막기 어렵다.
• 검색엔진 최적화(SEO)가 어렵다.