Next.js の router.push を利用してページの部分更新を実現する

シーン#

「新しい対話を作成」は AI 対話アプリケーションの一般的な機能です。

勇哥が AI 対話アプリケーションを始めたときは、Next.js + shadcn/uiを基にしていました。「新しい対話を作成」機能を実装する際、自然に Next.js の router.push () を使って新しい対話にルーティングしました。

問題#

しかし、実際のテストで、ページが再レンダリングされない確率があることがわかりました。新しい対話のアドレスにルーティングされても、ページの内容は依然として古いページのままです。

解決策#

分析の結果、router.push()が時々完全なページの再レンダリングをトリガーしないことがあることがわかりました。特に URL パラメータが変わってもパスが同じ場合です。これは Next.js がデフォルトで採用しているクライアントナビゲーションの最適化メカニズムによるものです。

そこで、以下のように修正しました：

...
export function NewChat() {
  ...
  return (
    <Suspense>
      <Button onClick={async () => {
        const newChat = createQueryString('newchat', 'true')
        await router.push(newChat)
        router.refresh()
      }}>
        <Plus /> 新しい対話を作成
      </Button>
    </Suspense>
  )
}

説明#

async/await を追加してナビゲーションの完了を確保
router.refresh () を使用して push が完了した後に refresh を実行し、ナビゲーション後にページが正しく再レンダリングされることを確保

また、コンポーネントが実際に再レンダリングされることを確保するために、いくつかの状態管理を追加することもできます。あるいは、ナビゲーション後に window.location.reload () をバックアッププランとして追加することもできますが、これによりページ全体がリフレッシュされ、体験が悪化します。

脇道#

その後、vercel がオープンソースしたAI Chatbotを見て、これもNext.js + shadcn/uiを基にしていることに気付き、偶然にも一致しました。