SPA vs MPA

Yeeeeeun_IT·2022년 8월 25일
0

페이지를 이동할때 router와 a 태그의 차이가 무엇일까?

SPA (Single Page Application)

SPA에서는 서비스에 처음 접속할 때 모든 페이지의 데이터를 다 받아온다.
그리고 router를 통해 페이지를 이동할 때, 실제로는 페이지의 일부에 해당하는 컴포넌트만 교체한 뒤 페이지를 다시 그려온다. (re-rendering)

SPA의 경우 최초 로딩에는 시간이 다소 걸릴 수 있으나,
페이지를 이동할 때 걸리는 시간이 MPA에 비하여 훨씬 짧다.

MPA (Multi Page Application)

a 태그를 이용해서 페이지를 이동하는 것과 같은 방식을 채택하는 웹 서비스를 MPA 방식이라고 한다.
MPA에서 서로 다른 url을 가진 페이지들은 각각 독립적으로 존재한다.
따라서 프론트엔드 서버에서 페이지를 그린 뒤, 브라우저로 HTML, CSS, JS를 보내주는 작업을 모든 페이지마다 하게된다.
이 경우 주소를 직접 입력해서 들어가는 것과 a태그를 통해 페이지를 이동하는 것은 본질적으로 동일하다. 하지만 MPA 의 경우, 페이지 이동 시마다 서버에 요청해서 데이터를 받아와야 하기 때문에 성능은 떨어진다.

profile
🍎 The journey is the reward.

0개의 댓글