[React] SPA의 등장 배경과 장단점

💡 SPA
서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아서 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 애플리케이션이나 웹 사이트

SPA의 등장 배경

---

전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다.

페이지 전체를 로딩하면서 깜빡이는 현상 등이 생기기 때문에 유저 경험이 좋지 않았습니다.

SPA의 개념 (출처: 코드스테이츠)

또한 사용자와 서비스 사이에 상호작용이 더욱 많아지면서 웹사이트가 더욱 복잡해졌습니다.

상호작용을 할 때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다.

이런 문제를 개선하기 위해 싱글 페이지 애플리케이션(SPA)가 등장했습니다.

SPA의 등장 (출처: 코드스테이츠)

SPA의 장점

---

1. 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하기 때문에 사용자와의 interaction에 빠르게 반응한다.
2. 서버는 요청 받을 데이터만 넘겨주기 때문에 과부하 문제가 적게 발생한다.
3. 전체 페이지를 렌더링 하지 않기 때문에 더 나은 유저 경험을 제공한다.

 

SPA의 단점

---

1. JavaScript 파일의 크기가 커서 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길다.
2. 검색 엔진 최적화(SEO → Search Engine Optiomization)가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는데 SPA는 HTML에 별다른 자료가 없기 때문에 적절히 동작하기 못한다.
   ⇒ 검색 엔진이 SPA에도 대응이 가능하게 발전하고 있어서 점차 사라지고 있는 단점이다.