[REACT] SPA / Single Page Application

SPA란?

싱글 페이지 어플리케이션. 페이지가 하나다.

처음 HTML 페이지를 하나 불러온 다음, 이후 페이지들은 JS로 로드한다.

기존 웹페이지 로딩방식의 단점

• 트래픽이 너무 많이 나올 수 있다.
• (=비교적 안나온다.)
• 사용자가 몰려 서버에 높은 부하가 나올 수 있다.
• (=서버에 높은 부하가 나오지 않는다.)
• 화면전환이 일어날 때마다 HTML을 계속 서버에 요청하면 사용자의 상태를 유지하기 힘들다.
• (=리액트는 사용자의 상태를 유지하기 쉽다.)
• 바뀌지 않는 부분까지 새로 불러와서 보여줘야해서 불필요한 로딩이 있어 비효율적이다.
• (=리액트는 바뀌는 부분만 새로 불러와서 효율적이다.)

SPA 장점

• 뷰 렌더링을 사용자의 브라우저가 담당한다.
• 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 한다.

SPA 단점

• 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다.
• (=코드 스플리팅으로 라우트별 파일을 나눌 수 있다.)
• 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 수집하지 못한다.
• 따라서 검색엔진의 결과에 나타나지 않을 수 있다.
• (해당 단점들은 SSR(Server Side Rendering)을 통해 해결할 수 있다. Next.js)

라우터(Router)

• 싱글 페이지라고 해서 한 페이지만 볼 수 있는 것은 아니다.
• 다른 주소에서 다른 화면을 보여주는 것을 라우터라고 한다.
• 리액트 자체에는 없다.
• 리액트 라우터(react-router), 리치 라우터(reach-router), Next.js 등이 있다.

Next.js에 관한 글

https://emessell.github.io/react/2019/10/30/SSR,CSR/

서버 사이드 렌더링, 클라이언트 사이드 렌더링 차이(Next.js)