NextJSにおけるナビゲーション入門

このチュートリアルのセクションでは、 NextJSにおけるリンクの動作について話します。

まず、リンクの特別な点について議論しましょう。サイト構築のさまざまなアプローチにおけるリンクを見ていきます。

Reactのサイト

Reactで作られたサイトがあるとします。ご存知の通り、ReactはSPA - ユーザーが常に一つのページに留まるサイトを表します。 React Router を追加すれば、ユーザーは異なるページを移動しているように感じられますが、物理的には一つのファイル上に留まったままです。

この場合、ユーザーはリンクをクリックし、別のページに移動したように感じますが、ブラウザ内のサイトページは再読み込みされません - Reactは動的にユーザーの画面に表示される内容を構築します。

この仕組みでは、ユーザーは初めてページにアクセスした時にサイトレイアウトを取得し、その後はサイトの部分がJavaScriptを通じて単に変更されます。また、サイトはAJAXを通じてサーバーからデータをリクエストすることもできます。

このアプローチは、ホスティングへの負荷 (そのリソースは私たちの費用です)とユーザーのインターネット回線への負荷を軽減します。

しかし、このアプローチには欠点があります - SEOの問題です。サイトには一連のリンクがあり、アドレスバーの表示も変わり、メッセンジャーを通じて特定のページへのリンクを共有することもできます。しかし、ページの内容はクライアント側で動的に生成されるため、検索エンジンはそれを処理できません。そのため、このようなサイトは検索順位で上位に表示されません。

ただし、すべてのサイトが検索エンジンでのプロモーションを目的としているわけではありません。あなたのサイトがそうでないなら、この仕組みは十分に機能します。

バックエンドのサイト

あなたのサイトがバックエンド言語の一つ、例えばPHPで作られているとします。

この場合、ユーザーがリンクをクリックするたびに、サイトページは毎回完全に読み込まれます。

問題は、ページの大部分が既にユーザー側に存在していることです。ご存知の通り、ページ上で通常変更されるのはコンテンツとメタデータだけで、それ以外はすべて不変のままですから。

コンテンツだけが変更されたのに、なぜ残りの部分をダウンロードする必要があるのでしょうか？これはサーバーとインターネット回線への過剰な負荷を作り出します。

さらにもう一つの問題があります。私たちが取得するページのコンテンツに、オンラインストアのような製品リストがあるとします。明らかに、各製品は同じレイアウトを持っています。より最適なのは、製品データと製品表示用のテンプレートだけをダウンロードし、その後クライアント側で各製品をそのテンプレートで表示することです。しかし、私たちは繰り返される製品のレイアウトと一緒に製品をダウンロードしています。

まとめると、純粋なバックエンドのサイトでは、ネットワーク上で多くの不要なデータを転送していることになります。

しかし、この場合、SEOの問題はありません。リクエストされたURLには常に静的コンテンツが返され、それは検索エンジンが理解できるものです。

NextJSのサイト

NextJSは両方のアプローチを組み合わせています。ユーザーがURLを直接アドレスバーに入力すると、ページの静的コンテンツが応答として返されます。

しかし、ユーザーが私たちのサイト上のリンクをクリックし始めると、サイトページは完全には更新されず、AJAXを通じてユーザーが必要とするデータが読み込まれます。

検索エンジンが私たちのサイトを巡回する時、それは必要な静的コンテンツを見ます。ユーザーが私たちのサイトを閲覧する時、私たちのサイトはSPAのように振る舞い始めます。

そして、最も重要なのは、NextJSがこれらすべてを自動的に行うことです！私たちはこれについて気にする必要はありません - NextJSがすべてやってくれます。素晴らしい！

次のレッスンでは、NextJSをどのようにして説明された方法で動作させるかを詳しく見ていきます。