우리가 url 칸에 cksnsoft.com/dashboard 를 치면, 이에 필요한 것들 전부를 가져옵니다.

cksnsoft.com/dashboard/invoices 를 치면, 이에 필요한 것들 전부를 가져옵니다.

(정확히 말하면 url칸에 입력후 엔터를 누르면, 해당 라우트의 초기 HTML을 받고, 거기 필요한 JS 청크들이 로드되면서 hydration이 일어납니다.)

하지만, /dashboard 내에서 invoices로 향하는 Next(Next.js) Link를 누르면 다르게 작동합니다.

우선 전체 앱을 불러오는게 아니라, 딱 필요한 부분만 변경합니다. 그리고, History API (JS의 Web Api 중 하나)를 사용해서 url이 /dashboard/invoices로 변하고, History에 /dashboard/invoices가 추가됩니다. 브라우저 단위에서 뒤로가기를 누르면 History에서 앞서 있는 /dashboard 로 이동합니다.

import Link from ‘next/link’

우선 Link를 import 해야됩니다.

History API

참고로 History API는 재밌는게 있습니다.

/dashboard/invoices → /dashboard/customers

이렇게 이동을 했고 이제 다시 /dashboard로 버튼을 누른다 칩시다. 그러면 보통 이렇게 될겁니다:

/dashboard/invoices → /dashboard/customers → /dashboard

근데 이때, History API를 사용해서 현재의 /dashboard/customers를 없애고 /dashboard로 바꿔버릴 수 있습니다.

그러면 이렇게 됩니다:

/dashboard/invoices → /dashboard

이러면 사용자는 /dashboard/invoices → /dashboard/customers → /dashboard 로 체감하지만, 실제로 남는 기록은 /dashboard/invoices → /dashboard 인겁니다.