SPA, MPA

SPA,MPA

• MPA: 페이지 이동할 때마다 서버에 요청해서 데이터를 받아오므로 속도 느림, 옛날 방식
  (ex: HTML a 태그)
  →react,vue 같은 SPA 프레임워크에서 사용하기에는 부적합

• SPA : 서비스 처음 접속시 모든 페이지의 데이터를 받아옴
  (ex: next.js에서 router.push를 이용해서 페이지 이동)

예시) 카카오맵 api : 버튼을 눌러서 카카오맵이 있는 페이지로 라우팅 하는 경우 카카오 라이브러리를 다 받아오기 전에 페이지가 이동되었기 때문에 에러 발생

solution

1. 미리 다운받아오기→app.tsx에 Head 태그를 넣고 카카오맵 Import
   (BUT 카카오맵이 필요 없는 페이지에서도 다운로드→비효율적)
   
2. 페이지 이동 후 다운로드 받을 때까지 기다리기

<Link href="/29-03-kakao-map-routed">
	<a>맵으로 이동하기 !!</a>
</Link>

검색 최적화를 위해 link 안에 a태그를 넣는다.
->semantic 요소를 가지고 있는 태그로 렌더링이 돼서 웹 검색엔진에 이점을 가짐

기존의 HTML a 태그를 next.js에서 제공하는 Link 태그로 감싸면 된다.
→게시글을 등록하고 페이지를 자동으로 전환할 때는 router.push를 사용하는게 적합