HTMLのaタグとAppRouter（Next.js）のLinkの違いと読み込み速度について（備忘録）

はじめに

HTMLのaタグを使用して画面内移動を実現していましたが、Next.jsのLinkタグに変更することで読み込み速度が向上したのでその理由を備忘録として残したいと思います。

HTMLのaタグについて

HTMLのaタグは、リンク先に遷移する際にページを再度読み込む。
これによって、画面遷移時の読み込み速度が遅くなりモッサリした動作になってしまう。

Next.jsのLinkタグについて

Next.jsのLinkタグは、リンク先に遷移する際に、必要な部分のみ読み込む。
これによって、画面遷移時の読み込み速度が速くなる。