[React] SPA란?

SPA(Single page application)?

한 개의 페이지로 이루어진 애플리케이션.

• 전통적인 웹 페이지는 여러 개의 페이지로 이루어져 있다.

• 페이지 이동이 이루어질 때 마다. 새로운 html을 받아 해석한 뒤 보여 준다.

  → 웹에서 제공되는 정보가 많아 짐에 따라 서버 측에서 모든 화면을 준비한다면? 성능상 문제가 발생할 수 있다.

  → 캐싱, 압축으로 어느정도 해결 가능하나. 사용자와 인터랙션이 자주 발생하는 모던 웹 어플리케이션은 부적절 하다.

  → html을 계속 서버에 새로 요청하면? 사용자의 상태 유지가 번거롭고 바뀌지 않는 부분도 리 렌더링 하기 때문에 비효율 적이다.

리액트 같은 라이브러리 혹은 프레임워크를 사용하면?

• 렌더링은 브라우저 담당.
• 사용자와 인터랙션이 발생하면 필요한 부분만 js를 통해 업데이트 해준다.
• 새로운 데이터가 필요하다면?
  • 서버 api를 호출 해 필요한 데이터만 새로 불러와 사용한다.

SPA는 화면이 한 종류 일까?

• 서버에서 사용자에게 제공하는 페이지는 한 페이지 이지만 페이지에서 요청된 js 또는 주소에 따라서 다양한 화면을 보여 줄 수 있다.

라우팅

• SPA에서 다른 주소에서 다른 화면을 보여주는 것을 말한다.

SPA의 단점.

앱의 규모가 커지면? 자바 스크립트 파일이 너무 커진다.

• 한번에 모두 받기 때문에, 사용하지 않을 js파일 까지 모두 로딩한다.

  → 코드 스플리팅 으로 개선 가능.

JS를 실행하지 않는 일반 크롤러는 페이지의 정보를 제대로 수집 하지 못한다.

• 구글, 네이버, 다음 등 검색 결과가 제대로 나오지 않는다.

  → SSR (Server Side Rendering) 으로 모두 해결 가능.