TIL) 리액트 SPA 장단점, 검색 엔진의 작동 방식, SPA 사용하는 이유

 

SPA 등장배경

 

전통적인 웹사이트 => 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러왔다.

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

 

이에 대한 고민을 해결하기 위해 나온 것이 바로 SPA!!!

 

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

 

SPA(Single Page Application) 개념

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

 

 

 

SPA 장점

 

1. 빠르다!! 애플리케이션과 사용자 사이에 수시로 상호작용이 발생하는데, 페이지 전체를 렌더링 하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응한다. 

 

2. 서버 과부화 감소!! 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 줄일 수 있다. 

 

3. 향상된 사용자 경험 제공!! 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다. 

 

 

SPA 대표적인 서비스

 

Youtube, facebook, Gmail, airbnb, Netflix

 

SPA 단점

 

1. 첫 화면 로딩 시간이 길어진다. (JS 파일의 크기가 커서 JS 파일을 기다리는 시간으로 인해)

 

why?🤔

브라우저는 첫 화면 로딩시, HTML파일을 읽어들인 후, 그 안의 script 안에 있는 JS 파일을 다시 받아오는 과정을 거친다. 

이때, 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JS 파일 안에 들어있다보니 JS 파일이 무거워진다. 

 

 

2. 검색 엔진 최적화(SEO)가 좋지 않다. 

why?🤔

구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다.

하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다. 

 

즉, SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.

그래서 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하고, 더불어 앱 안에서 브라우저의 상태 관리도 해야 하기 때문에 개발의 복잡도가 더욱 늘어난다.

 

하지만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세라고 한다. 

 

tip, 검색 엔진의 작동 방식

검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면, 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동한다.