[Vue.js][Ch4][영화검색 사이트] SPA 개요

전통적인 Web Application

1. 사용자가 google.com을 접속하면 google.com에 해당하는 서버로 최초 페이지 요청

2. 서버에서 사용자에게 기본적인 HTML 파일을 내어줌

3. 사용자는 브라우저에서 내어받은 HTML 파일이 렌더링된 결과를 볼 수 있다.

4. 만약, google.com/about 페이지로 접속하면, google.com에 해당하는 서버로 about에 대한 새로운 페이지 요청

5. 서버는 about에 대한 새로운 HTML 파일을 내어줌

6. 사용자는 브라우저에서 내어받은 새로운 HTML 파일이 렌더링된 결과를 볼 수 있다.

=> 데이터를 요청할 때마다 페이지를 로드한다.

SPA(Sing Page Application)

 

1. 사용자가 google.com을 접속하면 google.com에 해당하는 서버로 최초 페이지 요청

2. 서버에서 사용자에게 기본적인 HTML 파일을 내어줌

3. 사용자는 브라우저에서 내어받은 HTML 파일이 렌더링된 결과를 볼 수 있다.

4. 만약, google.com/about 페이지로 접속하면, google.com에 해당하는 서버로 가존 페이지와 about 페이지의 다른 부분을 요청 (AJAX 요청)

5. 서버는 about에 대한 데이터를 응답함(JSON)

6. 사용자의 브라우저에는 기존 렌더링한 최초 페이지에서 about 페이지로 달라진 데이터만 렌터링하고 화면에 표출한다.

=> 페이지 로드없이 데이터를 요청한다.

SPA 장점

• 빠르고 자연스런 전환으로 훌륭한 사용자 경험 제공
  • 페이지 전체를 다시 로드할 필요가 없기 때문에
• 더 적게 요청해 빠르게 렌더링 가능
  • 변경된 부분만 요청하기 때문에 
• 컴포넌트 단위 개발로 생산성 향상
  • 컴포넌트가 기능적으로 분리되어 있어서 필요한 경우 반복적으로 사용할 수 있기 때문에
• 쉬운 분업화

SPA 단점

• 느린 최초 로드 => Lazy loading, 브라우저 캐싱
  • 하나의 파일을 통해 여러가지 페이지와 기능을 구분해서 사용하는 것이기 때문에 최초 접속 시, 가져오는 데이터가 많아서 느림
• 어려운 검색 엔진 최적화(SEO) => SSR, Serverless Functions 
  • 검색 엔진 : Google, Naver, Daum, Kakako 등...
  • 검색 엔진이 접근했을 땐 페이지가 하나밖에 없기 때문에, 검색 엔진이 페이지를 가져갈 때 문제가 된다.
• 모든 데이터 노출 => 비즈니스 로직 최소화
  • 단일 파일이기 때문에 파일에 연결되어 있는 데이터가 한번에 노출된다. -> 프론트엔드에선 비즈니스 로직을 최대한 작성하지 않아야 함.