勇哥

勇哥开发之路

I build things on web.

利用 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 的,不謀而合。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。