React SPA?

SPA란 ?

‘Single Page Application’ 의 약어로 한 개의 페이지로 이루어진 애플리케이션을 뜻한다.

일반 페이지 경우 Client/Web Browser(Front)가 Server(Back-End)에게 html, javascript, css등 화면에 보여줄 데이터를 요청하고, 서버는 요청된 파일을 client에게 뿌려주는 형태였다면

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

1. SPA장점

기존엔 사용자가 다른 페이지로 이동할 때 마다 새로운 html을 받고 페이지를 로딩 할 때 마다 서버에 리소스를 전달 받아 해석한 뒤 화면에 보여주는 형식이었다.

그렇지만 현재의 웹에서는 제공되는 정보가 많아 새로운 화면을 보여줄 때마다 서버 측에서 모든 뷰를 준비한다면 성능 상의 문제를 야기 할 수 있어 리액트 라이브러리 혹은 프레임 워크를 이용해 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 사용자와의 상호 작용이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해줄 수 있어 기존의 문제를 해결할 수 있다.

2. SPA 단점

애플리케이션의 규모가 커질수록 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 모두 불러오기 때문에 자바스크립트 파일이 너무 커진다는 문제가 있었는데, 코드 스플리팅(Code Splitting)을 하여 라우트 별로 파일들을 나누어서 트래픽과 로딩 속도를 개선 하는 식으로 해결하였다고 한다.

리액트 라우터처럼 브라우저에 자바 스크립트를 사용하는 라우팅을 관리하는 것은 자바 스크립트를 실행 하지 않는 일반 크롤러에서는 페이지 정보를 제대로 수집해가지 못하여 대형 검색엔진의 검색 결과가 페이지에 잘 나타나지 않을 수도 있으며 실행될 때 까지 페이지가 비어있기 때문에 자바스크립트 파일이 로딩 되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다는 단점도 있었지만, 서버 사이드 랜더링을 통해 해결 할 수 있다고 한다.