MPA, SPA

오늘 만든 것

• 스크롤의 위치에 따라 스타일이 변경되는 애니메이션
• 바닐라 JS로 SPA를 구현하는 원리 학습

배경 지식

MPA: Multy Page Application

• 한 개 이상의 html 파일을 가지고 있다.
• 서버와 통신하며 페이지마다 다른 html을 사용한다. (서버 사이드 렌더링 SSR)
• 페이지에 변경사항이 생길 때마다 화면이 깜빡이며 전체 페이지가 재렌더 된다.

SPA: Single Page Application

• 한 개의 html 파일을 가지고 있다.
• 페이지를 JS가 그린다. (클라이언트 사이드 렌더링 CSR)
• 변경사항이 생기면 필요한 부분만 교체하여 렌더하여
  화면이 깜빡이지 않고 새로고침이 되지 않는다.

SSR: Server Side Rendering

• 페이지의 변경사항이 생기면 서버와 통신하여
  필요한 html을 받아와 렌더를 한다.

CSR: Client Side Rendering

• 페이지의 변경사항이 생기면 response.js를 받아와
  변경사항을 적용한다.

MPA, SPA의 장단점

MPA 장단점

- 장점 -

1. SEO (검색 엔진 최적화) 측면에서 유리하다.
   MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.
   따라서 검색엔진이 페이지를 크롤링하기에 적합하다.
   

2. 페이지 첫 방문 시 로딩이 짧다.
   서버에서 이미 렌더링 된 파일을 받아오기 때문이다.
   하지만 클라이언트가 JS 파일을 모두 다운로드 하기 전까지는
   페이지의 기능이 동작하지 않는다.
   

- 단점 -

1. 새로운 페이지를 이동하면 ‘깜빡’인다. (UX 측면에서 안 좋다)
   모든 페이지에서 요청마다 전체 페이지를 모두 재렌더 하기 때문에
   새로고침(페이지가 깜빡거리며 교체됨)이 발생한다.

2. 페이지 이동 시 불필요한 템플릿도 중복해서 로딩 (성능 측면에서 안 좋다.)

3. 요청이 많아지면 서버에 부하가 커진다.

SPA 장단점

- 장점 -

1. 부드러운 사용자 경험 (UX)
   필요 부분만 렌더하기 때문에 빠르고 새로고침(깜빡거림)이 없다.
2. 필요한 리소스만 부분적으로 로딩 (성능)
   SPA의 Application은 서버에게 한 번만 리소스 요청하고,
   받은 데이터는 전부 저장해놓는다. (캐싱)
3. 서버의 템플릿 연산을 클라이언트로 분산 (성능)
4. 컴포넌트별 개발 용이 (nav bar, header, footer 등..역할분담 쉬움, 생산성)

-단점-

1. JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다.
   Webpack의 code splitting으로 해결 가능

   Code Splitting 이란?
   화면에 보여지는 요소는 먼저 다운로드 하고
   보이지 않는 부분은 나중에 다운로드 하는 방식

2. 검색엔진 최적화(SEO)가 어려움

• SSR로 해결 가능

느낀점

• 순수 JS로도 SPA가 가능하다는 것이 신기했다.
  튜터님의 코드를 보고 원리를 이해한 뒤 구현을 해봤는데..
  왜 리액트가 나오게 되었는지 깨달았다.
  리액트에서는 당연하게 작동하던 것이 순수 JS에서는 손이 많이 간다.
  그래도 리액트의 작동 원리를 JS로 이해할 수 있는 값진 학습이었다!