React의 SPA(Single Page Application) 장점 과 단점

1.장점

기존에 서버는 모든 html을 전달하여 화면에 보여주었다. 그러다보니 페이지를 이동할때마다 새로운 html을 받아오고 리소스를 전달받아 해석하여 화면에 보여줬다. 하지만 요즘 웹에선 제공되는 정보가 정말 많기에 새로운 화면을 보여 주어야 할때마다 서버 측에서 모든 뷰를 준비한다면 성능상 문제가 발생할수있다.

 

 

 

예를들어 트래픽이 너무 많이 나올경우 사용자가 몰려 서버에 부하가 쉽게 걸릴수 있다.  그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다.

 

 

1.단점

 

spa의 단점은 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는점이고 실제로 웹브라우저가 페이지 로딩 시킬때 사용자가 발문하지 않을 수 도 있는 페이지의 스크립트들도 불러오기에 이러한 상황이 발생한다. 하지만 코드 스플리팅을 사용하여 라우트 별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할수있다.

 

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

 

그렇기 때문에 구글,네이버,다음 같은 검색 엔진의 검색 결과에 페이지가 잘 나타나지 않을 수 있다. 또한 자바스크립트가 실행될 때까지 페이지가 비어 있기 때문에 자바스크립트 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다는 단점도 있다. 이러한 문제는 서버 사이드 렌더링을 통해 모두 해결할수 있다.