[React] SPA

🤔 SPA란?

1. 등장배경

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

위와 같은 예시 그림처럼 동일한 페이지 전환을 보여주고 있다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu, Footer와 같은 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다. 전통적인 웹사이트에서 이와 같이 페이지 전체를 불러오는 행위를 보통 깜빡인다고 표현한다.

웹사이트가 복잡해지고 애플리케이션 형태를 가지게 되면서, 사용자와 서비스 사이의 더욱 많은 상호작용이 일어나게 됐었다. 하지만 이럴 때마다 Header나 Navigation Bar와 같이 중복되는 요소들을 매번 불러오는 것은 서버와의 불필요한 트래픽을 발생시켰다. 또한 사용자 입장에서는 매번 모든 페이지를 불러오게 되면서 더 느린 반응성을 가지게 되었고, 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었다.

🔹 1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 데이터를 JS가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발돼 사용되기 시작했다.

🔹 2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며, 이것은 Single Page Application(SPA)이다.

2. 개념

서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아, 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트

3. SPA의 장점

우리가 많이 사용하는 SNS로 예를 들자면, 친구가 올린 사진에 좋아요를 누르고 댓글을 달고, 궁금할 땐 검색을 하기도 한다. 이럴 때 애플리케이션과 사용자 사이에서는 수시로 상호작용이 발생하는데 이때 페이지 전체를 렌더링하는 것이 아닌 필요한 부분만 업데이트하기 때문에 사용자 행동에 빠른 반응을 보인다. 서버 입장에서도 요청받은 데이터만 넘겨주면 되므로 과거와 같은 과부하 문제도 줄일 수 있었다. 또한 화면 전체를 새로 렌더링할 필요가 없어 보다 나은 UX를 제공한다.

4. SPA의 단점

💨 JavaScript 파일 크기가 크고, 첫 화면 로딩 시간이 길어진다.
SPA의 경우에는 JavaScript 파일의 크기가 크기 때문에 JS 파일을 기다리는 시간으로 첫 화면 로딩 시간이 길어진다. 브라우저는 첫 화면을 로딩할 때 HTML 파일을 읽은 후 그 안에 있는 script 안의 Javascript 파일을 다시 받아오는 과정을 거치기 때문이다.

첫 화면 로딩을 할 때 읽은 HTML 파일은 거의 비어있고, 대부분의 모든 코드들이 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워지며, 이 JS 파일을 기다리는 시간으로 인해서 첫 화면 로딩 시간이 길어진다.

💨 검색 엔진 최적화(SEO)가 좋지 않다
검색엔진 최적화는 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹페이지를 구성하는 것을 뜻한다. 검색 엔진의 작동 방식은 검색 로봇이 웹페이지에 있는 정보를 수집하고 분석해서 그 결과값의 인덱스를 만들어서 보관하고 있다가 사용자가 검색어를 입력하면 보관하던 인덱스에서 검색어와 가장 연관성 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동된다. 하지만 SPA의 경우에는 HTML 파일에 별다른 자료가 없기 때문에 검색 엔진이 적절하게 동작하지 못한다. 검색 로봇이 자료를 수집할 때 웹 페이지의 URL, HTML의 문서 내의 각종 태그, 링크 등을 분석하는데 SPA는 HTML이 거의 비어있어 검색 로봇이 자료를 충분히 수집하지 못하게 되는 것이다. 이러한 이유 때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하며, 앱 안에서 앞/뒤로 가기 등의 상태 관리도 해야 되기 때문에 개발의 복잡도가 더 늘어난다. 하지만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있는 추세이다.

출처: 코드스테이츠