React SPA(Single Page Application)

1. SPA란?

• SPA가 아닌 기존 웹은 페이지 이동이 일어날때 마다 서버단으로부터 새로운 HTML을 받아 오고, 받아온 리소스를 해석한 후 브라우저에 보여줬다.(서버에서 렌더링해줌)
• 새로운 화면을 보여줘야할 때마다 서버로 요청을 한다면 성능상에 문제가 발생할 수 있으므로 Front/Back을 분리하여 React같은 프레임워크를 사용하여 뷰 렌더링을 전담으로 하도록 하고, 인터랙션이 발생하면 필요한 부분만 자바스크립트를 통하여 업데이트 해준다.
• SPA에서 다른 화면을 보여주는 것을 "라우팅"이라고 불린다.
• 리액트에서 라우팅 라이브러리는 react-router, reach-router, Next.js 등 여러 가지가 존재한다. (Vue-Router랑 비슷할듯)

 

2. SPA의 단점

• 장점이 있으면 단점도 있는법..
• SPA의 규모가 커지면 자바스크립트 파일이 커지므로 페이지 로딩시 모든 파일을 로드하기 때문에 부하가 발생한다.
• 대체 방법으로 코드 스플리팅(code spliting)을 사용하면, 라우트별로 파일을 나눠서 트래픽과 로딩 속도를 개선할 수 있다.
• 크롤러에서 자바스크립트를 실행하지 않기 때문에 페이지 정보를 제대로 수집해 가지 못한다는 단점 또한 존재한다.(SEO, 검색엔진최적화)
• 대체 방법으로 서버 사이드 렌더링(Server Side Rendering)을 통해 해결할 수 있다.