引言#
最近勇哥が AI 対話アプリ🤖を作成しており、いくつかの AI 対話アプリを体験しました。
新しい対話シーンでは、ユーザーが最初の質問を送信した後、大部分の AI 対話アプリの処理方法は、フロントエンドがユニークな ID を生成し、ブラウザのアドレスバーがその対話を識別するための URL に即座に置き換えられるというものです。例えば、 /chat/e797acdb-69a8-4aad-a1b3-91b6b9bcd839 のようなものです。この方法の利点は明らかです：ユニークなリソースの位置付け、生成された結果はこのアドレスを通じて共有、再訪問でき、また多段階の対話に備えることができます。
問題#
勇哥が技術選定を行う際に、 Next.js ベースの ai-chatbot を選んだため、最初に考えたのは Next.js の router.push() を使って実現することでした。しかし、実際に試してみると、この方法はうまくいかず、ネット上の多くの情報は古く、ページは依然としてリフレッシュされてしまいます。
Next.js というハンマーを手に取り、どんな問題も釘のように叩こうとし、ドラゴンを倒す技術を学びましたが、基本的な斬りつけやつまみの威力を無視してしまいました。
解決方法#
多くの問題は最終的に原点に戻り、最も素朴な食材を使う必要があります。実際、ページを再描画せずにブラウザのアドレスバーの URL を動的に変更するには、基本的な Web API の History API にある history.pushState() または history.replaceState() を使用するだけで済みます：
...
const newChatUrl = '/chat/' + uuid
window.history.pushState(window.history.state, '', newChatUrl);
...
基礎の強化#
理論的な内容で少し退屈ですが、あなたの問題が解決したなら、ページを閉じても大丈夫です😎
window.history.replaceState と window.history.pushState はどちらもブラウザの履歴スタックを操作するためのメソッドですが、いくつかの重要な違いがあります：
-
window.history.pushState:- ブラウザの履歴スタックに新しい状態を追加します。
- ブラウザのアドレスバーに新しい URL が表示されますが、ページの再読み込みはトリガーされません。
- 新しい履歴エントリが追加され、ユーザーは戻るボタンを使って前のページに戻ることができます。
-
window.history.replaceState:- 現在の履歴エントリを置き換え、新しいエントリを追加することはありません。
- ブラウザのアドレスバーに新しい URL が表示されますが、ページの再読み込みはトリガーされません。
- 新しい履歴エントリは追加されず、ユーザーが戻るボタンをクリックすると、現在のページの前の履歴にジャンプします。
例#
pushState の使用#
window.history.pushState({ page: 1 }, "title 1", "/page1");
これにより、履歴に新しいエントリが追加され、ユーザーは戻るボタンを使って以前のページに戻ることができます。
replaceState の使用#
window.history.replaceState({ page: 2 }, "title 2", "/page2");
これにより、現在の履歴エントリが置き換えられ、ユーザーが戻るボタンをクリックすると、現在のページの前の履歴にジャンプします。
まとめ#
pushStateは新しい履歴エントリを追加するために使用されます。replaceStateは現在の履歴エントリを置き換えるために使用されます。
文中で言及されたリソース：
- ai-chatbot：https://github.com/vercel/ai-chatbot
- history.pushState：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
- history.replaceState：https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState