SPA, MPA

lynn·2022년 6월 30일
0

Front-End

목록 보기
23/24

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를 사용하는게 적합

profile
개발 공부한 걸 올립니다

0개의 댓글