NextJSにおける通常メニューの問題点

前のレッスンでは、通常のリンクを使用してメニューを作成しました：

export default function Menu() {
	return <>
		<a href="/">home</a>
		<a href="/about">about</a>
		<a href="/price">price</a>
		<a href="/contacts">contacts</a>
	</>;
}

では、これに関連するいくつかの問題について議論しましょう。問題は、このメニューのリンクをクリックするとページ全体がリロードされてしまうことです。これはSEOの観点からは正しいですが、パフォーマンスの観点からはあまり最適ではありません。ページがリロードされると、コンテンツのみが変更されるにもかかわらず、サイトのレイアウト全体を再度ダウンロードする必要があります。最適なのは、ページのコンテンツのみをダウンロードすることです。

NextJSにはこの問題に対する解決策が用意されています。これについては次のレッスンで考察します。

通常のリンクをクリックするとページがリロードされることを確認してください。