SPA (Single Page Application)

SPA

단일 페이지로 구성된 웹 App

• SPA 가 나오기 전

  렌더링을 서버가 처리함

  화면 이동에 필요한 HTML 을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 페이지 이동이나 리렌더링에 시간이 걸림

  서버가 렌더링도 감당하기에 리소스를 더 소모하게 됨

• SPA

  페이지를 불러올 시 View 렌더링에 대한 모든 정적 리소스를 최초에 한번 다운로드 함

  받아온 리소스로 클라이언트, 즉 브라우저가 뷰 렌더링을 담당함

  사용자와의 인터렉션이 발생하면 필요한 부분만 JS 를 사용하며 업데이트 해 줌 (서버 API 를 호출하기도 함)

  서버가 렌더링을 감당하지 않기 때문에 리소스를 절약함

• 단점

  앱의 규모가 커지면 JS 파일이 너무 커지게 되므로 로딩 시간이 길어질 수 있음 (코드 스플리팅으로 개선 가능)

  필요한 모든 정적 리소스를 최초에 한 번 다운로드하고 JS 가 렌더링하므로 초기 렌더링이 늦어지고 빈 페이지가 보일 수 있음 (SSR 같은 기술로 초기 렌더링 개선 가능)

  서버 렌더링 방식이 아니라 JS 기반 비동기 모델이기 때문에 검색 엔진 크롤러 봇 같은 JS가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않음 (부분적 SSR 로 보완 가능)