【意味・仕組み】Linkコンポーネント、Client-Side Navigationとは

ページ遷移で使用するLinkコンポーネントでは、Client-Side Navigationが可能になる。

これがNext.jsの魅力の一つ。

Client-Side Navigationとは

jsを使用してページ遷移をすること。

普通はページ遷移する度に、ブラウザによってサーバーにリクエストが送られ、該当ファイルがレスポンスとして返され、それをブラウザが表示している。そのため、ページ遷移する度にブラウザはファイルを読み込み、表示を更新していることになる。

<aside> 💫 検証ツールでCSSを追加した場合、その状態でページ遷移すると、追加したCSSは消えているよね？それは表示させたいファイルを都度ブラウザが読み込み、表示を更新しているから。表示更新によって先ほどまで保持していた情報は破棄されるので、検証ツールで追加したものは消えてしまう。

</aside>

それに対してLinkコンポーネントでは、Client-Side Navigationが可能なので、ブラウザが保持していた情報を持ったままページ遷移、遷移後のページでも利用することができるのだ！

（コード分割によって、表示すべきファイルだけを読み込むのでまず速い、そしてそのページに記載の内部リンクは、プリフェッチ（＝事前読み込み）によってバックグラウンド側で予め読み込んでいるので、ページ遷移も速い＆ブラウザが保持している情報も維持できる）

詳しい仕組みは公式ドキュメントを参照のこと。

<aside> ⚠️ Client-Side Navigationを使いたい場合は、必ずLinkコンポーネントを使用すること！ <a href="…"></a> のままだとブラウザは完全に更新されるので、ブラウザが保持していた情報は破棄されるよ。

ただし、外部リンクを載せる場合は、Linkコンポーネントは使わず、aタグのみを使用すること！

</aside>