React SPA(Single Page Aplication)
SPA의 등장배경
-
SPA등장 전 (SSR)
SPA등장 전, 웹사이트에서는 MPA(Multiple Page Application)방식을 사용했다. 사용자가 웹사이트 내의 다른 페이지로 이동시 브라우저가 페이지를 보여주기위해 HTML파일로 된 페이지 전체를 불러오는 식이었다.이는 시간이 흐르며 점차 웹사이트가 복잡해지고 애플리케이션 형태를 가지게 되며 문제가 생겨나기 시작했다. 애플리케이션 형태의 웹사이트를 이용하는 사용자와 서비스 사이에 점점 더 많은 상호작용이 발생하게 되었고 이때마다 Header나 Navigation Bar등 중복요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생키며 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 된 것이다.
-
SPA 등장 (CSR)
이를 해결하기위해 1990년대 후반, HTML문서 전체가 아닌 업데이트에 필요한 데이터만을 서버에서 전달받아 JavaScript가 동적으로 HTML요소를 생성해 화면에 보여주는 방식이 개발되어 사용되기 시작했다. 2000년대 중반에 이르러서는 이러한 개발방식을 이용한 웹 애플리케이션이 보편화되었고 이것이 SPA(Single Page Aplication)이다.
SPA의 장점
SPA는 전체 페이지가 아닌 필요한 부분의 데이터만을 받아 화면을 업데이트하기에 사용자와의 상호작용(Interaction)에 빠르게 반응한다. 또한 서버에서는 요청받은 데이터만을 넘겨주기에 서버 과부하 문제가 현저하게 줄어든다. 사용자 입장에서는 전체 페이지를 렌더링하지 않기 때문에 더 나은 사용자 경험을 갖게 된다.
SPA의 단점
-
첫 화면 로딩 시간이 길어진다
브라우저는 첫 화면 로딩시 HTML 파일을 읽은 후 해당파일 내 Script요소 안에 있는 JavaScript 파일을 다시 받아 오는 과정을 거친다. SPA의 경우, HTML파일 내 대부분의 코드가 JavaScript파일 안에 들어있다보니 JavaScript파일이 무거워지고 이는 첫 화면의 로딩시간을 길게 만드는 문제로 이어진다.
-
검색 엔진 최적화 (Search Engine Optimization)
검색 엔진 최적화(SEO)란 검색 엔진이 자료를 수집하기 좋도록 웹페이지를 구성하는 것을 뜻하며 검색 로봇이 웹페이지의 정보를 수집, 분석해 그 결괏값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력시 해당 인덱스에서 검색어와 가장 연관성 높은 웹페이지들을 순서대로 보여주는 방식이다. 이때 검색로봇은 웹 페이지의 URL과 HTML문서내의 각종 태그나 링크들을 모두 분석하는데 SPA의 경우 HTML이 거의 비어있다보니 검색로봇에게 충분한 자료를 제공하지 못한다. 때문에 대응책을 따로 마련해야하고 앱 안에서 브라우저의 앞으로 가기/ 뒤로 가기등의 상태 관리도 해야하기에 개발의 복잡도가 늘어난다. 다만 현재는 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색엔진이 발전하고 있어서 점차 해결되고있는 추세다.
