BFE.devでのAI解答例 - フロントエンド面接質問
81. client-side routing はどう動く?
client-side routing は、ブラウザ上での URL の変更を検知して、動的にページのコンテンツを切り替えるものです。通常、JavaScript を使用して実装され、SPA (Single Page Application) などでよく使われています。
例えば、ユーザーがサイト内の別のページに移動すると、ブラウザは HTTP リクエストをサーバーに送信するのではなく、クライアント側でページを生成し、現在のページの JavaScript ヒストリーに新しいエントリを追加します。これにより、ページのロード時間が短縮され、よりスムーズなユーザー体験が得られます。
client-side routing の動作には、ブラウザの History API と window.onhashchange イベントが利用されます。History API は、ブラウザのアドレスバーの URL を変更するために使用されます。また、onhashchange イベントは、URL のハッシュ値が変更された際に発生します。
具体的には、client-side routing を実現するには、以下のような手順が必要です。
要求された URL に応じて、クライアント側でページコンテンツを生成するルーティングシステムを作成する。
History API を使用して、現在の URL を変更する。
onhashchange イベントを使用して、URL の変更を検知し、新しいページコンテンツを表示する。
簡単に言うと、client-side routing は、JavaScript を使用して、URL の変更をハンドリングし、必要に応じてページコンテンツを切り替えることで、ブラウザ上でのナビゲーションを実現する仕組みです。