React SPA

SPA (Single-Page Application)

: 서버로부터 완전한 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아

그 정보를 기준으로 현재 페이지를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션이나 사이트

 

1. Why SPA
2. SPA의 개념
3. SPA의 장단점

 

1. Why SPA

 

SPA의 등장 배경

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

- 위의 예시 그림은 동일한 페이지 전환을 보여줌 

- 전통적인 웹 사이트는 페이지 전체를 로딩함

- SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음

- 전통적인 웹사이트에서는 이와 같이 '페이지 전체를 불러오는 행위'를 보통 깜빡인다고 표현

 

전통적인 웹사이트의 한계와 단점

- 웹 사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더 많은 상호작용이 일어나게 됨 

- 이때 마다 중복되는 요소를 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생 시킴

- 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 느린 반응성을 갖게 되었고 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만듬

 

SPA의 등장

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

- 2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화 → 이것이 싱글 페이지 애플리케이션; SPA

---

2. SPA의 개념

 

SPA (Single Page Application)

: 서버로 부터 완전히 새로운 페이지를 불러오는 것이 아니라

→ 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달 받아

→ 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웹 애플리 케이션이나 웹 사이트를 일컫음

---

3. SPA의 장점과 단점

 

장점

- 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction에 빠르게 반응

- 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어듬

- 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저 겸험을 제공

- SPA 방식의 대표적 서비스 ) Youtube, facebook, Gmail, Netflix 등

 

단점

- 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어 들인 후 그 안의 스크립트 안에 있는 자바스크립트 파일을 다시 받아오는 과정을 거침

- 이 때 첫 화면 로딩 시 읽어들인 HTML 화면은 거의 비어있고, 대부분의 코드는 자바스크립트 파일 안에 들어 있다보니 자바스크립트 파일이 무거워짐 

- 이 때문에 자바스크립트 파일을 기다리는 시간으로 첫 화면의 로딩 시간이 길어짐

 

- 검색 엔진 최적화에 좋지 않음

- 검색 로못은 자료를 수집할 때 웹 페이지의 URL은 물론 HTML 문서 내의 각종 태그나 링크를 분석함 → SPA는 HTML이 거의 비어있다보니 검색 로봇이 충분한 자료를 수집하지 못함

- 이때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 마련해야하고, 웹 애프리케이션 안에서 브라우저 앞으로 가기 / 뒤로 가기 등의 상태 관리도 따로 관리 해야 하기 때문에 개발의 복잡도가 증가함

- But, SPA도 검색 엔진 최적화에 대응하도록 검색 엔진이 발전하고 있어 해당 단점은 사라지는 추세

 

+ 검색 엔진 최적화(SEO)란?

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