React SPA

SPA란? 

Single-Page Application으로 즉 한 페이지에 담겨있는 앱입니다.

SPA는 전통적인 웹사이트와 다르게 Menu와 Footer와 같이 페이지 전환 후에 중복되는 부분은 새로 불러오지 않습니다.

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 어플리케이션이나 웹 사이트를 말합니다.

 

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

전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않습니다. 전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현합니다.

 

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

애플리케이션 사용에 익숙한 사용자들에게 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었습니다.

 

SPA의 등장 배경과 개념

1990년대 후반부터 SPA를 개발하기 시작했고 2000년대 중반부터 이러한 개발 방식을 이용한 웹어플리케이션이 보편화 되어 개발자가 떠오르는 직업이 되게 되었습니다.

 

SPA의 장점

장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 사용자와의 interaction에 빠르게 반응합니다
• 서버에서는 요청 받은 데이터만 넘겨주면 되니까 서버 과부하 문제가 현저하게 줄어듭니다
• 전체 페이지를 렌더링 할 필요가 없어서 더 나은 유저경험을 제공합니다

단점

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