SPA 개요

Traditional web Application - 데이터를 요청할 때마다 페이지 로드!

google.com 페이지 로드하면 최초 페이지 요청을 하고 서버로부터 페이지를 받는다.

goolg.com/about 새로운 페이지를 요청하면 다시 새로운 페이지를 로드해 준다.

SPA - 페이지 로드 없이 데이터 요청

google.com 페이지 로드 하면 최초 페이지 요청을 하고 서버로부터 페이지를 받는다.

google.com/#/about 페이지 로드 없이 다른 부분에 AJAX 요청을 하고 json으로 데이터를 받는다.,

새로고침 없이 콘텐츠만 새로고침이 된다.

SPA 장점

1. 빠르고 자연스런 전환으로 훌륭한 사용자 경험 제공

2. 더 적게 요청해 빠르게 렌더링 가능

3. 컴포넌트 단위 개발로 생산성 향상

4. 쉬운 분업화

SPA 단점

1. 느린 최초 로드 =>[처음에 가져와야 하는 데이터가 많다]

해결 방법 

Lazy loading [일단 보여지는 데이터부터 빠르게 가져온다]

브라우저 캐싱  [한번 보여준 데이터는 캐싱해놓고 보여준다]

2. 어려운 검색 엔진 최적화(SEO) => [구글의 검색 목록에 나타나기 힘들다.]

해결방법 => SSR , Serverless Functions

3. 모든 데이터 노출 [단일 파일로 생성되어]

해결방법 => 비즈니스 로직 최소화