MPA
Multi Page Application
<a>를 이용해서 페이지를 이동하는 것과 같은 방식을 채택하는 웹 서비스. MPA에서 서로 다른 url을 가진 페이지들은 각각 독립적으로 존재한다. 프론트엔드 서버에서 페이지를 그린 후 브라우저로 html, css, javaScript를 보내주는 작업을 페이지를 이동할 때마다 반복하게 된다.
URL을 직접 입력해서 들어가는 것과 <a>를 통해 페이지를 이동하는 것이 본질적으로 동일하다. 하지만 성능이 좋지 않다.
SPA
Single Page Application
서비스에 첫 접속할 때 모든 페이지의 데이터를 모두 다운로드 받아놓는 방식이다. router를 이용해 페이지를 이동할 때 일부의 컴포넌트만 교체하고 페이지를 리렌더링하게 된다. 최초 접속 시에는 시간이 다소 걸릴 수 있지만 페이지 이동 소요시간은 MPA에 비해 압도적으로 짧다.
SPA 프레임워크인 NextJS에서는 <Link>를 제공한다.
🔗 https://nextjs.org/docs/pages/api-reference/components/link
<a>로 이동하면 MPA 방식을 따르게 돼 NextJS를 사용하는 의미가 없어진다. <Link> 안에 <a>를 넣으면 시멘틱 태그로 렌더링 되기 때문에 검색엔진 최적화에도 이점이 있다.
