SPA(Single Page Application)

SPA(Single Page Application)

• 한개의 페이지로 이루어진 애플리케이션

• 필요한 데이터를 서버사이드에서 HTML으로 전달하지 않고, 필요한 데이터만 서버로부터 JSON 형식으로 전달받아 동적으로 렌더링

• 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줌

 

 

전통적인 웹 페이지

• 기존에는 사용자가 다른 페이지를 이동할 떄 마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줌

• 사용자에게 보여지는 화면은 서버 측에서 준비

• 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용

• 요즘에는 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상에 문제 발생 가능성 존재

• 트래픽이 많이 나올 수 있고, 사용자가 몰려 서버에 높은 부하가 발생할 수 있어 캐싱과 압축을 사용해서 서비스를 제공한다면 어느 정도 최적화 할 수 있지만 사용자와의 인터렉션이 자주 발생하는 모던 웹 애플리케이션에서는 적당하지 않음

• 애플리케이션 내에서 화면 전환이 일어날 때마다 html을 계속 서버에 새로 요청하면 사용자의 인터페이스에서 사용하고 있는 상태를 유지하는 것도 번거롭고, 바뀌지 않는 부분까지 새로 불러와서 보여주어야 하기 때문에 불필요한 로딩이 존재하여 비효율

 

 

요즘의 웹 페이지

• 리엑트같은 라이브러리 혹은 프레임워크를 사용하면 뷰 렌러딩을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에서 불러와서 실행시킨 후 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트

• 만약 새로운 데이터가 필요하면 서버 API를 호출하여 데이터만 새로 불러와 애플리케이션에서 사용

 

 

SPA 단점

• 페이지 로딩 시 사용자가 실제 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문에 앱의 규모가 커지면 자바스크립트 파일이 커짐

  (코드 스플리팅(Code Splitting)을 사용하여 라우팅별로 파일들을 나누어서 트래픽과 로딩 속도 개선)

• 리엑트 라우터처럼 브라우저에서 자바스크립트를 사용하여 라우팅을 관리하는 것은 자바스크립트를 실행하지 않으면 일반 크롤러에서는 페이지의 정보를 제대로 수집해 가지 못한다는 잠재적인 단점

  구글, 네이버, 다음과 같은 검색엔진의 검색 결과에 페이지가 잘 나타나지 않을 수 있음

  구글 검색 엔진에서는 사용하는 크롤러의 경우 자바스크립트를 실행해 주는 기능이 탑재되어 있지만, 크롤링하는 모든 페이지에서 자바스크립트를 실행하고 있지는 않음(2019기준)

  자바스크립트가 실행될때 까지 페이지가 비어 있기 때문에 자바스크립트 파일이 로딩 되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다는 단점

  이러한 문제는 서버사이드 렌더링(Server-side rendering)을 통해 해결 가능

 

 

 

 

 

 

참고 

리액트를 다루는 기술 (개정판)