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)을 통해 해결할 수 있다.
'Web Front-End > React' 카테고리의 다른 글
React Context API (0) | 2020.04.19 |
---|---|
React Router 적용 (0) | 2020.04.18 |
React immer (0) | 2020.04.18 |
React 컴포넌트가 리렌더링이 발생하는 상황 (0) | 2020.04.17 |
React 컴포넌트 스타일링 (0) | 2020.04.13 |